Support » Fixing WordPress » Different background image for a page placed over the .css background image

  • StartupWP theme pages have a plain white background that are placed over the website background.

    I only want to change the page background image. I added the following but it changes the website background image.

    <body style="background-image:url(image.jpg);">

    Any way to change page backgound?

Viewing 12 replies - 1 through 12 (of 12 total)
  • Yep, but you should avoid using inline CSS. Do you have a custom CSS section on your theme or site? You’ll want to do that first so that your changes are not lost when the theme is updated. You can use a plugin like My Custom CSS to add it.

    Can you post a link to your site – no way to help with CSS without seeing the site.

    There is a style.css from StartupWP theme. I modified it briefly to include background-image. No custom CSS as far as I know. I simply want to have a different background for page on top of the CSS background.

    Any changes you make to the style.css file will be overwritten and lost when the theme is updated – that’s the point of using a custom CSS plugin.

    I’m also not clear on what you want to do – you just want all pages (vs. posts) to have a different background? Or part of all of the webpages to have another background? Or??

    I should try the custom CSS plugin so theme updates work fine.

    The background for each page where text appears (e.g. Contact) is plain white on top of the gray fabric background of the website. I want to modify the background for the text pages (and not the CSS background).

    How can I change this plain white to an image?

    You can add it with this CSS:

    #container {
        background: #ffffff url('ABSOLUTE URL FOR IMAGE HERE');

    See this for CSS specifics if needed:

    Again, I don’t recommend making changes to theme files – so it would be best to add the above to custom CSS.

    Finally got it working, thanks! When I added the suggested code to style.css next to body{ ….}, this didn’t work.

    #container {
        background: #ffffff url(images/image2.jpg);

    There was another #container statement in a later line in the file where it worked (not sure why).

    #container{padding-bottom:20px;background:#fff url(images/image-back.jpg);}

    Where can one find a custom CSS plugin?

    Cool – this is a good one:

    Or you might want to use JetPack – it has a bunch of other cool features – though it’s more complicated to install so unless you want the other stuff, I’d keep it simpler.

    I installed my-custom-css but it doesn’t make any effect to the webpage.

    I added the following line to my-custom-css

    div#container {
        background: #ffffff ; background-image:url(example.jpg);

    Try using the absolute file path in this:


    i.e. .jpg

    You can get the file path from the media library screen for the image you are using – in the box on the right side copy that entire URL.

    I copied the entire but it shows “page not found” and causes no background image in the webpage.

    Where would the media library screen be? I used hostgator file manager.

    You need to first upload the image to your site under Media > Add New. Then that image will be in the media library – on that image’s screen – look for the box on the right side for “File URL.”

    Updated My-custom-css and it works, thanks

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Different background image for a page placed over the .css background image’ is closed to new replies.