As you may see from the following image: http://shrani.si/f/47/NX/CSI3Y2A/indexw.jpg I need to create simple intro HTML page with full screen background. That wouldn't be so hard if it could only be compatible with one resolution, but I really can't get it to be really responsive. On top of that, this page should be IE8+ compatible so I can't just use any CSS rules. There are basically 3 type of elements here: - background (blue lines) with dimensions 1920 x 1080, but I can adjust that in Photoshop since I have sources, - logo (which should always be positioned on top of blue lines as it is on sample image, but as of now I just merged logo on top of background so it's just one image in order to make easier layout, it actually can stay that way) , - 5 small banners with HTML links (nice hover effect would be more than welcomed). Here's my code with more or less trial & error method, so there are probably better solutions: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Intro</title> <link href="index.css" rel="stylesheet" type="text/css"> </head> <body> <body background="index.jpg" class="bg"> <div style="outer"> <div class="centered"> <table width="200" border="0" align="center" cellpadding="0" cellspacing="50"> <tr> <td><img src="icon3.png" width="168" height="128" alt=""/></td> <td><img src="icon6.png" width="128" height="128" alt=""/></td> <td><img src="icon4.png" width="168" height="128" alt=""/></td> <td><img src="icon9.png" width="128" height="128" alt=""/></td> <td><img src="icon5.png" width="128" height="128" alt=""/></td> </tr> </table> </div> </div> </body> </html> @charset "utf-8"; img.bg { /* Set rules to fill background */ min-height: 768px; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1920px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } } .outer{ position: relative; } .centered{ position:absolute; top:50%; height:10em; margin:0px auto; left:0; right:0; text-align: center; display:block; } Code (markup):
Uhm, how should I put this... That flawed concept is the exact opposite of viable web development and as such, it should be disposed of permanently along with all other recurrent bad practices, deeply imprinted in people's brains for decades. Unfortunately, some of them are widely encouraged even today, mainly due to the viral nature of html5, which is used as an excuse to deploy outdated methodologies that html4 tried to undo. HTML, Photoshop and pixels in a same sentence suggests "not viable for web deployment". You cannot talk about compatibility and IE8 if your website doesn't even work presentational images off. If you understood the first paragraph, examine your markup and you'll see what I'm talking about. And by the way, what is the purpose of that table there? Also, img.bg {} won't work here -- there's no IMG tag with that class in your markup.
wiicker95 has it right -- images that large generally have no business on websites in the first place...Most of the tools that go hand in hand with building a responsive layout are the exact opposite of everything you're trying to do in that -- no offense -- MESS. It reeks of dicking around in photoshop before you have semantic markup of your content and a working layout. The entire notion of drawing goofy pictures in a paint program first is back-assward, even if the flash over substance ****tards have pretty well pissed all over the Internet making it SOP for most of the development whorehouses and "off the shelf template" scam artists. ... and yeah, table for nothing, multiple div for nothing, broken table since the outer width is smaller than the inner elements, attributes like background, border, align and cellpadding that have no business in any code written after 1997, presentational use of classes, classes on elements that really shouldn't need them (like body), media query that's complete gibberish targeting elements that don't even exist (since .bg is on BODY, not a IMG tag)... That said you could make the image auto-size using CSS3's background-size:cover; -- but that wouldn't work in IE8/lower... though I'd probably go "OH well" on anything prior to IE9 and let it gracefully degrade -- NOT that the very design concept has graceful degradation in mind... as Wiicker95 said, the very concept is "not viable for web deployment" -- no matter how many artsy fartsy types will try to tell you otherwise.