What is a Background Image?

A background image is an image that appears behind your content on your website. An example is show below. The pink tulips represent the background image of this website:

This training will cover how to add a background image like the tulips you see above.


Depending on your learning style and needs, you may prefer the Video Tutorial of this Training. This particular tutorial walks you through step-by-step without the video.



Join the Discussion
Write something…
Recent messages
MaartenN Premium
Hey! Firstly, thanks for the tutorial, but when I follow all the steps it doesn't change a thing to my page (Hiero theme). Is it just not possible to use a background with my theme or...? There were only three f's (fff) in my code instead of six in your code, maybe that is the reason?
Also, I already added a header image, but I want it to stretch from the very left of the screen all the way to the right. Now it is just surrounded by black and I don't like that. Also, I ideally want my site title to be shown over the header image. Do you have any idea how to do this or know anyone who knows how to do this? Thanks anyway! Really struggling here.
This is my site:
https://howtogetrippedathome.com/
Reply
Triblu Premium
Hey Maarten,

Here's how to change Hiero theme background color to an image: https://athemes.com/forums/topic/changing-default-white-background-to-an-image/

Here's a discussion explaining the three fs: https://stackoverflow.com/questions/2899197/does-style-color-fff-render-as-f0f0f0-or-ffffff

As for header image you can check through their online tutorial: https://athemes.com/theme/hiero/

Any further tweaking you needed, you should be contacting your theme's support staff. They can solve your issues quicker because they designed theme so they know how to advise you best.

Hope this helps you.
Reply
MaartenN Premium
Thanks A LOT! Will try this!
Reply
MaartenN Premium
Oooh, I found out that the first and second link both don't give a solution to my problem unfortunately
Reply
Triblu Premium
Ah! Sorry about both links ending up of no value.

Yes ... I see the person asking for help did not reply to the support staff's request for more information. However, you can see for yourself, their support people are responding.

The developers of the themes we use truly are the best "go to" people to ask for help. Most times, what works for one theme won't necessarily work for another.
Reply
Peach5100 Premium
You tutorial is great and I tried to follow it to a tee...but some of the things I need was missing. Like there is no category for background on the dashboard under appearance and when using the CSS I got to everything except it did not give me a description so I can put the URL in...a little confused
Reply
DuaneClark Premium
Hi Steph and Other Theme Guru's ;)

I have no idea what I'm doing and quite frankly the "code" reminds me of the matrix!! I want to add an image to my (i believe it's called a) Header as without it my site (as someone pointed out earlier today) looks washed out. I'm not pouting, i actually happen to agree!! How do I add an image to the area circled in red (see pic) as well as remove the aditional menu circled in yellow?
Reply
DuaneClark Premium
Just to clarify, tried to add the image using the "customize" tool as explained, but the image was added behind everything else and only visible along the narrow side strips of the page.
Reply
LouieLuc Premium
Have you tried using "Theme Options" on Dashboard >> Appearance?
What you said you did using "Customize" was not your header image, it was your theme's background image. Two totally different things.
Reply
DuaneClark Premium
HI Louie, Thanks for that effort mate. After almost 12 hours of searching and reading my only conclusion was that the "issue" was not an issue after all. I chose a theme that was not what i was looking for to start with. Anyway have changed the theme and I now have exactly what i want and can change things (like the header image) without worrying about code.
Reply
LouieLuc Premium
:) well done Duane. Just a matter of trying and learning how to do it. :) Next time, it'll be faster.
Reply
stephhill Premium
Sorry I had not seen this comment earlier. Thank you to Louie for helping. I know CSS can look like the matrix. I was scared of it too when I first started learning. :)
Reply
LouieLuc Premium
Yep Steph, it's just like everything else. But it then becomes easier and fun! :)
Reply
SamiWilliams Premium
Hi Stephanie,
Great tutorial- and I look forward to using it.
book marked for now.
Sami
Reply
stephhill Premium
Sounds great Sami. Let me know if you have any questions for me when you start using it.
Reply
Mark1957 Premium
Great training Steph, have bookmarked for again so that I can tickle my site a bit!!
Cheers
Mark
Reply
stephhill Premium
Hi Mark!
Thank you for checking out my training on how to add a background image using CSS. Many themes have an easy way to do it, but some do not. This training helps those who do not have a theme which easily aids in adding that background image to your website.
Steph
Reply
Mark1957 Premium
I'm using Iconic 1 Steph so I'll have to see what needs doing when the time comes.
Ta!
Mark
Reply
2Al Premium
Great information. Thank you for sharing.
Reply
stephhill Premium
You are welcome. I am glad you enjoyed it.
Reply
LLiu Premium
Just what I have been looking for Steph. Thank you for this...

Have a awesome day,

Linda
Reply
stephhill Premium
Hi again Linda!

I am glad it helped. Thank you for checking it out. ~Steph
Reply
kpeitz Premium
Very informative. Thanks for posting it
Reply
stephhill Premium
You are welcome. Let me know if you have questions. I will be happy to help.
Reply
kelliestew Premium
Very helpful, thank you Steph
Reply
stephhill Premium
You are certainly welcome Kellie. Do you have any questions?
Reply
kelliestew Premium
Hi, no not at the moment. I am just trying to decide if I should have a background. Do I like it, do I not like it....decisions, decisions:-)
Reply
LouieLuc Premium
Nice training, Step! Well done. :)
Reply
stephhill Premium
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
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
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
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
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
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
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
Hi Steph
Think I can use this one , thanks for sharing . Going to give it a good go.
Alexander
Reply
stephhill Premium
You are most welcome Alexander. I am glad it is useful.
Reply
Top