background css gets overridden

  • Resolved swanagesite

    (@swanagesite)


    11 years ago

    hello,

    I have a custom page loaded into a child theme and a custom header to go with it also.

    Im having a problem getting the custom page to change background.

    I can see my newly applied css in firebug but it is over ridden by another class. I am stumped as to how to fix it.

    The page can be found here – https://www.camelotmarquees.com/hot-tub-hire/

    This is the css i have used, 

    body.page-id-948
{
background-attachment: scroll;
    background-color: #EAEAEA;
    background-image: url("https://www.camelotmarquees.com/wp-content/uploads/2014/02/1272.png");
    background-position: left top;
    background-repeat: repeat;
}

    As I say firebug shows the new css when veiwing the it in the console so why is the other code still over riding it and how do i fix it.

    Thanks

Viewing 14 replies - 1 through 14 (of 14 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You have to use a greater specificity to override it.
    E.g to override this:

    body.custom-background

    Use this:

    html .page-id-948

    The CSS that is overriding what you added is an internal stylesheet, internal stylesheets have more priority than external ones.

    You have set a background image in WP-Admin > Appearance > Background which is being shown currently. Why not add your new background image here instead of editing the stylesheet.

    Thread Starter swanagesite

    (@swanagesite)

    Thanks for your replies.

    @jesin A

    I do not want to upload a new image to the admin as the current one is what i want for all the pages on site.

    @ Andrew Nevins

    Thanks for pointing this out however it doesn’t appear to of worked. i applied the following code

    html.page-id-948
{
background-attachment: scroll;
    background-color: #EAEAEA;
    background-image: url("https://www.camelotmarquees.com/wp-content/uploads/2014/02/1272.png");
    background-position: left top;
    background-repeat: repeat;
}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Instead of this:

    html.page-id-948

    Try this:

    html .page-id-948

    @andrew This theme is inserting an internal stylesheet in the <head> which will override any kind of specificity.

    @swanagesite You have to use “!important” in your rules to override it.

    body.page-id-948
{
    background-image: url("https://www.camelotmarquees.com/wp-content/uploads/2014/02/1272.png") !important;
}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @jesin A, no it won’t. Only inline cannot be overridden with specificity. You can just recommend to use more specific selectors. E.g.:

    html body.page-id-948

    https://www.coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

    @andrew Nevins have a look at the source code of this link

    https://fiddle.jshell.net/jesin/ZZ2Z4/2/show/light/

    It has an external stylesheet with a background-image property with the !important keyword and an internal stylesheet. See which background image is applied to the output.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’m sorry but I just disagree.

    @andrew Why so and what are your views.

    See what firebug says about this https://i.imgur.com/MYY6Z8C.png

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you create a new thread in the “How-To” forum about this? https://www.ads-software.com/support/forum/how-to-and-troubleshooting#postform

    @andrew I am quite clear about the “!important” keyword ??

    @swanagesite This code works well as it is more specific.

    html body.page-id-948 {
  background-image: url("https://www.camelotmarquees.com/wp-content/uploads/2014/02/1272.png");
}

    Or you can use the “!important” keyword

    body.page-id-948
{
    background-image: url("https://www.camelotmarquees.com/wp-content/uploads/2014/02/1272.png") !important;
}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I don’t mind discussing it, but other volunteers may. In future please only criticise volunteers’ support contributions if they are detrimental to the OP, like people who advise to edit the theme’s files without using a Child Theme. Also note that the OP is probably getting an email every time we comment, so that’s why it’s best to move these sorts of discussions to other threads.

    Thread Starter swanagesite

    (@swanagesite)

    Hey guys,

    Thank you both for your comments on this. I have now solved the situation with the code you provided @jesin A

    Just to confirm incase other people read this both of the following ways worked for me (on this page)

    html body.page-id-948 {
  background-image: url("https://www.camelotmarquees.com/wp-content/uploads/2014/02/1272.png");
}

    and

    body.page-id-948
{
    background-image: url("https://www.camelotmarquees.com/wp-content/uploads/2014/02/1272.png") !important;
}

    thanks again, i’ll marked it as resolved.

    @swanagesite. You’re welcome. Happy to hear that.

    @andrew Nevins. I’ll keep that in mind when answering support topics.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘background css gets overridden’ is closed to new replies.