Background image not showing through page

  • Resolved mrling

    (@mrling)


    12 years, 1 month ago

    https://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(“https://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.

    https://www.w3schools.com/cssref/pr_background-color.asp

    ‘transparent’

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

    Thread Starter mrling

    (@mrling)

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

    Thread Starter mrling

    (@mrling)

    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.

    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.

    Thread Starter mrling

    (@mrling)

    @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 ‘Background image not showing through page’ is closed to new replies.