Background

Where can I change the background? Can I have a different background for each page or post? How can I set an image as the background? How can I have the background-image adapting to the screen-size and make it static or fixed?

Chapter 1: Setting the background for the entire site
Chapter 2: Setting the background for a single page or post
Chapter 3: Having the background-image adapting to the window-size and making it static
Chapter 4: Background slideshow

On a website there are mainly two backgrounds. The browser background you find left and right of the content and the page background which is the background of the content part.

Chapter 1: Setting the background for the entire site

Browser background

For the settings of the page background go to Appearance, Editor, style.css and look for body:

body {
background-color: #cccccc;
background-image:url('URL to the image');
background-repeat:repeat;
}

In the first line you can define the color of the background. In the second line you can define an image for the background. In the third line whether you want it to repeat or not. If you don't want an image just leave '' empty. Have a look at the Basic HTML Codes knowledge FAQ for more informations.

Page background

For the settings of the page background go to Appearance, Editor, style.css and look for #wrapper (wrapper usually is the id of the page background in WordPress themes but it may be different in some other themes). There you can define the background:

#wrapper {
background-color: #cccccc;
background-image:url('URL to the image');
background-repeat:repeat;
}

In the first line you can define the color of the background. In the second line you can define an image for the background. In the third line whether you want it to repeat or not. If you don't want an image just leave '' empty. Have a look at the Basic HTML Codes knowledge FAQ for more informations.

Chapter 2: Setting the background for a single page or post

If you want different pages and posts to have different backgrounds you can set a different background for each page or post independently too.

Browser background

Add the following code at the top of the page or post right where you type all the other content too:

<style type="text/css">
body {
background-color: #cccccc;
background-image:url('URL to the image');
background-repeat:repeat;
}
</style>

In the first line you can define the color of the background. In the second line you can define an image for the background. In the third line whether you want it to repeat or not. If you don't want an image just leave '' empty. Have a look at the Basic HTML Codes knowledge FAQ for more informations.

Page background

Add the following code at the top of the page or post right where you type all the other content too:

<style type="text/css">
#wrapper {
background-color: #cccccc;
background-image:url('URL to the image');
background-repeat:repeat;
}
</style>

In the first line you can define the color of the background. In the second line you can define an image for the background. In the third line whether you want it to repeat or not. If you don't want an image just leave '' empty. Have a look at the Basic HTML Codes knowledge FAQ for more informations.

Chapter 3: Having the background-image adapting to the window-size and making it static

To achieve that use this code under Appearance, Editor, style.css

body {
background-color: transparent;
background-image:url('URL to the image');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size: 100%;
}

For a single page or post add the following code

<style type="text/css">
body {
background-color: transparent;
background-image:url('URL to the image');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size: 100%;
}
</style>

in the content area.

This page is a sample of this. You can see that the background sticks in place and doesn't move when scrolling down the page and that it resizes if you resize the window. I've set the page background color to transparent and used a semi-transparent white image (80% opacity) as the background for the browser background to shine through while keeping good readability. The image with 80% opacity (10x10px) was made with an image editor and saved as .png to preserve transparency.

Chapter 4: Background slideshow

If you want to set a slideshow as the background of your page have a look at this page instead.

This FAQ is also discussed in my WPFAQ.org E-Book (sample)

© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric Giger and hosted by HostGator.com
Thank you for visiting and supporting my website,
- Cédric -

Now share it…

Share

Comments are closed.