Multiple Background Images Positioning

Multiple background images positioning

Your problem is that the repeat-y is going to fill the whole height, no matter where you position it initially. Thus, it overlaps your top and bottom.

One solution is to push the repeating background into a pseudo element positioned off of the container by the 12px at the top and bottom. The result can be seen here (the opacity in the demo is just to show that there is no overlap going on). Without opacity, see here. The relevant code (tested in CSS3 browsers: IE9, FF, Chrome):

CSS

div {
    position: relative;
    z-index: 2;
    background: url(top.png) top left no-repeat, 
                url(bottom.png) bottom left no-repeat;
}

div:before {
    content: '';
    position: absolute;
    z-index: -1; /* push it to the background */
    top: 12px; /* position it off the top background */
    right: 0;
    bottom: 12px; /* position it off the bottom background */
    left: 0;
    background: url(middle.png) top left repeat-y;
}

If you needed or wanted IE8 support (which does not support multiple backgrounds), then you could put the top background in the main div, and put the bottom background in by using the div:after pseudo element positioned to the bottom of the container.

positioning multiple background images

Try this

.img_home{    background-repeat: no-repeat;    height: 1000px;    background: url(http://www.spidycode.com/testing/revibe/images/Circle1.png) 25px top no-repeat,url(http://www.spidycode.com/testing/revibe/images/Circle2.png) no-repeat;}

<div class="img_home"></div>

Multiple background positioning in CSS

There is no way to position of images with respect to other background . but you can achieved your task with multiple div having multiple background and arrange them using position absolute and z-index

Multiple background image position

Solution

You must use the following setting for background-position

background-position: 100% 0, 33.33% 0, 66.67% 0, 0 0;

.background-image {  background-image: url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg);  background-repeat: no-repeat;  background-position: 100% 0, 66.67% 0, 33.33% 0, 0 0;  width: 400px;  height: 20px}.background-color {  background: linear-gradient(to right, black 0%, black 25%, blue 25%, blue 50%, green 50%, green 75%, orange 75%);  width: 400px;  height: 20px;}

100px x 20px = http://www.gtsalive.com/images/partners/pizzahut.jpg<br><br><div class="background-image"></div><div class="background-color"></div>

Three or more backgrounds stacked CSS

When you set multiple images on a single element without specifying the background-position, they all are placed on the same position and so they will be one below the other. As long as the images are of the same size only one will show. If the images are of different size, say first is 100px tall, second is 200px, third is 300px then for the first 100px the first image will show up, for 100 - 200px the bottom of second image will show and for 200-300px the last third of the final image will show up.

Here is how you can stack the images within a single element.

• If all three images are same height then just mention background-position: top,center,bottom. This setting means the top of the first image will be aligned with top of the container, second one's center will be aligned with center of container and third one's bottom will be at container's bottom.
• If the images are of different height then the above approach will not work as-is, the positions will have to be set in actual pixels values such that the position of the second and subsequent image are offset by the sum total of heights of previous image. So, the background-position should be like 0px 0px, 0x [height of image1], 0px [height of image1 + height of image2]. This can still be done with percentages (to make it work for image of any size) but it would need algebraic equations to be used because of how background-positioning with percentages works.

Note: Height of the element should be equal to the height of all three images put together for all of them to show up completely.

div {  height: 300px;  width: 100px;  background-image: url(http://lorempixel.com/100/100/nature/1), url(http://lorempixel.com/100/100/nature/2), url(http://lorempixel.com/100/100/nature/3);  background-repeat: no-repeat;  border: 1px solid;  }.bg-stack-with-pos {  background-position: top, center, bottom;}.bg-stack-without-pos-diff-height {  background-image: url(http://lorempixel.com/100/100/nature/1), url(http://lorempixel.com/100/200/nature/2), url(http://lorempixel.com/100/300/nature/3);}.bg-stack-with-pos-diff-height {  height: 600px;  background-image: url(http://lorempixel.com/100/100/nature/1), url(http://lorempixel.com/100/200/nature/2), url(http://lorempixel.com/100/300/nature/3);  background-position: 0px 0px, 0px 100px, 0px 300px;
}

<h3>Stacked Images with Background Position - One below the other</h3><div class='bg-stack-with-pos'></div><h3>Stacked Images w/o Background Position - One behind the other</h3><div class='bg-stack-without-pos'></div><h3>Stacked Images w/o Background Position and different heights - One below the other</h3><div class='bg-stack-with-pos-diff-height'></div><h3>Stacked Images w/o Background Position and different heights - One behind the other</h3><div class='bg-stack-without-pos-diff-height'></div>

---

Related Topics