CODEWITHSUNDEEP
cssbackground-image
djlosada
djlosada

Reputation: 31

CSS 2 background images (with x width) on either side of 1024px footer

I have a footer that is 1024px in width with a background image 1024px by 482px.

I want to put an x-repeating background to the left of it and an x-repeating background to the right of it. How do I do this?

This is what I have:

.footer {
background:
  url("footerleft-bg.png") repeat-x,
  url("footerright-bg.png") repeat-x 0 0 #fff;
height:482px;
width:100%;
}

But it makes the left background image completely cover the right one.

Upvotes: 3

Views: 1005

Answers (2)

Ana
Ana

Reputation: 37178

You could do it like this:

demo

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    min-height: 10em;
    background: black;
}
footer:before, footer:after {
    position: absolute;
    top: 5%; bottom: 5%;
    width: 40%;
    background-repeat: repeat-x;
    background-size: 1px 100%;
    content: '';
}
footer:before { left: 5%; background-image: linear-gradient(crimson, black); }
footer:after { right: 5%; background-image: linear-gradient(black, dodgerblue); }

However, there is no way to do it without using nested elements or pseudo-elements. A background repeats itself or it doesn't. It doesn't repeat itself just on an interval from point A to point B (though I would sometimes find that useful as well).

Upvotes: 3

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

CSS2 does not support multiple background images. You'll need to nest another HTML element to make this work.

See: http://www.quirksmode.org/css/multiple_backgrounds.html

Upvotes: 1

Related Questions