WordPress.org

Ready to get started?Download WordPress

Forums

Different background image for a page placed over the .css background image (13 posts)

  1. jbwp11
    Member
    Posted 11 months ago #

    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?

  2. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    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.

  3. jbwp11
    Member
    Posted 11 months ago #

    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.

  4. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    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??

  5. jbwp11
    Member
    Posted 11 months ago #

    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?

  6. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    You can add it with this CSS:

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

    See this for CSS specifics if needed: http://www.w3schools.com/css/css_background.asp

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

  7. jbwp11
    Member
    Posted 11 months ago #

    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?

  8. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    Cool - this is a good one:

    http://wordpress.org/extend/plugins/my-custom-css/

    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.

  9. jbwp11
    Member
    Posted 11 months ago #

    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);
    }
  10. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    Try using the absolute file path in this:

    background-image:url(example.jpg)

    i.e. http://example.com/....... .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.

  11. jbwp11
    Member
    Posted 11 months ago #

    I copied the entire http://example.com/public_html/wp-content/themes/startupWP/images/example_image.jpg 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.

  12. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    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."

  13. jbwp11
    Member
    Posted 11 months ago #

    Updated My-custom-css and it works, thanks

Reply

You must log in to post.

About this Topic