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.
精彩评论