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;
Related
I have an LARGE image that needs to be a part of a site, of course this hits the performance. I got the idea to cut it up into pieces and stich the image together at load using a grid was my idea.
One tiny problem though... it has to be in the background.
Should I go the dreadful z-index way to fix this or is there a more beautiful solution? The image can be cut in any number of tiles.
Depending on the required browser support you could use multiple background images. Position them in their appropriate position in the background.
html,
body,
div {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
background-image:
url(http://via.placeholder.com/350x150?text=Image1),
url(http://via.placeholder.com/350x150?text=Image2),
url(http://via.placeholder.com/350x150?text=Image3),
url(http://via.placeholder.com/350x150?text=Image4);
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-position:
top left,
top right,
bottom left,
bottom right;
background-size:
51% 50%,
50% 50%,
51% 50%,
50% 50%;
}
<div></div>
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 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 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;