Full Page Background + Pattern

[redpolo]

Hi,

i try to cover a full page background (image) with a pattern, but it does not work the way i want. Do you have any hints?

CSS

body {



background: url(images/pattern.png) top left repeat, url(images/bg_image.jpg) top left no-repeat ;

background-attachment: fixed;

background-position: top left;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

font: 12px Arial, Tahoma, Georgia, "Times New Roman", Times, serif;

color: #000;

margin-right: 30px ;

}

Great… full page background, both Images show up, but… pattern is although stretched to full screen instead of repeated.

How to combine both: Showing up a fullscreen background image covered by a repeating pattern?

[TheDoc]

You could try adding the image to the html and the pattern to the body.

[yinzdo]

Solution
Adjust your background-size as follows:

body {

background-size: auto, cover;

}

Explanation
You have two background-images. You have background-size set to cover. This means both background images will attempt to cover the page, which is why your pattern appears stretched. By adding the code above, you are essentially giving each background-image a different background-size value. The pattern gets background-size: auto (which does not result in stretching) while the image gets background-size: cover (which allows it to stretch).

See Example M on this page for more info: http://www.css3.info/preview/background-size/

Note that legacy browsers will work better if you follow @TheDoc’s suggestion of splitting the background-images across the html and body elements.

[redpolo]

Thanks…!!!

html {

background: url(images/pattern.png) top left repeat;

background-position: top left;

}



body {

background: url(images/bg_image.jpg) top left no-repeat;

background-attachment: fixed;

background-position: top left;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

font: 12px Arial, Tahoma, Georgia, "Times New Roman", Times, serif;

color: #000;

}

tried… doesn’t work.

body {

background: url(images/pattern_cross_1.png) top left repeat, url(images/bg_image_watzmann_3.jpg) top left no-repeat;

background-attachment: fixed;

background-position: top left;

-webkit-background-size: auto, cover;

-moz-background-size: auto, cover;

-o-background-size: auto, cover;

background-size: auto, cover;

font: 12px Arial, Tahoma, Georgia, "Times New Roman", Times, serif;

color: #000;

}

IT WORKS! :) … with Safari 5.1.7, FF 11 – 13, Chrome 19.0.1084.56 and Opera 12.00, all on MAC.

Do you know which legacy browsers will not work, such as IE 6-8?

[yinzdo]

The first one didn’t work because you should have bg_image.jpg applied to the html and pattern.png applied to the body. You did the reverse. The body renders above the html element in the stack order, so flipping it would allow the pattern to be overlaid on top of the image as opposed to under it.

background-size is supported in IE9+

See http://www.quirksmode.org/css/background.html for more info on browser compatibility.

[redpolo]

@yinzdo: Thanks.

I tried reverse as you described, but then pattern ends before end of window.

[jimsilverman]

the issue is the contains only the content of the page, whereas fills the entire viewport. on pages shorter than a full window, you’re gonna get the problem you describe.

[kaiten]

I was starting to get pissed with this, so I figured out a way to make it and its simple!

You just need to use the :after element.

lets suppose i want to add a pattern over my background image:

http://codepen.io/kaiten/pen/OWwpzB?editors=0100

and its done!!

The source code i’ve got from https://gist.github.com/omurphy27/5243251

[Author]

Posts