Tips, Tricks, This & That for Blogging: Blog Backgrounds

For those of you who have seen my family blog, you know I love to have cute digital scrapbook paper all over it! If you've ever wondered how I do it, here ya go:

It does require a little editing of the html (do not be afraid of html- it is your friend!) and really not that hard at all to navigate around. There are 2 important rules to follow anytime you change your html. First- save a backup copy of your current html by copying (right click, select all, copy) & pasting (right click, paste or ctrl V) your entire current html to a word document. Second, always, always use the blue preview button to verify your changes worked before you save the template.

{How to make the body & background:}

I recommend & use the blogger template DENIM for my family blog. I think it gives the most options for changing the background to cute papers. Go to layout, then pick new template to change yours to denim.

Open up the html tab (in Blogger) by going to your dashboard, select layout, & then select edit html.

Scroll down in the HTML until you see the following:

body {
background

Change it to read:

body {
background-image: url(http://---whatevever the link is for your paper);

with a link to the desired image you want to use as your background inside the parentheses.

Where do you find digital scrapbook images to even use as your background? Click here for help!

Now, you might be wondering where you get the html code for your image to insert into the parentheses. You need to have an account with photobucket. Upload your image(s) to photobucket. Once they have finished uploading, photobucket will give you a set of 4 codes. You will need the direct link code (the 2nd option) for this. Copy and paste it in between the parentheses. Now, before you save it, click the blue preview button to make sure it worked. If it did, click the orange save template button.

-If you don’t want your background to move when you scroll down, type this in below the background image:

background-attachment: fixed;

This is what mine looks like complete:

body {
background-image: url(http://i261.photobucket.com/albums/ii55/emilyhburton/ShabbyP_Kiwi_BlackLinenPaper.jpg);
background-attachment: fixed;
margin: 0;

It is really important you do not add any extra spaces, periods or any other characters to the html code. It will not work if you do!

You can use the same setup to change your content wrapper (the main, middle column-where your posts appear). You need to change it in 2 places. Scroll down until you see /* Content, then the #content-wrapper below & follow the above steps to change it. Also change it right below in the #main wrapper section. Mine looks like this:

#content-wrapper {
background-image: url(http://i261.photobucket.com/albums/ii55/emilyhburton/aqua.jpg);
width: 1150px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
background-image: url(http://i261.photobucket.com/albums/ii55/emilyhburton/aqua.jpg);
margin-$startSide: 14px;
width: 775px;

I recommend not using any grainy or patterned paper for your content wrapper because it can make it hard for others to read your posts. Stick to a simple, basic solid color paper. You can see I have also adjusted the width of my content wrapper as well to match the size of my header. (I highlighted it in green).

Now, there is one last place you can change the background image and that is the #sidebar wrapper (found just below the content & main wrapper section in you html.) This is that little column where your page elements appear (like blog lists, archives, etc.).

Here is what mine looks like:

#sidebar-wrapper {
background-image: url(http://i261.photobucket.com/albums/ii55/emilyhburton/red2.jpg);
margin-$endSide: 14px;
width: 300px;
float: $endSide;

I changed the width here as well (in green).

You need to also delete the following from your html to get rid of the 'columns' on the side of your header:

#header-wrapper {
margin:0;
padding: 0;
background-color: $headerCornersColor;
text-align: $startSide;

So it should look like this: (just backspace to bring the text-align part up)

#header-wrapper {
margin:0;
padding: 0;
text-align: $startSide;

{To make the header:}

In the html code, it says what width your header is. I use this to determine how big to make my headers. For example, the denim template code shows this under the body section:

#header { width: 760px;

You can leave the header width as is & make your header that same size; OR if you want your header bigger, just increase the pixels. I have mine set at 1150. Just make sure to make your header the same pixels wide as the pixels set in you html code.

This is what mine looks like:

#header {
width: 1150px;
margin: 0 auto;

After you have created your header & saved it in jpeg format, you need to upload it to your blog. Do this by selecting layout, page elements, then click below on the edit header button. Upload the header you've created (I click from my computer, since that is where I save mine) and make sure to select instead of title & description & save.

This is what the Denim template html will look like when you first create your blog background. No changes have been made:

body {
background: $bgColor;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color: $linkColor;
}
a:visited {
color: $linkColor;
}
a img {
border-width: 0;
}

#outer-wrapper {
font: $bodyFont;
}

/* Header
----------------------------------------------- */
#header-wrapper {
margin:0;
padding: 0;
background-color: $headerCornersColor;
text-align: $startSide;
}

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
}

h1.title a, h1.title a:visited {
color: $headerTextColor;
text-decoration: none;
}

#header .description {
display: block;
margin: 0 14px;
padding: 0 0 40px;
line-height: 1.4em;
font-size: 50%;
}

/* Content
----------------------------------------------- */

.clear {
clear: both;
}

#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-$startSide: 14px;
width: 464px;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
margin-$endSide: 14px;
width: 240px;
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

This is what it will look like after you have made changes: (note-this is my own html, I have changed widths etc, which you don't have to do to have cute paper. ) It might help you to just copy and paste this entire thing, and then just edit the html for your own images in the parenthesis instead of starting from scratch. All things in pink are changes I've made.

body {
background-image: url(http://i261.photobucket.com/albums/ii55/emilyhburton/ShabbyP_Kiwi_BlackLinenPaper.jpg);
background-attachment: fixed;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color: $linkColor;
}
a:visited {
color: $linkColor;
}
a img {
border-width: 0;
}

#outer-wrapper {
font: $bodyFont;
}

/* Header
----------------------------------------------- */
#header-wrapper {
margin:0;
padding: 0;
text-align: $startSide;
}

#header {
width: 1150px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
}

h1.title a, h1.title a:visited {
color: $headerTextColor;
text-decoration: none;
}

#header .description {
display: block;
margin: 0 14px;
padding: 0 0 40px;
line-height: 1.4em;
font-size: 50%;
}

/* Content
----------------------------------------------- */

.clear {
clear: both;
}

#content-wrapper {
background-image: url(http://i261.photobucket.com/albums/ii55/emilyhburton/aqua.jpg);
width: 1150px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
background-image: url(http://i261.photobucket.com/albums/ii55/emilyhburton/aqua.jpg);
margin-$startSide: 14px;
width: 775px;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
background-image: url(http://i261.photobucket.com/albums/ii55/emilyhburton/red2.jpg);
margin-$endSide: 14px;
width: 300px;
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Wow! You did it. You know have a fabulously cute blog. Congrats!

I must give credit where credit is due: thank you to Britta who originally taught me this!