Carolyn E. Cooper Communications
hi, thanks so much for the tutorial above. I have a further question on the same lines. I figured out how to change the color, but i want to change the background color to an imge that is on my desktop, a jpg file saved on my desktop. I havent been able to figure out where to upload the file to..i use wordpress, and tried putting it in to my media files, but that didnt help. and i have no clue of where the code has to be changed.
Please help.
Regards,
R
Ah, yes. Changing background images is a little bit different than just changing the color. You will need your image in a web-compatible format — either .jpg (or .jpeg), .gif, or .png. You then need to upload your image with your FTP program into the correct directory. And finally, you need to edit your theme style sheet. Let’s walk through this process in a little more detail.
Step 1 — Prepare Your Image
If you are not planning to repeat your image over the entire screen, you will want to make certain that the background color of your image is the same as the background color of the body tag in your stylesheet.
Step 2 — Upload Your Image Into Your Theme Directory or Sub-directory
Strange-Little-Town Theme directory with the theme templates, stylesheet and image sub-directory
Your WordPress themes reside in the wp-content/themes directory. So the path for the Strange Little Town them in my site is: /wp-content/themes/strange-little-town. And inside most themes directories, there is a sub-directory for images. It may be called img or images. This is where the images related to the theme styling are placed. See the directory image to the right.
You need to upload your background image using an FTP program into your theme directory. In the case of my Strange Little Town theme, it will be in the img sub-directory. Unless you are using the latest version of WordPress with the ability to add themes from inside the WordPress administration, you had to upload your theme with an FTP program into the wp-content/themes directory, so this should be difficult.
Step 3 — Modify Your Stylesheet
The last thing you need to do is change your stylesheet. You have to modify the background attribute of your body tag. You have to give the URL for the location of the image to be used as a background. By default, the image will be repeated across and down the screen to fill it. You can control this placement. For example, the theme Strange Little Town has very distinctive illustration image as the background which is repeated across the top of the page. Here is the body tag:
body{
background:#c35d8a url('img/header.png') repeat-x;
text-align:center;
margin:0;
padding:0;
font-size:62.5%;
font-family:GillSans, Calibri, Trebuchet, sans-serif;
color:#2e1737;
}
By uploading the your graphic image in the theme directory, you make it easier to give the correct URL to the file. Most of the problems people have using background graphics come from either using the wrong path to the file or not wrestling with positioning. You can position background images very precisely or simply. For example, here’s an image positioned only once and at the left top corner of the screen:
body
{
margin: 10px 200px 10px 200px;
text-align: center;
color: #000;
font-family: "Lucida Grande",Tahoma,"Lucida Sans Unicode",Verdana,sans-serif;
background-color: #fff;
background-image: url(img/aerobic-woman.jpg);
background-repeat: no-repeat;
background-position: left top;
}
All of the background information could also have been given in a single line like this:
background: #00ff00 url('img/aerobic-woman.jpg') no-repeat left top;
For more information about bakcground CSS coding, check out W3Schools.
And I hope this helps!
If you enjoyed this article, please consider sharing it!
9 Responses to How To Change Your WordPress Background Image
Leave a Reply
Get a FREE 34-Page Guide
Avoid wasting money & hours. Over 50 free & low cost marketing resources are included.
Simply request below & I'll email you the code to download your free copy today! No Spam — Promise.
Recommended Resources
Domain & Hosting Services
How To Choose A Hosting Service
Dotster.com:
My Domain Name Manager for Over 10 Years
Westhost: Unlimited Databases, CPanel Control & Live Chat Support
Dreamhost: Green Hosting, Video Streaming & Extensive Support
Bluehost: Fast Backbone Connection, Unlimited Storage & Streaming Video
Squarespace:
Create a Professional Looking Website in Minutes (A Custom CMS Service)
Wordpress Themes
Pagelines Drag and Drop Web Design for WordPress:
Extensive Video Tutorials & Support Forum
Elegant Themes: Dozens of Beautiful Themes with Advanced Features for One Low Price
StudioPress: Flexibel Framework With Numerous Child Themes
Thesis Theme for WordPress: Options Galore and a Helpful Support Community
Woo Themes: Dozens of Easy-To-Use Professional Theme Designs
Yes this is clear enough. YET, what i need is a specific bg image for a single page; wanting to design a none repeatable image that will underlay all page content..can this be done ?
Thanks, Yosyama
Hmm, I’m not certain what exactly you are asking. The instructions above should help you place a background image for your theme. If you do not want to repeat your image, look at the last code example:
background: #00ff00 url('img/aerobic-woman.jpg') no-repeat left top;
Notice the “no-repeat”, that stops the image from repeating. The “left”, aligns the image on the left and the “top” aligns the image on the top. If you want to center the image, you would change that code to read “no-repeat center center”.
If you are talking about placing an image as the background of a single page entry, you need to create a custom theme and assign it to the page as explained on the WordPress.org site here: http://codex.wordpress.org/Pages.
If you are talking about assigning a different background image to a specific category that becomes a bit trickier and would require an another lesson.
I hope this helps you a bit more. If not, please feel free to give us a little more information about your specific need. And thank you for visiting the site.
[...] van WordPress kan je dat best vinden op het net hoe dat moet. Dus ik ging aan de slag nadat ik dit had gelezen. Een code veranderen is niet zo moeilijk. Je moet alleen wel weten wat je doet in de [...]
According to Google Translate, the English Translation from the Dutch is:
Bedankt!
How to add border to whole page of WordPress theme.
It depends a bit upon what you mean by “add border”.
If you want to put a band of color around the entire page, you can simply add a the border CSS tag to the body like this:
body {border:5px solid red; }
To make the border wider, increase the number of pixels (the px) and to change the color, change “red” to another color name like “black” or the hexadecimal color like “#f2f2e8″.
If you want to create more space around the content, there are a number of ways, the easiest is adding a margin attribute to the body tag like this:
body {margin: 10px; }
And if you are wanting to add a repeated graphics border to the entire page, you could do something like this:
body {
margin: 10px;
background: #ffffff url(images/web_nouveu_bkg.gif) repeat left top;
}
This will put a 10 pixel margin around the top, bottom and sides of the page and add a background color of white (#ffffff) and a repeated background image starting at the top of the left-hand corner.
I hope this helps and thanks for visiting!
hey! im trying to change my background on my site, i dont have much idea at all to about this sort of thing, can i ask, where would i find my ftp details for the site so i can access my folder to add the new image? someone built the site for me and we cant contact them no more so what i have is limited.
Mikee,
Somewhere you should have an initial email from your hosting service telling you your username and password both for your web control panel as well as your ftp log-in information. If you can’t find it, you can contact your hosting service and request they resend it to your account email.
BTW, I highly recommend you create a text file that you keep on your computer or on an back-up drive that contains all of your website log-in and account information. I do this for all of my clients and it has been a life-saver on more than one occasion.
Thank you, thank you! I have been trying to figure out where the background images are all day. Now I’ve finally deleted the theme’s background image and replaced it with my own. Huge help! You’re so concise and thorough.