November 30, 201312 yr 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%; ; /* 50% */ } } .outer{ position: relative; } .centered{ position:absolute; top:50%; height:10em; margin:0px auto; left:0; right:0; text-align: center; display:block; }
December 1, 201312 yr There is no need for table here and you should be able to center everything using something like this: .centered{ width: 960; //or whatever margin: 0 auto; } .centered figure{ width: 20%; } .centered figure img{ width: 168px; //or whatever margin: 0 auto; }
Create an account or sign in to comment