1

I'm having some trouble wrapping my head around this.

I would like to have a solid red bar (about 200px wide) running the entire length of the page. I have this already using a small 200x1px image repeated on the Y.

I'd then like another image to sit on top of this red bar, that will be fixed to a specific position on the page at all times.

I'm not sure how to go about's creating this "Second" wallpaper.

I hope this makes sense. Thanks.

level42
  • 946
  • 2
  • 13
  • 33

2 Answers2

2

From what it sounds you want two background images on your site. Using the background-image in css, separate each image by a comma. So it would look like:

#background{
    background-image: url(image1.jpg), url(image2.jpg);

}

You can find out more here.

pormus
  • 118
  • 8
1

You can specify multiple backgrounds using CSS3. The first background listed will appear on top, and each background can have its own repeat and position settings.

See the example at developer.mozilla.org for further reference.

Demonstration below:

body {
  
  background-image:    url('http://lorempixel.com/100/100/abstract/3/'),  
                       url('http://lorempixel.com/200/1/abstract/2/');
  
  background-repeat:   no-repeat,
                       repeat-y;
  
  background-position: 50px 20px,
                       top left;
  
}

Note the browser compatibility of using multiple backgrounds.

showdev
  • 28,454
  • 37
  • 55
  • 73
  • This works absolute wonders!!! I had no idea you could simply stack background images like this, thank you! – level42 Aug 18 '15 at 19:25