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
}
Related
Is there a way to set a background to be fixed to the center, and to the bottom, but not flush with the bottom of the element, rather 100px up from the bottom of the element?
(Of course the bg image would only be visible with in the div bounds)
This is what i have so far, but don't know how to bump the image up 100px from the bottom.
background: url("/path/to/bg.jpg") no-repeat fixed center bottom #FFF;
(no javascript answers please)
Very simple:
background-color: #fff;
background-image: url("/path/to/bg.jpg");
background-repeat: no-repeat;
background-position: center bottom 100px; /* answer */
Ref: http://www.w3.org/TR/css3-background/#the-background-position
More to read: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
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 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.
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;
background: url(timages/wb-right.png) 100% 0 no-repeat, url(timages/wb-left.png) 0 0 no-repeat, url(timages/wb-top.png) 0 0 no-repeat, url(timages/wb-bottom.png) 0 80px no-repeat;
I currently have this code specifying 4 images for the background of a box. There is one for each side. Left Top Right Bottom.
The only issue is the Top and Bottom images do not stretch or repeat the full width of the box. Is this possible to do. If I set any of the no-repeats to repeat it fills the entire background.
Any advice helpful
You looking for something like this: ?
Demo: http://jsfiddle.net/abhitalks/dgcfK/
background-image: url(timages/wb-top.png),
url(timages/wb-left.png),
url(timages/wb-right.png),
url(timages/wb-bottom.png);
background-position: left top, left bottom, top right, bottom right;
background-repeat: repeat-x, repeat-y, repeat-y, repeat-x;