CODEWITHSUNDEEP
cssbackgroundrepeat
AlesSvetina
AlesSvetina

Reputation: 463

Multiple backgrounds with CSS positioning

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!

Upvotes: 0

Views: 76

Answers (2)

Luke Evers
Luke Evers

Reputation: 73

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/

Upvotes: 2

Keith
Keith

Reputation: 4137

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/

Upvotes: 1

Related Questions