I need to use a static no-repeating background image on my website, but when the image finishes (vertically), i need to use repeatedly another image. How could this be done?
For the first image should be something like:
background:url(../img/header/main_bg01.jpg) no-repeat top center;
But for the second one, vertically after the first one, should do somehting like:
background:url(../img/header/main_bg02.jpg) repeat top center;
background-repeat: repeat-y;
How could this be done?
Regards,
Use multiple backgrounds on the same element (adjust sizes to your needs):
background:
url(bg1.png) 500px 100px no-repeat,
url(bg2.png) 50px 100px repeat;
Related
How can I use background-repeat with multiple images? The primary background image is static and only sits at the top of the unscrolled page.
Once the user starts to scroll down on longer pages, there is a secondary background image than blends in with the first image.
This image repeats infinitely (if necessary) for long pages.
How can I do this?
This is what I have tried:
background-image:
url(../images/background/large/static.png),
url(../images/background/large/repeat.png);
background-repeat:
no-repeat,
repeat-y;
background-position:
0px top,
600px top;
The static.png background page is on top and displays from 0 to 600px. The repeat.png then starts at 600px and keeps repeating down to infinity if necessary. The static page should only display once at the very top. Any suggestions? Thank you!
I think one big problem is, background-repeat is only applied once and to both images.
Got everything working. The issue was with the background-position. I did not understand the syntax. 600px from the left and align to the top is what it says in the above example. I thought its meant 600px from the top. When I tried using the real number it was putting the image way off the screen at right making it feel like it wasn't working. I understand the syntax now and all is working perfectly. Thanks!
background-image:
url(../images/background/large/static.png),
url(../images/background/large/repeat.png);
background-repeat:
no-repeat,
repeat-y;
background-position:
left top,
left 600px;
I'm trying to add multiple background-images to a DOM element (a td) using CSS. I can specify multiple background images that stack on top of each other like so:
td{
background-image: url("img1.svg"), url("img2.svg");
}
This results in img2 being stacked on top of img1. However, I need to specify that one background image should be off-center, while the other centered. Is there a way to do this in CSS, or will I need to get fancy to do this?
You just do the same with the position rule:
td{
background-image: url("img1.svg"), url("img2.svg");
background-position: center center, left top; /* or */
background-position: center center, 0px 0px; /* x y */
}
The first apply to the first image, the second to the second image and so forth.
For more details:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
You can use background-position property
background-position: left top, center center;
You can use background shorthand property if you wan't to type less. I really prefer shorthands.
+background-position +background
I am a beginner in designer, I had to develop a small website, where i designed a ui, but i have problems regarding css.
Here's a style i have written
background-image: url("../images/border_bottom_left.png"), url("../images/border_bottom_right.png"), url("../images/border_top_left.png"), url("../images/border_top_right.png");
background-position: bottom left, bottom right, top left, top right;
background-color:grey;
background-repeat: no-repeat;
which inserts four images to four corners and fills all the other part with a grey background
Now, instead of grey, i wanted to insert an image, So i replaced background-color with background-image: url("../images/bg_content.png") but it does not help me. I tried to use the bg_content.png in the first background-image and write its corresponding position to center, it didn't work?
Can anyone of you please help me!
Simply add the image to your background-image and your background-position, then expand your background-repeat:
background-image: url("../images/border_bottom_left.png"), url("../images/border_bottom_right.png"), url("../images/border_top_left.png"), url("../images/border_top_right.png"), url("../images/bg_content.png");
background-position: bottom left, bottom right, top left, top right, top left;
background-color:grey;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
http://jsfiddle.net/5k8eg/2/
background-color cannot specify a url, only a color. You will need to use more than one div (or whatever element you are using) to do what you are trying to do.
This is probably because your background image doesn't get repeated (as do the corner images) therefore, it will get covered up by one of the corner pictures. Try to set the first background-image to repeat:
background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
Are you sure you specified center for X and Y of the 5th image ?
background-position: bottom left, bottom right, top left, top right, center center;
http://jsfiddle.net/YhZ8e/
As long as I know background-color doesn't accept image files. Try background-color:#4B4C4D instead. For picking up HTML colors you can use this online color picker.
EDIT: place a div inside another div and give those divs different background-image values. One div can have only one background image.
However in CSS3 you can have more than one background images. Visit this link for that purpose.
I have a sidebar with 2 background images. This is my CSS:
background-color: #fff;
background-image: url('img/back-1.png'), url('img/back-2.png');
background-position: left top, left top;
background-repeat: no-repeat, repeat-y;
background-size: 100% auto, 100% auto;
when I change the width of the browser with the mouse (I use responsive design), the second image disappears in some position. But if I refresh the page or change the width, everything restores. Do you have any idea why does the image disappear?
I had a similar issue,
I made 2 classes of CSS,
Detected the browser width by JavaScript,
Attached the right one to the class by JavaScript;
I am setting a background image in the css as
body{
background-image: url('image.jpg');
background-repeat: repeat-x;
}
However, this does not increase the height of the background image as the page height increases. How can this be resolved?
Change repeat-x to repeat, so that it repeats both horizontally and vertically:
body{
background-image: url('image.jpg');
background-repeat: repeat;
}
Repeat-x only repeats horizontally, you want vertically, so either use simply "repeat" (will repeat vertically and horizontally) or
"repeat-y" (repeats vertically)
Also if you want to clean up your css and not have 30 different options to effect the background just use (I'm guessing you're using a WYSIWYG editor like Dreamweaver to do your css, I'd suggest and IDE, I use Aptana studio, but there's plenty of good options out there. It'll be easier to avoid a "bloated" style sheet if you avoid WYSIWYG editors)
body{
background: url('image.jpg') repeat-y center top;
}
You can throw a color value in there as well.