Multiple backgrounds with CSS positioning

Question

how would I go about making this kind of background: i have a 150px x 150px image which I would like to repeat through the whole background. But the very top line (the top 150px) a different image should repeat just on the x axis. And same on the bottom, the bottom line a third image should repeat on the x axis. How would I do this? Thank you!

Luke Evers · Accepted Answer · 2013-07-22 19:04:36Z

2

Try this out!

body { bacground: url(topbackground.png) repeat-x, url(bottombackground.png) bottom fixed repeat-x, url(centerbackground.png); }

Also, here's a link to an example with a bunch of kitten pictures!

http://jsfiddle.net/7Rt99/

answered Jul 22, 2013 at 19:04

Luke Evers

736 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AlesSvetina Over a year ago

that, my friend, is a beautiful solution. Thank you!

cljk Over a year ago

Up to now I didn´t know that you could assign more than one background to one layer. Do you know how that´s supported on IE 8? I could only try IE 9 - that seems to work

Luke Evers Over a year ago

@cljk It doesn't look like IE 8 supports what I'm doing, but this looks promising for IE8. I have not tried this out though.

Keith · Accepted Answer · 2013-07-22 18:57:07Z

1

You could create 3 different divs for this so that you can repeat each background in separate parts.

<div class="two" id="one"> </div> <div class="two" id="one"> </div> <div class="two" id="one"> </div> #one{ background-image:url('http://www.shrtclothing.com/images/share/facebookthumb.jpeg'); background-image:repeat; width:1000px; height:150px; }

http://jsfiddle.net/hVvdL/