Multiple background images positioning

I’ve got three background images, all of width 643px. I want them to be set out like so:

  • top image
    (12px height) no-repeat

  • middle image

  • bottom image
    (12px height) no repeat

I can’t seen to do it without getting them to overlap (which is a problem because the images are partially transparent), is something like this possible?

background-image:    url(top.png),

background-repeat:   no-repeat,

background-position: left 0 top -12px,
                     left 0 bottom -12px,
                     left 0 top 0;

Problem courtesy of: Juddling


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):


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.

Solution courtesy of: ScottS


The only (practical, non hair-threatening) way I see is do do that in Javascript, when the page has loaded, and when it is resized, with a canvas sized to fit the innerHeight and the 3 images: draw the first one once at the top, draw the second as many times as required to cover the remainder of the canvas, and draw the 3rd one at the bottom of the canvas. Position the canvas at 0,0 with a ridiculously negative z-index.

I had a go at it with 3 images (643 x 12, 100 and 12) and of course the first issue I saw is that the 3rd image is drawn over part of the last iteration of the 2nd image — unless you have a window height of exactly 12+12+(p2.height*X), you’ll have some overlap. But that’s expected, right?

Discussion courtesy of: dda

If you can add padding/borders to the block equal to the backgrounds you want to position without overlapping other block, you can use the background-clip
& background-origin
to position the top and bottom backgrounds over the paddings/borders, and the repeating background over the content/paddings+content.

Here is an example:

For your code, you’ll possibly need to add something like this:

padding: 12px 0;
background-clip: padding-box, padding-box, content-box;
background-origin: padding-box, padding-box, content-box;


border: solid transparent;
border-width: 12px 0;
background-clip: border-box, border-box, padding-box;
background-origin: border-box, border-box, padding-box;

And you’ll get what you need. If you can’t get the paddings/borders, the pseudo-element like ScottS mentioned would work perfectly.

Discussion courtesy of: kizu

Here’s a method that uses 3 div’s for each of the Top
, Middle
, and Bottom
images that are transparent to apply to your webpage.

Background wallpaper is optional.

Tested in modern browsers and is IE8 friendly.

This method allows you to treat the body
element as it should be treated, i.e., your webpage markup does not
need to be in a wrapper or containing element.

jsFiddle Example
jsFiddle Example with centered filled

Since the above example uses image place holder content that is without transparency for Top and Bottom images, you can verify markup works with transparency with this jsFiddle that uses mini transparent icons in repeat mode HERE

Discussion courtesy of: arttronics

Try do it like this:

background: url(PICTURE.png) left top no-repeat, url(PICTURE2.png) right bottom no-repeat, url(PICTURE3.jpg) left top no-repeat;

EDIT: Was just an example, but here’s the css with your css:

background: url(top.png) left 0px top -12px no-repeat, url(middle.png) left 0px top 0px repeat-y, url(bottom.png) left 0px bottom -12px no-repeat;

Discussion courtesy of: Patrick R

I actually found a simpler fix, because I was having this same issue with a horizontal navigation.

Rather than adding code like the other answers you just have to list it differently in your CSS. The center image that repeats needs to be listed last, not first or second.

In my code it looks like this:

background-image: url(../images/leftNav.gif), url(../images/rightNav.gif), url(../images/centerNav.gif);
background-position: left, right, center;
background-repeat: no-repeat, no-repeat, repeat-x;

Discussion courtesy of: user2585434

I think z-index
will fix this because z-index
only affects CHILD elements, meaning you can’t mess up anything else on the page that uses z-index

top and bottom images z-index:3;

middle image z-index:2;

Discussion courtesy of: jay

This recipe can be found in it’s original form on Stack Over Flow

责编内容来自:CSS3 Recipes (源链) | 更多关于

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 综合编程 » Multiple background images positioning

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录