WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Background image not showing through page

[Resolved] Background image not showing through page

  • 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;

Viewing 10 replies - 1 through 10 (of 10 total)
  • change your CSS for

    .site

    to not call a background color.

    Michael

    @alchymyth

    Forum Moderator

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

    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.

    Add this to the bottom of your stylesheet:

    .site {
    background-color:none !important;
    }

    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.

    Michael

    @alchymyth

    Forum Moderator

    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.

    @seacoast, I also thought of using “!important”, but it doesn’t work either…so far only when I use “transparent” does it work.

    Dang browsers! Glad to help!

    In IE10 that worked!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘[Resolved] Background image not showing through page’ is closed to new replies.
Skip to toolbar