CODEWITHSUNDEEP
jqueryhtmlcss
Iain Simpson
Iain Simpson

Reputation: 8121

How to set background texture to 50% of the page in css

I am trying to work out how to display my background texture for 50% height of the page being displayed, I am using the following code at the moment which includes a semi transparent texture that goes above a solid background colour. I want the background colour to be over the whole page but the texture to stop at 50% of the page height, but I am a bit lost on how to do it, is this a new css3 function ?, if so are there any work around's for other browsers or jquery alternatives if this wont work with older browsers ?.

body {
background: url(../images/light/background.png) repeat scroll 0 0 #832029;}

Upvotes: 1

Views: 914

Answers (2)

Derek
Derek

Reputation: 4931

I'm not sure the idea of 50% the height is the best approach.

Try this:

body{
  background-color: #832029;
  background-image: url(../images/light/background.png);
  background-repeat: repeat-x;
}

Resizing background images (which you are not currently doing) is a CSS3 function which is not supported by all browsers, so a fixed image height (300-400 or so pixels) would probably be best.

Upvotes: 1

Wouter J
Wouter J

Reputation: 41934

For CSS3 there is background-size property and it has support in all major browsers, IE9+ and Opera 10+. And for IE8 and lower there is a IE Filter

Make 2 background images. One image is the gradient (which can be done with CSS3: linear-gradient too) and the second image is the texture. Use multiple backgrounds and set only a background-size on the texture background image.

If you wouldn't use this CSS3 property you can solve it with HTML and CSS only. Make a div inside the called #background. And with CSS give it an absolute position and a height of 50%:

#background
{
  position: absolute;
  z-index: -1; // place it on the lowest layer
  top: 0; right: 0; bottom: 50%; left: 0;
  background: url('path/to/images/background.png') repeat scroll #832029;
}

Upvotes: 1

Related Questions