Thumbnails grid wall as wall paper? [closed]
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this questionI want to make a wall of thumbnails to suit a screen resolution of 2560x1440px. I want the grid to sit behind my page acting as a background on the site.
However, when the page is scrolled the grid stays still. I have made some CSS and HTML and tested it in Firefox 4 and Chrome which seems to work fine. In IE8 it doesn't work, the page div doesn't overlap the g开发者_如何学Pythonrid wall but sits under it.
When testing CSS / HTML on IE use the proper format. Instead of just throwing the CSS and HTML on the page only.
That's because you don't have an HTML document. You just have some HTML tags that you are throwing at the browser, and the browser tries its best to use it, and does that surprisingly well.
As you don't have a doctype tag, IE renders the page in quirks mode, which basically means that it tries to emulate the oldest possible way of doing everything. As position:fixed is a recent addition, it's not supported in this mode.
A valid HTML document needs the html, head, title and body tags, and you need a doctype tag to keep the browser from rendering the page in quirks mode. So, the minimal HTML document that renders in standard compliant mode looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Your style tag goes inside the head tag, and the content goes inside the body tag.
There are different doctype tags that you can use, depending on which version of HTML you want to use, see W3C's Recommended list of Doctype declarations.
If you can't merge your background image, then you need to use z-index. Give #grid a lower z-index than #wrap and you'll be sorted (as long as both elements are positioned, which they are at the minute).
#grid { position: fixed; z-index: -1; }
#wrap { position: relative; z-index: 1; }
How about merging the thumbnails as one png/jpg file? Then you can:
body
{
background: url('thumbnails.jpg');
}
Don't need to fiddle with z-index no more.
加载中,请稍侯......
精彩评论