What do you mean by fluid background? Are you referring to your background image? If yes, you either have it repeat vertically or have it fixed so it scrolls with the page.
A very common structure that people, including myself, use is to have three main <div> inside <body> (header, content and footer) and place everything inside them with all three having the same class="container" to set a uniform width as well as center align:
<body>
<div id="header" class="container"><!--your header--></div>
<div id="content" class="container"><!--your content--></div>
<div id="footer" class="container"><!--your footer--></div>
</body>
body {
text-align: center; /* center align for older version of IE */
}
.container {
width: 1000px; /* unifrom width */
margin: 0 auto; /* center algin */
}
Thank you for your response Joseph.
My goal is this: I want my background image (located at: http://www.stallionstudios.net/wp-content/uploads/2010/02/ssbackground11.jpg) to automatically scale to the size of the web browser. Right now the site is optimized and looks great at a 1920×1080 resolution, but say someone visits the site that has a 1024×768 resolution. When I adjust my browser to that width and height, the “Stallion Studios” banner and much of the right side of the image is cut off. I want the entire image to be able to be viewed in its entirety no matter the browser size.
Thank you again Joseph.
Sadly, I am a complete noob when it comes to CSS or any other type of code for that matter. Where exactly would I put any of that?
There are two techniques shown in the Perfect Full Page Background Image article. I’ll show you both but each has it’s own pros and cons. Note that I’ve never used neither of these techniques before.
Both techniques only resize the background image larger but not smaller (it crops the image when the window is smaller than the image) therefore the image size should be the minimum browser window size that you want to accomodate for.
Technique #1 is the more complicated of the two techniques and has the following bugs:
In Safari 4 & Chrome, the min-height isn’t catching and doesn’t resize vertically to fit.
Technique #2 is simpler and bug-free, however, the main content doesn’t center in IE 7 and it doesn’t work at all in IE 6.
Technique #1
<body>
<div id="cont"><!-- To make page scrollable -->
<!-- Put your usual HTML here -->
</div>
<div id="bg"><!-- For background image -->
<div>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="images/bg.jpg" alt=""/>
</td>
</tr>
</table>
</div>
</div>
</body>
* {
margin: 0;
padding: 0;
}
html, body, #bg, #bg table, #bg td {
height: 100%;
width: 100%;
overflow: hidden;
}
#bg {
position: fixed;
}
#bg div {
height: 200%;
left: -50%;
position: absolute;
top: -50%;
width: 200%;
}
#bg td {
text-align: center;
vertical-align: middle;
}
#bg img {
margin: 0 auto;
min-height: 50%;
min-width: 50%;
}
#cont {
position: absolute;
top: 0;
left: 0;
z-index: 70;
overflow: auto;
}
Technique #2
<body>
<img class="bg" src="images/bg.jpg">
<!-- Put your usual HTML here -->
</body>
You need to change min-width: 1024px; according to the size of your image.
img.bg {
/* Set rules to fill background */
min-height: 100%;
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: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
div#content {
/* We need our content to show up on top of the background */
position: relative;
}
