I applied CSS auto-resizing to image, now how do I push it to the background?
Complete CSS newbie here who just applied the image resizing trick in the accepted answer to this question: How to position a background image like wanderfly.com?.
Problem: The resizing works great, but the image appears in the foreground, blocking the content in 开发者_Go百科all of my pages rendered via yield. How do I push the image to the background?
relevant portion of application.html.erb:
<body>
<%= image_tag("background.jpg", :id => "background") %>
<%= yield %>
</body
css stylesheet:
#background {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
The answer is in the comments to the answer you linked to:
don't forget the z-index:-9999 or your image won't behave much like a background image
So:
#background {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -9999;
}
See: http://jsfiddle.net/XW9Pz/2/
加载中,请稍侯......
精彩评论