Skip to main content

Background Images In Your Blog

Background images make the blog so much more colourful than plain old solid colour backgrounds. A background image
  • Is not clickable.
  • Can be seen where no foreground content is present.


Look at using a background image under the text title, for instance. Note that this is the opposite from replacing the text in the title with a picture. If you put a picture in the title, no background will be visible, unless you intentionally make the picture too small for the title space, or use a transparent .gif file for an image.

We control images using CSS rules. Look in the template for
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}

Change that to
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:0px solid $bordercolor;
background-image: url(http://whatever.wherever.com/what.gif);
background-repeat: no-repeat;
}

The CSS object "header-wrapper" is the name for the screen area, used in most standard Blogger Layouts templates, which will contain the text blog title and blog description. Your template may use that name, or another; or you may want your background in another container altogether. If you have, separately, tweaked your header, any of the above settings may differ. Just add the "background" rule to the container which pleases you.

If you have a Classic blog, your template may or may not use a CSS rule to define the header. It may or may not use a CSS object "header-wrapper". Be aware of the possibilities. You could, conceivably, have a <div> tag, with all of the rules defined there in the HTML.
<div style="width:660px; margin:0 auto 10px;
border:0px solid $bordercolor;">
...
</div>

if so, change that to
<div style="width:660px; margin:0 auto 10px;
border:0px solid $bordercolor;
background: url(http://whatever.wherever.com/what.gif) no-repeat 0px 0px;">
...
</div>


You can apply a background image to any area in the blog, not just the header. The Body is a popular place for a background image. If you have a large image, you won't want it to repeat.
body {
...
background-image: url('whatever.wherever.com/what.gif');
background-repeat:no-repeat;
...
}




One recently popular variation on the plain old background image is one that stays in place on the page, as the reader scrolls.
body {
...
background-image: url('whatever.wherever.com/what.gif');
background-repeat:no-repeat;
background-attachment:fixed;
...
}

This blog, for instance, has
body {
...
background: #dadadc url(http://themes.googleusercontent.com/image?id=1H4RPagP3NxwlkCrVuQKUYUd5snXvaKTagGtkdgXEgve0VpSn-G5s8eBYdMsiQzVSvRpe) no-repeat fixed top center
...
}
You are welcome to examine page source, and find the "Body" CSS rule. Then, look at my later article "Creating A Floating Background ..." for adding the floating background under the posts.

With any large screen area, your image may be smaller than the area being covered. You might not want "norepeat" - so your background image gets reused, repeatedly, in a checkerboard pattern, over the entire area. Many background images tile, so they automatically fill the body of the blog.
body {
...
background-image: url('whatever.wherever.com/what.gif');
...
}


For more information, see the W3Schools tutorial: CSS Background.

Comments

Martha said…
Well, I must admit you ARE great! Thanks a lot for all the tips. I'm posting here, but I've also used others. The best? The one named 'Customising The Page Header'. I couldn't add the gadgets I liked to my side bar, and that article gave me the hint.
Thanks a lot!!!
Martha_Ar
Anonymous said…
Thanks - Is it possible to have background images for gadgets such as links or text?? (in stead of plain white)?
Nitecruzr said…
Hey Camels,

You can apply a background to any container defined in the header section of the template. The container for sidebar gadgets is the sidebar, so I'd guess you should be able to define a background for that.

Theoretically, you should be able to define a smaller container within the sidebar, if you want a background image for an individual gadget(s). I'm not sure how the Page Elements GUI will handle that though so I can't predict success. But it should be possible for you to try.
Anony said…
Hey, Chuck,

I got the bg image to work on my practice blog,tobpracticeblog.blogspot.com, but it covers the whole screen when I put the image URL under background on http://theotherbed.com. How do I keep it so it wraps around rather than covering the whole page and obscuring the content?
Nitecruzr said…
TOB,

The practice blog uses a third party template, while the domain blog uses the Minima template. You need to put a Minima template on a practice blog, so you can practice under equal conditions.
T said…
Hi, I'm painfully new at this... I can't get the 'whatever.wherever.com/what.gif' part rigth! Where do I upload the picture to or how do I make my picture a x.com/y.gif?

Thanks!

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".