It’s really easy to create a quick, simple CSS website template using just one background image and some basic CSS. What I mean is that the main background of the website is created by one “stretched” image, thus creating the container that the text and images sit in etc.
It’s hard to explain so here’s an example.
1. We’ll decide that we want our “content container” to be 780px wide. Now, open up Photoshop and a blank canvas of 780px wide by say 500px high. Fill this with white. This is now the inside colour of your content container.
2. We need to widen the canvas, so, right click on the canvas title bar anc choose “canvas size”. Enter a large value into the width field and click “ok”. I chose 3000. There is a reason for this large number. I will explain later.
3. Now we need to decide what to have on either side of the “content” area. I am choosing the popular diagonal lines, with a blue background. If you don’t know how to create a diagonal line pattern, a simple search in your favourite search engine will no doubt pull up a few examples. So, create a new layer and drag it below your white layer and paste a colour onto it. I chose blue.
Now on another new layer (in between your other two layers), fill your diagonal line pattern and reduce the opacity to something like 10% or 20%.
So now you have a 3000px x 500px canvas that looks something like below:
4. Depending on what size of diagonal lines you have used in step 3, you need to drag a guide onto the canvas the same amount of pixels from the top. So, if you have used a diagonal pattern with a 20×20 size, your guide needs to be 20px from the top of the canvas. If you used a diagonal pattern with a 10×10 size, your guide needs to be 10px from the top of the canvas etc
5. Now merge all of your visible layers onto one and select your 20px high strip using the rectangular marquee tool. Copy and paste that onto a new canvas and “save for the web”. You should now have a 3000 x 20 strip with a white section in the middle and stripes at the side with a blue background.
6. Now for the CSS. Your css file should contain the following:
body {
background-image: url(”images/body-bg.gif”);
background-repeat: repeat-y;
background-position:top;
}
#container {
margin: 0 auto;
width: 760px;
}
In your web-page, add a “container” div. Everything should go inside your container div. In the CSS we stated 760px as the width. This is simply 780 - 20 for a 10px pad each side.
That is basically it. You can add your website logo etc inside the “div” and all of your content. Your content will stay inside the white section with a 10px margin at both sides.
The reason we created a 3000px wide image is simply because of screen resolutions. The CSS sets the background image to start at the top and fill the page downwards to the bottom and to stay in the middle. If a visitor comes to the site with a screen res of 1024 x 768 the layout looks the same as a visitor with a res of 1280 x 1024, except that the higher resolution shows more stripes at the side.
If you viewed the site with a higher resolution than 3000 wide it would have gaps at the edges, but that is unlikely. Anyway, all you would do is create a wider image.
Click example.zip to download the completed files to see for yourself. Extract the files and doubleclick the index.htm file. I have also included the Photoshop psd file for your reference.
Learn Advanced CSS Techniques with CSS Mastery:
Newsletter Signup
Latest News
Latest Forum Posts