If you have a theme that does not have an easy way to add a background image, you will be adding your image via CSS (Cascading Style Sheets):

  • Go to your Appearance > Editor selection:

  • You will see the following CSS code:

  • To make sure you are in the right place, under the Templates section on the right-hand side, scroll down to make sure Stylesheet (style.css) is highlighted in blue as shown above.
  • Scroll down to until you see the body { .... } section as shown below:

  • Locate the line of code for Background. It will be on or near the bottom of the Body {...} section. See yellow highlighted area below:

  • This is the line of code you will be modifying to include your background image.
  • The template for the code will be as follows:

background: #ffffff url("Your Image URL Here");

  • In place of Your Image URL you will enter the URL for your background image.
  • Copy and Paste the above template for the code into your CSS stylesheet.
  • The background line of code should look like:

  • Scroll down and click on the blue button that says Update File:

NEXT PAGE: On the next page, I will show how where to find your background image URL and copy and paste it into the background line of code replacing Your Image URL Here.



Join the Discussion
Write something…
Recent messages
LouieLuc Premium
Nice training, Step! Well done. :)
Reply
stephhill Premium Plus
Thank you Louie. How have you been?
Reply
JewelCarol Premium
Awesome, Steph, thank you. May I ask, what is the reason why people would want to add background image, does it affect the seo aspect of it. I ask because I do have thoughts to change the background. ;))
Reply
olivingstone Premium
Hi Jewel, I just had a look at your site and it looks great without a back ground image. You have a large banner image at the top of the screen so it makes a nice feature. I felt that mine needed a background image due to my niche and because I don't have a banner. You can see it here http://chiccolleen.com/ Olive
Reply
JewelCarol Premium
Hey, Olive, you have a beautiful site, I like it. ;)) You are right, yes, a background image will certainly suit yr very nice niche. Thanks so much for yr kind advice. ;))
Reply
stephhill Premium Plus
Hi Jewel:

No, the background image has nothing to do with SEO rankings. A background image is just a way to add a look-and-feel to your website. It comes down to what you personally thinks looks appealing to your audience.

Thank you Jewel for once again checking out my training. Have a wonderful day!

Steph
Reply
stephhill Premium Plus
Hi Olive:

I went to your website and it looks awesome. I agree with you - it has to do with niche and a branding for your website. I love your logo. Did you design it yourself? I sometimes struggle with how to wear make-up properly, so I am going to be spending more time on your website. :)

Thank you Olive for showing what a website with an awesome background image looks like. Can I perhaps use your website as an example in my training here? I was using test sites I created, but if I had actual members websites to use as an example, that would be awesome. Let me know.

Steph
Reply
olivingstone Premium
Wow Steph, thanks for your positive feedback!! Of course you can use it in training. A family friend designed my logo for a €40. I like it and I use the lady for my favicon so it worked out well. Thanks again and I am no good with make-up either!!
Fab training as always. Olive
Reply
olivingstone Premium
Ah thanks Jewel!!
Reply
stephhill Premium Plus
Great. I will do that then - add your website as an example of a background image.
Reply
olivingstone Premium
Kyle does not recommend people use background images as they can slow down the load time but sometimes you gotta do what you gotta do. Also, I use an image optimizer plugin.
Reply
stephhill Premium Plus
Ho Olive:

I know. I saw that Kyle does not recommend background images. He has a a great point about the load time and possibly slowing it down. But, I agree with you - we need to decide what is best for our niche and website. You also need to think about the aesthetically appealing way in which some niches really need to offer something else to draw them in. And like you said, an image optimizer plug-in helps too.

Steph
Reply
izan5932 Premium
Hi steph...just to find out the meaning of CSS and want to google it . Luckily you mentioned here. Thank you..hope you will always in good luck in future.
Reply
stephhill Premium Plus
CSS stands for Cascading Style Sheets. I have another training that covers CSS here:
Reply
ShazzN Premium
Hi Steph,

Hope you are well. Thank you for the training...I save all your training for future reference. Take care and have a wonderful day
Reply
stephhill Premium Plus
You are most welcome Sharon. Glad to hear my training is useful to you. Let me know if you have any questions at all.
Reply
ShazzN Premium
Most definitely.
Reply
AlexEvans Premium Plus
Hi Steph
Think I can use this one , thanks for sharing . Going to give it a good go.
Alexander
Reply
stephhill Premium Plus
You are most welcome Alexander. I am glad it is useful.
Reply
Top