Tutorial: How to add a background image behind a border.

© Sunshine Designs

Tip: Always download your template to your computer before following any tutorials.

Note:This tutorial is meant to be completed after this one. 

Ready?

1. Sign into Blogger.

2. Click "Design".

3. Click on "Edit HTML".

4. Scroll down till you see this code:

body {

  background:$bgcolor;

  margin:0;

  color:$textcolor;

  font:x-small Georgia Serif;

  font-size/* */:/**/small;

  font-size: /**/small;

  text-align: center;

  }

5.  Replace the blue text with this:

background:url(Your Image Url) repeat;

6. Scroll down till you see this:

/* Header

-----------------------------------------------

 */

7. Right under that you should see this:

#header-wrapper {

  width:660px;

  margin:0 auto 10px;

  border:1px solid $bordercolor;

  }

8. Change the 660 to 960.

9. Scroll down until you see this:

#outer-wrapper {

  width: 660px;

  margin:0 auto;

  padding:10px;

  text-align:$startSide;

  font: $bodyfont;

  border:2px solid #000000;

                                           

  }

10. Change the 660 to 960 and add this:

  background:$bgcolor;

in place of the blue highlight.

11. Click preview and make sure you like it and then click save!

12. It should look something like this:

 

Not Working?

1. Make sure you are using the Minima Template. This has not been tested on any other templates.

2. Make sure you put your image url in background:url(Your Image Url) repeat;.

3. Still not working? Please shoot me an e-mail here or comment.