- This topic is empty.
-
AuthorPosts
-
June 14, 2012 at 5:40 pm #38508redpoloMember
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?
June 14, 2012 at 6:46 pm #104385TheDocMemberYou could try adding the image to the html and the pattern to the body.
June 15, 2012 at 1:07 am #104416yinzdoMemberSolution
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.
June 15, 2012 at 1:52 am #104418redpoloMemberThanks…!!!
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?
June 15, 2012 at 7:47 am #104427yinzdoMemberThe 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.
June 15, 2012 at 9:31 am #104435redpoloMember@yinzdo: Thanks.
I tried reverse as you described, but then pattern ends before end of window.
June 15, 2012 at 4:48 pm #104456jimsilvermanMemberthe 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.February 6, 2017 at 1:35 pm #251053kaitenParticipantI 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.