WordPress.org

Forums

Twenty Twelve
[resolved] background css gets overridden (15 posts)

  1. swanagesite
    Member
    Posted 1 year 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 - http://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("http://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

  2. Andrew
    Nuh uh moderator
    Posted 1 year ago #

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

    body.custom-background

    Use this:

    html .page-id-948
  3. Jesin A
    Member
    Posted 1 year ago #

    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.

  4. swanagesite
    Member
    Posted 1 year ago #

    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("http://www.camelotmarquees.com/wp-content/uploads/2014/02/1272.png");
        background-position: left top;
        background-repeat: repeat;
    }
  5. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Instead of this:

    html.page-id-948

    Try this:

    html .page-id-948
  6. Jesin A
    Member
    Posted 1 year ago #

    @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("http://www.camelotmarquees.com/wp-content/uploads/2014/02/1272.png") !important;
    }
  7. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    @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

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

  8. Jesin A
    Member
    Posted 1 year ago #

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

    http://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.

  9. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    I'm sorry but I just disagree.

  10. Jesin A
    Member
    Posted 1 year ago #

    @Andrew Why so and what are your views.

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

  11. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Can you create a new thread in the "How-To" forum about this? http://wordpress.org/support/forum/how-to-and-troubleshooting#postform

  12. Jesin A
    Member
    Posted 1 year ago #

    @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("http://www.camelotmarquees.com/wp-content/uploads/2014/02/1272.png");
    }

    Or you can use the "!important" keyword

    body.page-id-948
    {
        background-image: url("http://www.camelotmarquees.com/wp-content/uploads/2014/02/1272.png") !important;
    }
  13. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    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.

  14. swanagesite
    Member
    Posted 1 year ago #

    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("http://www.camelotmarquees.com/wp-content/uploads/2014/02/1272.png");
    }

    and

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

    thanks again, i'll marked it as resolved.

  15. Jesin A
    Member
    Posted 1 year ago #

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

    @Andrew Nevins. I'll keep that in mind when answering support topics.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic