How Do I…? Add Background Images
How do I…
… add a (seamless) background image to my blog?
Guide to install a background image
Make sure you have saved your background graphic to a place like Photobucket.com or Flickr.com. Get the URL for inserting it in your blog´s code. Don´t worry - Photobucket and Flickr will automatically generate the code for you.
NOTE: When generating the URL from one of these services, use the URL (direct link) only, not the full HTML code.
Tips for background graphics:
- You want your background to be the background. You do not want it to hinder your reader´s ability to read your posts. It should not distract your readers, it should blend seamlessly into your design.
- Most background graphics are a smaller graphic repeated across the page (done automatically by the browser). This means you should choose a graphic that is small and has an easily repeatable pattern or no pattern at all. Some examples:
- Host the small image on any photo host
- Add your Photo host url of the icon to the following code below
- Log in to your Blogger account.
- Click on “Edit Template”
- Click on the “Edit HTML” link on the Template tab.
- Find the code, like:
- To change the color, simply type the new numbers that represent the color you´d like in place of #483521.
- To change the background graphic, use the new background´s URL. Replace http://www.blogblog.com/scribe/bg.gif. Make sure the new URL has quotes around it and is inside the parentheses.
body {
margin:0;
padding:0;
background:#483521 url(”http://www.blogblog.com/scribe/bg.gif”) repeat;
}
The part that says
background:#483521 url(”http://www.blogblog.com/scribe/bg.gif”) repeat;
is the part that we want to change. The number you see (#483521) is telling the browser what color to make the background in case the background image doesn’t load. The part that says
url(”http://www.blogblog.com/scribe/bg.gif”) repeat
is telling the browser which image to use as the background for your blog template and to repeat that image across and down the page. To change the background image, we have to change which graphic it is referencing.
For example, your finished code might look like this:
background:#FFFFFF url(“http://i252.photobucket.com/albums/hh5/PYB-freebies/290208/seamless-flowers.jpg”) repeat;
Congrats! You have now customized your template!
[...] Be unique. Be delicious. Be yourself. Hey there, my friends! Pimp Your Blog has moved. You are re-directed to the new domain http://sanni-licious.com/Pimp-Your-Blog Please update your bookmarks and feedreader. Thank you! ♥ « How Do I…? Add Background Images [...]
I didn’t know you were doing tuts. I’ll be back to read more later. Happy St. Paddy’s Day.
This has help me with changing my header the easier way! Thank you! Keep up the good work!
Aisha’s last blog post..WW- Scooby Again
[...] All you need to do is grab the set here, save to your own HD, load it up to your account. Need help? Read: How to add a background image! [...]
This is so cool: Thanks!