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;
Related
I want to give a container a background image, which is basically a white image, with a fancy border on its left and right side. It is only a few pixels high so gets repeated on the y-axis.
However, the image is a set width, so cannot expand/contract on the x-axis. Is there a way of maybe giving the container 3 background images - 1 for the left border, 1 for the right and 1 for the centre?
That way I can repeat the centre background image and sandwich it between the side background images.
I had two images and did it with that you can add another one http://jsfiddle.net/xksr01v4/
#back{
width: 500px;
height: 250px;
background-image: url(http://placekitten.com/300/301),
url(http://static.comicvine.com/uploads/original/11112/111123678/3503035-3468468-2718720139- batma.jpg);
background-position: left, right;
background-repeat: no-repeat;
}
#container{
background-image: url(image1.png), url(image2.png), url(image3.png);
background-position: left top, right top, center top;
}
There are probably many ways to do this, but this link shows a very simple way of having an expanding background image:
background-size: 100% auto;
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.
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;
I know I can repeat a single background image in the y direction. But I want to repeat a few of them. I also want to resize them all so they fill the entire screen each. i.e. to give the effect of them being on top of each other.
I know I can use something like fullpage but I'd rather code it myself.
All I have is:
body {
background: url("images/bg1.png");
background-size: cover
}
Here is an ugly example, however it shows a lot of different options:
body {
background-image : url(http://lorempixel.com/400/200/),
url(http://lorempixel.com/400/200/sports/),
url(http://lorempixel.com/400/200/sports/1/);
background-repeat : repeat-y,
repeat-x,
repeat-y;
background-position: bottom right,
top left,
bottom left;
}
https://jsfiddle.net/DIRTY_SMITH/c7Lof03h/2/
Just add the image urls one after the other with their respective properties separated with a comma like this:
background:
url(1.png) 600px 10px no-repeat,
url(2.png) 10px 10px no-repeat,
url(3.png),
url(4.png);
}