Edit Background Primer: Modify HTML Background Properties for Blogs and WordPress Sites

It can be very frustrating to finally find a WordPress Theme that you like and finding out that it does not come with any way(for the CSS neophyte) to alter the Background image or Color of the website.Seeing as I get repeated questions about how to change the Background for a WordPress blog, I decided to write a very short primer on just that.

 

After this article,anyone should be able to change their Website Background image or color .Naturally,anyone proficient enough with WordPress knows that you can add the following:

add_custom_background();

To your ‘functions.php’ file and instantly get the WordPress Custom Background Image module,which Twenty-Ten/eleven uses but where’s the fun and learning in that?On top of it,results can not be guaranteed with all themes as it hooks to the BODY element(the usual Background spot)which is not always used the same way(or even visible) on all WordPress themes.I’ll make a write-up on how to hook this Background module to another HTML element soon so to expand the possibilities and achievements of your own themes.

 

Right let’s start on that Website Background

First we got to determine if your WordPress Theme,like all mine,actually lets you modify the ‘header.php’ file,if not you should check out with your theme support if there’s a custom CSS file that comes with the Child theme.If not, you might be left with the only option but to use the above command or find the right Hook/Filter for your Theme(I know,it sucks).

Step 1 Jump in :

In WordPress;

  1. Go to Appearance>Editor
  2. Check the bottom of the list on the right for ‘style.css’ and click on it
If you find either a blank file or no stylesheet,check up with you theme manufacturer,if not,all is well and we can continue.

Step 2 Relax,it’s only code:

While the amount of CSS code,depending on your WordPress Theme, might be massive,we are only looking to find out one element called BODY.It should be near the topmost part of the file or use the search function in your browser to find it.It will typically look like the following with possibly more or less properties assigned.

body
{
 padding: 0;
 margin:0;
 min-width: 960px;
 color: #0F1419;
 background-color: #F9FAFB;
}

You just found the BODY element,now remains to alter it to your heart’s desire.Say you want a red background,just modify the line:

 background-color: #F9FAFB;

for

background-color: #AA0000;

or in human language check my compilation of CSS Colors list:

background-color: DarkRed;

Click ‘Update File’ in the WordPress Editor and voila.you just made the background red.

Note:If you can’t see a change,make sure the syntax is the same as above,if it’s still not changing,your theme might have an element overlapping the Body element of the website.In this case,you might have to dig a little.Luckily,Google’s Chrome come with an inspector for HTML,CSS,Scripts and more which I use a lot in my WordPress and website debugging.Learning to use it will open new horizons and speed up your searches for classes and identifiers.

 

This is all nice but what about the background image?

Right,the meat and cheese of websites,images.

Basically it’s the same Property as we used above but with different Values.

background-image: url(images/mybackground.jpg)
background: url(images/mybackground.jpg) repeat-x 5px 0 DarkRed;

This above and without the ‘-image‘ basically tells the browser to:

  1. Display the image as background
  2. Repeat or ‘Tile’ it on the x-axis(left-right)
  3. Move it five(5) pixels right and zero(0) pixels down
  4. and finally add DarkRed as the color behind

Optionally you can omit the color value to get transparency instead or specify it like so:

background: url(images/mybackground.jpg) repeat-x 5px 0 transparent;

That said,now that you can apply the background-color and background-image properties you can start using it on many other HTML tags using classes.So let’s say that in your HTML or WordPress code, there is <div> tag and you added a class named ‘decoration’ to it,like below:

<div class="decoration"></div>

and then,in your style.css file you add:

.decoration
{
background: url(images/mybackground.jpg) repeat-x 5px 0 transparent;
height:200px;
}

This would effectively show the said image where you placed the div tag.Note that you must specify a sufficient height value to show the image.

Hope this helped.

Peace

Top

7 Responses to Edit Background Primer: Modify HTML Background Properties for Blogs and WordPress Sites

  • Rolf Yoder says:

    Intelligent Web Designer I was recommended this blog by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my difficulty. You are amazing! Thanks! your article about Edit Background for Blogs and WordPress Sites

    Best Regards Rolf Yoder

  • Thorny says:

    It consistently is amazing to me exactly how Web owners for example your self can find some time and the dedication to carry on Composing wonderful posts your blog is good and one of my have to read websites, I’d been more than pleased with the blog post Edit Background Primer.

    I simply want to thank you and also congratulations
    Kind regards

    Thorny

    • Hiroshi says:

      Bennet:Regarding Artisteer themes bmcneiog outdated, that’s just inevitable given that rapid nature of WordPress development, but it actually appears to very well support WordPress 3.0 currently, which really only accounts for the menu system.Sadly, almost all the themes on the Web Stylee site were made pre-Wordpress 2.8 so they don’t have the menu functionality. And I don’t think anyone in their right mind has the time to update 200+ themes. :)I’m working on my own theme framework currently and generally could use informational help to expedite the process so I very much appreciate the invitation. It seems we also share a love for Scripture so I’m sure we’ll be talking a bit more on your blog.@ Siohban Ambroe:I do hope you realize the tongue-in-cheek nature of my comment. I’m rarely to be taken seriously and I very much enjoyed your post. In fact, Web Stylee isn’t really to be taken too seriously either. I was sort of hoping people would end up visiting for the humorous slant behind it all.

  • wp Thematic says:

    Awesome blog mate and nice plugin for comments!

  • Mike says:

    This is a little something I must find more information about, i appreciate you for the article.

  • Dorian says:

    Big fan on this website, a handful of your posts have definitely helped me out. Looking towards upgrades!

  • orange county user says:

    Thanks a lot for sharing this with all of us you actually know what you’re talking about! Bookmarked. Please also visit my site =). We could have a link exchange contract between us!

Leave a Reply

Your email address will not be published. Required fields are marked *

Who am I

Hi my name is Stéphane,
I am a Digital Artist,Musician and Wordpress addict.I love creating compelling Wordpress themes that are visually tailored to my client's needs or previous HTML designs.Whether you want a Wordpress Blog to match your existing template or simply want a new custom Wordpress Theme just contact me I am meticulous and I love working with serious people with high requirements.

FaceBook

Copyright ©2011-2017 Intelligent Web Designer Wordpress Artist All rights reserved. Any redistribution or reproduction of part or all of the contents in any form is prohibited other than the following. 1)you may print or download to a local hard disk extracts for your personal and non-commercial use only, 2)you may copy the content to individual third parties for their personal use, but only if you acknowledge the website as the source of the material.You may not, except with our express written permission, distribute or commercially exploit the content. Nor may you transmit it or store it in any other website or other form of electronic retrieval system.

Privacy Policy XML-Sitemap