CODEWITHSUNDEEP
htmlcss
milk
milk

Reputation: 434

3 different backgrounds with CSS

I'm wondering if the following is possible with CSS.

I'd like there to be 3 horizontal bars running across the entire width of a background. Here's a rough mockup of what I would like the background to be enter image description here

I've been toying with the following but I can't seem to be able to position any of the backgrounds. 

#blog {
width: 1200px;
height: 100%;
background-image: url("bg1.png"),
          url("bg2.png"), 
          url("bg3.png");
background-position: 10px 10px,
          170px 10px, 
          750px 10px;
background-repeat:repeat-x;
}

Here's a fiddle: http://jsfiddle.net/5fo054L2/1/

Any idea what I'm doing wrong?

Upvotes: 0

Views: 79

Answers (2)

kevintechie
kevintechie

Reputation: 1521

You almost have it. The issue is that you have the x and y position confused. Also, x position doesn't have any meaning if it repeats.

.blog {
  width: 100%;
  height: 100%;
  background-image: url("http://i.imgur.com/L3F9slr.png"), url("http://i.imgur.com/rmPDxMq.png"), url("http://i.imgur.com/9MMzDMs.png");
  background-position: 0px 170px, 0px 100px, 0px 10px;
  background-repeat: repeat-x;
}

Here is an updated jsfiddle: http://jsfiddle.net/5fo054L2/3/

Note that the vertical height (of text in your example) will limit the amount of the background images you see.

Upvotes: 1

dhc
dhc

Reputation: 657

You can also make three image files, place them below everything else, and set them using absolute positioning.

Upvotes: 0

Related Questions