Background images, margins and padding

Insert­ing a back­ground image on your page can be done in many dif­fer­ent ways. You can insert an image in the body tag or in one of the div tags that rep­re­sent the lay­out of your page. More infor­ma­tion about insert­ing a back­ground image can be found on the htmldog.com website.

I wanted the pic­ture to the left of my blog title and descrip­tion so I inserted it as a back­ground for the header. My code for the header now looks like this:

#header{
height:339px;
width:100%;
background-color:#FAFFFF;
background:#FAFFFF
url(‘http://www.geocities.com/susieswe/blog2/background1.jpg’) left top no-repeat;
}

The height of the header is the same as the height of the pic­ture I used. I set the height of the header tag after I had decided which pic­ture to use and what size it should be.

To be able to use my own pic­ture I needed a host to store the pic­ture for me. I used my old Yahoo! Geoc­i­ties account. The eas­i­est way to get the URL right is to upload the pic­ture to your host, surf to the pic­ture and copy the URL from the address bar on your browser.

To be able to place the blog title and the descrip­tion, so that they don’t over­lap the image, I have to add a piece of code to the style sheet.

#blog-title {
color:#B5582C;
font-family:cursive, arial, sans-serif;
font-style:italic;
font-weight:bold;
font-size:4em;
mar­gin: 20px 20px 30px 220px;
}

#descrip­tion {
color:#695838;
font-style:italic;
font-weight:bold;
font-size: 1.5em;
mar­gin: 5px 20px 5px 220px;
}

Infor­ma­tion about mar­gins and padding can be found at htmldog.com. You can find infor­ma­tion about how to write shorter code on the page Short­hand Prop­er­ties.

You can find the xhtml file here and a test blog here.

Wel­come back! Nice to see you again, hope you enjoy your visit.

Related posts

• March 5, 2005 — Cre­at­ing the header image (Part 2) (3)
• Feb­ru­ary 24, 2005 — Cre­at­ing the header image (Part 1) (26)
• Feb­ru­ary 13, 2005 — The space around your text (3)
• Feb­ru­ary 9, 2005 — Styling your pro­file info (7)
• Feb­ru­ary 6, 2005 — HTML-kit (2)
• Feb­ru­ary 6, 2005 — Styling your links (2)
• Feb­ru­ary 1, 2005 — Cre­at­ing styles for your text (0)
• Jan­u­ary 31, 2005 — Cross browser and cross plat­form design (2)
• Jan­u­ary 30, 2005 — Insert Blog­ger Tags (0)
• Jan­u­ary 30, 2005 — CSS and XHTML tuto­ri­als, Blog­ger Tags (2)