38 Comments
How to Add a Background Image to your Website Using Code
This 5 minute video tutorial walks you through how to add a background image to your website when your particular theme does not offer an easy way to do. Many themes have a simple way to add a background by going to Appearance > Background.
However, some themes do not have a simple way. I use Omega as an example in this video tutorial. You can easily follow along in the video and I will show you how changing one line of code in CSS (Cascading Style Sheet) will place a background image in your niche or WA website.
This is the equivalent video tutorial for the training on How to Add a Background Image Using CSS
If you have any questions, please them below and I will gladly answer them. If you enjoyed this video and got plenty of material and help, please click on the green like button.
Join the Discussion
Reply
Martstervt
Premium
Hello Steph,I wondered how that was done and how to control placement. Now to put it into practice. Thanks for a good tutorial
I'll need to watch it a few times.
Marty
I'll need to watch it a few times.
Marty
stephhill
Premium Plus
Marty, let me know if you run into any problems at all. With the placement, that can be tricky depending on the size and type of the image. This tutorial gives you a great start, but there is more that you can do and/or need to do depending on your specific image.
BTW - You are welcome.
BTW - You are welcome.
Martstervt
Premium
Thanks for offering Steph,I'm in another direction now but plan on starting a new site in the future and may contact you.
Marty
Marty
stephhill
Premium Plus
Martstervt
Premium
My free guitar lesson site is what has been worked on and i plan to continue adding content. I have another site that is in the progress of having content moved from a Siterubix to a name cheap domain with a more relevant URL . The guitar site has a connecting link on the home page to the site being moved.
I'm going to build a weight loss, supplement site after I get the WA promotional site respectable. Thanks Steph, for taking a look.
http://www.martstervt.com.
Marty
I'm going to build a weight loss, supplement site after I get the WA promotional site respectable. Thanks Steph, for taking a look.
http://www.martstervt.com.
Marty
stephhill
Premium Plus
Hi Marty.....I like your website. It will be an awesome resource for those who are wanting to learn to play the guitar. I noticed your landing page is your About Me page. You may instead want to make your landing page be your homepage. I enjoyed reading your story on your About Me of how you started playing at the age of 18 and continued until 10 years later and decided it was time to settle down and raise 4 kids, etc.
Thank you for sharing.
Thank you for sharing.
HelenpDoyle
Premium
Hi Steph, I don't know if I have asked you this before (I did ask someone!). I would like to put a watermark on a page ie like the old writing pads with the image as an integral part of the paper. Why I want to do this is so the page acts normally, I can type over the watermark and everything I type can be read by search engines. Is this at all possible. By the way great tutorial and bookmarked.
stephhill
Premium Plus
Hi Helen:
So, I want to understand this - you want to create a watermark (which can be done using a background image) on some of the pages but not all of the pages of your website?
And no, you have not asked me this question before (or at least I can't remember. :) ) - And what do you mean by "page acts normally"?
I will try and help if I can. It might be possible to do it in the code by including an "IF-THEN" type statement. But let me know if I understand you correctly.
Steph
So, I want to understand this - you want to create a watermark (which can be done using a background image) on some of the pages but not all of the pages of your website?
And no, you have not asked me this question before (or at least I can't remember. :) ) - And what do you mean by "page acts normally"?
I will try and help if I can. It might be possible to do it in the code by including an "IF-THEN" type statement. But let me know if I understand you correctly.
Steph
HelenpDoyle
Premium
Not your memory too! Yes to the first question. I have put text on an image and put that on a page but googlebots don't read that. Ie I have a page I wanted to have a U shaped image. Then I wanted to type in between the two U arms. Couldn't do that so thought a watermark (background) might be the answer.
By the way you don't sound like you are from the States!
By the way you don't sound like you are from the States!
stephhill
Premium Plus
Okay....I understand now.
Here is what I recommend:
1. Create the U-shaped background.
2. Create an image that has the text you want to say and center it between the two U arms.
3. Utilize your comment section of your website to add the words from your text in your image. You have complete control over your comments.
Here is what I recommend:
1. Create the U-shaped background.
2. Create an image that has the text you want to say and center it between the two U arms.
3. Utilize your comment section of your website to add the words from your text in your image. You have complete control over your comments.
bjdluna
Premium Plus
hi stephill,
That was really great! I am always interested in how to do things with the code so can have more control over how the website looks. My ultimate goal is to learn how to develop web sites and web applications starting with wordpress but also php and ruby on rails. Do you know how to add a database to your wordpress website? I would like to learn that too.
Thank you for this training I really enjoyed it!
That was really great! I am always interested in how to do things with the code so can have more control over how the website looks. My ultimate goal is to learn how to develop web sites and web applications starting with wordpress but also php and ruby on rails. Do you know how to add a database to your wordpress website? I would like to learn that too.
Thank you for this training I really enjoyed it!
stephhill
Premium Plus
When you say how to add a database to your wordpress site, are you referring to the MySQL database that automatically stores your posts, pages or are you talking about building and maintaining a fully customizable database of people such as registrants, participants, members, etc? If it is the latter, you can do via a plug-in.
I am glad you enjoyed the training.
I am glad you enjoyed the training.
stephhill
Premium Plus
Hi Bob:
That is true indeed. Perhaps I should remind everyone of that in my training - anytime you do any kind of customization, you will have to re-do it whenever there is an update to the theme. If you use a child theme, you might be okay.
That is one of the problems with any updates. I had to update WordPress recently to one of my sites and I am still cleaning up from that.
Steph
That is true indeed. Perhaps I should remind everyone of that in my training - anytime you do any kind of customization, you will have to re-do it whenever there is an update to the theme. If you use a child theme, you might be okay.
That is one of the problems with any updates. I had to update WordPress recently to one of my sites and I am still cleaning up from that.
Steph