I want to have multiple backgrounds at the same time, they will overlap each other.
I know it has to work but somehow it doesn't work for me.
code I have:
body{
height:100%;
width:100%;
background:
url("../images/background/top-img-bg.jpg") no-repeat center top,
url("../images/background/bottom-img-bg.jpg") no-repeat center bottom,
url("../images/background/overlay-pattern.png") repeat-x left top;
}
I want to have an image stick to the top, an image stick to the bottom and a image that overlay the whole background.
http://jsfiddle.net/8LtEk/
Try breaking your css into separate statements like below. Using comma's to separate the individual background images and maintaining the same ordering for any other background properties:
background-image: url("../images/background/top-img-bg.jpg"), url("../images/background/bottom-img-bg.jpg"), url("../images/background/overlay-pattern.png");
background-position: center top, center bottom, left top;
background-repeat: no-repeat, no-repeat, repeat-x;
Also, this is one of those CSS3 features where browser support could be the culprit.
Related
I would like to make a text box that has 3 backgrounds, the top, bottom and a general background image that repeats according to how much text there is.
So far I have this: http://jsfiddle.net/6pTje/29/
The background that needs to be repeated doesn't repeat because of the code. But when I take out the no-repeat and put it directly after the images, it doesn't seem to work.
#exampleA {
width: 660px;
height: 400px;
padding: 25px;
background-image: url(http://i.imgur.com/vt6xUmh.gif) left top no-repeat, url(http://i.imgur.com/Qn8iy0u.gif) left bottom no-repeat, url(http://i.imgur.com/8P2nGUp.gif) left top repeat-y;
}
Can anyone take a look and see what I'm doing wrong? Or if what I'm trying to achieve is even possible? For the record I'd like it to scale so the more text there is the longer the box will get!
Thank you for any help!
is this what you are trying to do?
http://jsfiddle.net/6pTje/34/
background-repeat: no-repeat, no-repeat, repeat-y;
http://jsfiddle.net/6pTje/37/
background-position: left top, left bottom, 23px top;
I am trying to set multiple backgrounds for the document body. Why isn't this code working?
body
{
background: url(../Images/StandardBackgroundPattern.png) repeat, url(../Images/StandardBackground.png) center center no-repeat;
background-size: auto, cover;
}
This code only displays the Photo. No pattern to be seen anywhere (but Dev Tools says that both the Photo and pattern have been loaded).
The intended effect of the above is to include a background photo, centered and filling up the width and height of the viewport, and to place a pattern ontop of that and repeat it both horizontally and vertically.
It would be preferable to avoid using multiple div's for this if possible.
Try like this. It should work fine.
body {
background-image: url(first.png), url(second.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
If you are using background shorthand property. You can use this shorthand method.
body{
background: url(first.png) center bottom no-repeat, url(second.png) left top no-repeat;
}
Why isn't this code working?
Because that's a syntax error.
It would be preferable to avoid using multiple div's for this if
possible.
Sorry. You'll have to do it in your un-preferable way. Or, split the image itself and then use it.
I have 3 background images and a colour that I want to put onto a mock up webpage however I can't get them to show at all, here is the css I am using:
body{
#FF0,
url(../Pictures/midal_foot_img_lg.png) bottom center no-repeat,
url(../Pictures/banner.png) center no-repeat,
background:url(../Pictures/header2.png) top center no-repeat;
}
I think your syntax isn't right, try this:
body {
background:
url(../Pictures/midal_foot_img_lg.png) bottom center no-repeat,
url(../Pictures/banner.png) center no-repeat,
url(../Pictures/header2.png) top center no-repeat;
background-color: #FF0;
}
Source
Css property name must go before value. In your case background. Also you may want to check out question Barnee pointed to.
body{
background:
url(../Pictures/midal_foot_img_lg.png) bottom center no-repeat,
url(../Pictures/banner.png) center no-repeat,
url(../Pictures/header2.png) top center no-repeat,
#FF0
}
I'm having a problem setting up div's background in 3 parts (I have a big shadow in 3 parts - top, mid (repeatable) and bottom). Unfortunately, they're a bit opaque so I can't have mid appear all the way from top to bottom... How can I set up background so the mid portion only appears between top and bot?
Current code that gives the problem:
background-image: url('shadow_top.png'), url('shadow_bot.png'), url('shadow_mid.png');
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: center top, center bottom, center top;
I have a page with 2 background images, one of them needs to show at the very bottom of the page. Currently I've implemented it like this:
body {
background-image: url('/cheri/image/background.png'),
url('/cheri/image/backgroundB.png');
background-position: top, bottom;
background-repeat: repeat-x, repeat-x;
}
This works fine when page content is higher than the browser window, but if it's smaller an empty white space is left below the background image, like in this picture:
http://img198.imageshack.us/img198/4560/screenshot20120916at851.png
I have tried to set the body as position:absolute, height:100%, but it did not render correctly when scrolling was present. I have also attempted to create a separate div for the background image and absolutely position it to the bottom, but since I have different position properties for some elements that occur at the bottom, the z-indexing didn't work properly.
Thanks for any help!
Use min-height: 100% on both html and body:
html, body { min-height: 100%; }
DEMO
It creates no issues when you have enough content to cause scrolling.
DEMO
Set the HTML element as well:
html {
background-image: url('/cheri/image/background.png'), url('/cheri/image/backgroundB.png');
background-position: top, bottom;
background-repeat: repeat-x, repeat-x;
}