How to add a background image to your blog
Last month I told you how to add a custom header to a blogger blog that uses the minima template. If you also add a background image, you can really make it pop. I'm not talking about some repeating image of your sister's cat or the starship enterprise, I mean some much better. Check out my wedding blog to see what I mean. You can use a background image separate the main area from the side areas.
To do that, you need to make an image in photoshop that has a middle area that is at least 660 pixels wide (the width of the header). You should leave this area clear of an patterns, borders, etc. On the edges outside of this middle area you can put some borders and gradients that fade into what will be the background color of the page. For an example, check out this image. The white area in the middle is for the blog content (as you see it on the wedding blog). The image is tall because of my repeating background. If you don't have a repeating background or you have a simpler one, it does not have to be as tall. Smaller is better as it will load faster. The tan you see at the very edges of the image is what the background color will be set to for the body in the CSS of the template.
Once you have an image that is wide enough, you will need to put it up on you server or where ever you host images. Then you will need to put a wrapper div just inside the <body> tags in the template, like this:
<body>
<div id="superWrapper">
<!-- There should be lots of stuff in you template here! -->
</div>
</body>
Then, between the style tags further up in the template, you need to style the superWrapper div like this"
#superWrapper {
margin: 0px auto; /* this centers the div */
width : 700 px; /* make this the width of your background image */
background-image: url(http://yoursite.com/assets/background.gif);
background-repeat: repeat-y;
}
You will also want to change the background color of you page in your CSS. This towards the top your CSS. It is probably white (#fff) or black (#000) by default (in the minima template). Change this color to match the edge of your background image.
I mostly wrote this to remember for myself, so you are probably pretty darned confused by now. Plus I'm half asleep. So if none of this makes sense when I'm more awake, I'll either add to it or take the post down. Cheers!
To do that, you need to make an image in photoshop that has a middle area that is at least 660 pixels wide (the width of the header). You should leave this area clear of an patterns, borders, etc. On the edges outside of this middle area you can put some borders and gradients that fade into what will be the background color of the page. For an example, check out this image. The white area in the middle is for the blog content (as you see it on the wedding blog). The image is tall because of my repeating background. If you don't have a repeating background or you have a simpler one, it does not have to be as tall. Smaller is better as it will load faster. The tan you see at the very edges of the image is what the background color will be set to for the body in the CSS of the template.
Once you have an image that is wide enough, you will need to put it up on you server or where ever you host images. Then you will need to put a wrapper div just inside the <body> tags in the template, like this:
<body>
<div id="superWrapper">
<!-- There should be lots of stuff in you template here! -->
</div>
</body>
Then, between the style tags further up in the template, you need to style the superWrapper div like this"
#superWrapper {
margin: 0px auto; /* this centers the div */
width : 700 px; /* make this the width of your background image */
background-image: url(http://yoursite.com/assets/background.gif);
background-repeat: repeat-y;
}
You will also want to change the background color of you page in your CSS. This towards the top your CSS. It is probably white (#fff) or black (#000) by default (in the minima template). Change this color to match the edge of your background image.
I mostly wrote this to remember for myself, so you are probably pretty darned confused by now. Plus I'm half asleep. So if none of this makes sense when I'm more awake, I'll either add to it or take the post down. Cheers!
posted by scott at 9:53 PM
0 Comments:
Post a Comment
<< Home