WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Background image not showing through page (11 posts)

  1. mrling
    Member
    Posted 1 year ago #

    http://www.jakespharler.com
    I was trying to attach a .gif background image I made in Illustrator/Fireworks, and used the WordPress dashboard/background options to insert the image. However, the image is covered by the white backgrounds on the page. I tried using firebug to specify "background-color: none;" to figure out how to remove the white styling, but to no avail. The css rule is added to the "body" element, doesn't this over-rule the other styling? If so, why does the white styling cover my background image?

    body.custom-background {
    background-attachment: scroll;
    background-color: #FFFFFF;
    background-image: url("http://www.jakespharler.com/wordpress/wp-content/uploads/2013/02/layout.gif");
    background-position: center top;
    background-repeat: no-repeat;

  2. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    change your CSS for

    .site

    to not call a background color.

  3. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

  4. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    I also think the site works best with the CSS for:

    body.custom-background

    to use:

    background-attachment

    as scroll and not fixed...

    Then mod, the aside CSS to change margin-top to:

    175px

    Might want to work on the color style for most styles that give color to your fonts, as it's hard to read with the background....

  5. mrling
    Member
    Posted 1 year ago #

    Thank you very much! Using Firebug, I found .site and replaced #FFFFFF with "none", which fixed the problem, but when I added this to my child theme code:
    .site {
    background-color: none;
    }

    and loaded the updated style sheet to my site using FTP, then refreshed the page, nothing changed :( I also tried this:
    #page .site {
    background-color: none;
    }

    Didn't work either.

  6. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    Add this to the bottom of your stylesheet:

    .site {
    background-color:none !important;
    }
  7. mrling
    Member
    Posted 1 year ago #

    Ok, thank you both very much for your time. Instead of using "none", I used "transparent", and it worked after loading the style. I'm still not sure why using "background-color: none;? didn't work though, especially since it worked using Firebug.

  8. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    edit: too late - you got it sorted ;-)

    .site {
    background:none;
    }

    or (as already earlier posted with a link to the css tutorial):

    .site {
    background-color:transparent;
    }

    !important is not necessary.

  9. mrling
    Member
    Posted 1 year ago #

    @Seacoast, I also thought of using "!important", but it doesn't work either...so far only when I use "transparent" does it work.

  10. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    Dang browsers! Glad to help!

  11. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    In IE10 that worked!

Topic Closed

This topic has been closed to new replies.

About this Topic