Background CSS and HTML
Update: Paceville.com is now online.
Update: The following CSS gives a much better result, the background will now always be in the middle even though the background picture is bigger than the window size.
Yes, it’s the addition of background-position: 50% 0% that is doing the magic.
#bkg_top {
width: auto;
background: url(images/top_bkg2.jpg) no-repeat top;
background-position: 50% 0%
}
#bkg_foot{
width: auto;
height: 100%;
background: url(images/bkg2.jpg) repeat-y;
background-position: 50% 0%;
clear:both;
}– – – – –
I’ve done a lot of CSS work recently, the end result will become Paceville.com (not yet finished so I won’t link). I need to recap this stuff so I won’t have to go through this ordeal again. We’re going to start from the beginning and go incrementally at a very slow pace.
This first piece will only discuss setting up the background, nothing else. Note that the CSS in this and future tutorials hasn’t been tested in IE7, patching up to account for IE7 quirks will become a future piece of its own.
Demo here.
Let’s start with the CSS:
body{
background: url(images/bkg_small2.jpg) #000;
margin:0;
}
#bkg_top{
width: 1330px;
height:551px;
background: url(images/top_bkg2.jpg) no-repeat;
}
#bkg_foot{
width: 1330px;
height: 100%;
background: url(images/bkg2.jpg) repeat-y;
margin: auto;
}The background might look black in the demo but that’s not the case, there is a small jpeg that is tiled in both x and y to give it some texture. Note the zero margin, if we keep it we will see a small gap at the top and we don’t want that.
As the name might imply bkg_top will have a big background picture. It’s the only solution I could think of, as you can see in the demo there are a few disco lights, the blue and the purple are the most prominent ones. The gradients that they create is a complex problem, having DIV elements dynamically change width is out of the question, this site will have static width, anything else would be impossible. The height is set explicitly here on a temporary basis, without content the background picture wouldn’t be visible, later on we will remove this attribute, when we have elements inside it.
Below the top background picture we will tile a thin strip on the y-axis in the bkg_foot DIV, this background will cover the whole page from top to bottom. However at the top of the page it will be covered by the top background whose disco ball gradients fade out to create a seamless impression. Note the height attribute which is set to 100%, that’s to make it fill the whole page from top to bottom, since we won’t have a footer we need it to avoid a sharp and ugly line between its tiled background and the body background.
Finally note margin: auto; which is responsible for keeping all the stuff we have created so far in the middle, try and resize your Firefox window when you view the demo, you will see that the middle background will stay in the middle, just like we want.
And the HTML:
<html>
<head>
<title>Paceville - The best partying in Malta</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="step1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="bkg_foot">
<div id="bkg_top">
</div>
</div>
</body>
</html>So the lower background DIV contains the upper one, we need this arrangement since the top one needs to be on top of the lower one. The containing DIV’s content will be overshadowed by the stuff in elements it contains.