September 26, 201114 yr Iv created the following website www.maspromotions.com/index1.html. Iv tried to create it so that it will fit on most screen sizes. When I resize the browser the divs dont stay fixed ontop of the background image. Is there a way to resolve this? My CSS: body { margin: 0px; background-color: #6a6a6a; background-image: url(images/body-bg.jpg); background-repeat: no-repeat; background-position: center top; } #wrapper { margin-left: auto; margin-right: auto; width: 980px; height: auto; overflow: hidden; } #header { width: 980px; height: 200px; background-image: url(images/header-bg.jpg); background-repeat: no-repeat; } #follow_us { margin-left: 370px; width: auto; height: auto; position: absolute; top: 142px; } #status_bar { width: 978px; height: auto; background-color: #bababa; border: solid 1px #dadada; opacity: 0.9; filter: alpha(opacity=90); /* For IE8 and earlier */ } #status_bar_content { font-family: Verdana; font-size: 14px; font-weight: bold; color: #ffffff; text-align: center; padding: 8px 15px; } #welcome { margin: 30px 0px 0px 50px; width: 875px; height: auto; padding: 15px 0px 10px 10px; } #flickr { margin: 40px 0px 0px 52px; width: 490px; height: auto; padding: 15px 0px 10px 10px; float: left; } #tube { margin: 40px 0px 0px 20px; width: 360px; height: auto; padding: 15px 0px 10px 10px; float: left; } #lower_wrapper { margin-top: 45px; width: 980px; height: auto; background-color: #b5b5b5; float: left; } #blog { margin-left: 51px; } #footer{ margin-top: 20px; width: 980px; height: 25px; background-color: #ffffff; text-align: center; vertical-align: middle; } .follow-us-text { font-family: Verdana; font-size: 20px; } img.follow-us { border: 0px; width: 30px; height: 30px; padding-left: 20px; } .large-text{ font-family: Verdana; font-size: 12px; font-weight: bold; color: #000000; word-spacing: 2px; line-height: 150%; } .medium-text{ font-family: Verdana; font-size: 12px; color: #000000; word-spacing: 2px; line-height: 150%; } .small-text{ font-family: Verdana; font-size: 8px; color: #000000; word-spacing: 2px; line-height: 300%; } Thanks Edited September 26, 201114 yr by Renaissance-Design USE THE BLOODY CODE BUTTON.
September 26, 201114 yr Seen this issue before and it seems to stump even quite experienced designers/developers. However I had a think on it and here is a dark and dirty workaround that works in FF, IE, Chrome and Opera. What we'll do is place another element behind the wrapper which will mean both are then positioned centrally. However the whole site will be pushed to the right so we will use a negative margin to pull it back centrally. Add the following to your body code: <body> <div id="bg"> <!-- Start of background element --> <div id="wrapper"> <!-- Snipped for brevity --> </div> </div> <!-- End of background element --> </body> </html> Then amend your CSS as follows: body { margin: 0px; padding:0px; } #bg { position:relative; top:0px; left:50%; margin-left:-950px; /* half the width of the image */ background:#6a6a6a url(images/body-bg.jpg) center top no-repeat; width:1900px; }
September 26, 201114 yr The easier solution of course would have been to use just the image of the boxers with no overlay as the main background and applied a semi-transparent PNG tile to repeat as the background for the wrapper, about 25% transparency would have done. The same tile could have then been applied to the background of the holders, which appearing above them would have appeared to decrease the amount of transparency.
September 28, 201114 yr Author Hey just to update you all, I worked in the 1st approach suggested and it works a treat. Thanks very much the tips, I will use the 2nd approach in future.
September 28, 201114 yr Hey just to update you all, I worked in the 1st approach suggested and it works a treat. Thanks very much the tips, I will use the 2nd approach in future. The first one seems to work in all browsers. Let me know if you find one it doesn't work in. Unless it's IE4, not to bothered about that.
Create an account or sign in to comment