How to reference the id of a body to css?

Navigation
2

I'm interested in using the same CSS on several pages. I am trying to assign a CSS style to a body with the id="fondo2" . I use the same syntax as for the input elements. Am I making the reference well? 

<body id="fondo2">
...........
</body>

And the css is: 

body {
    background-image: url(fondo.jpg);
    /*background-color: #000;>*/
    background-size: 100vw 100vh;
    background-attachment: fixed;
    margin: 0;
    font-family: Verdana;
}

#fondo2 {
    background-color: #000;
    font-family: Verdana;
}

Can it be because I have another rule for the body in the css and it creates incompatibility? I have also tried: 

body#fondo2 {
        background-color: #000;
        font-family: Verdana;
    }

Y: 

#fondo2 {
            background-color: #000 !important;
            font-family: Verdana !important;
        }

In none of these ways do I see the black background, the image always appears.

    
asked by Orz 30.10.2017 в 21:55
source

2 answers

4

In a CSS, styles are cascaded.

The first rule body { /* ... */ } applies to the body, because it complies with what is a body tag.

And then, on that, the second rule #fondo2 { /* ... */ } applies. It's working , with any of the variations you tried.

Why do not you see the black background? Because the black background is, but as the first rule is applied first and nothing of the second rule changed the image, the image remains above the black background.

You can solve it in several ways:

  • If the first rule only has to be applied to some pages, I defined a class in those bodys, and modify the rule to: 

    body.tu-clase {
    background-image: url(fondo.jpg);
    /* ... */
}

    * Without using that class where you do not want the image.

  • Remove the background in the second rule: 

    body {
    /* para todos */
    background-image: url(fondo.jpg);
}

body.#fondo2 {
    /* si el body tiene el id, que no use la imagen */
    background-image: none;
    background-color: #000;
}

  • Define a rule for all the bodys except a certain id ( does not work in IE8- ): 

    body:not(#fondo2) {
    background-image: url(fondo.jpg);
    /* ... */
}

  • Define different rules according to the document that loads it (for the moment only works fine in FireFox ): 

    @document url(http://dominio.com/pagina-con-imagen.html) {
    body {
        background-image: url(fondo.jpg);
    }
}

    • ... There may be more that I can not think of now, but I think that's enough.

        
    answered by 31.10.2017 / 10:06
    source
    -1

    The reference you're doing well, both #fondo2 as body#fondo2 are totally correct, if the styles you generate incompatibility of I recommend that you use the !important in the style you require that is more important, like this: 

    #fondo2 {
    background-color: #000 !important;
    font-family: Verdana !important;
}
        
    answered by 30.10.2017 в 22:00
    How to validate a switch and insert it into the database if the data in my db is Boolean? How can I verify if a certain MySQL database exists from Java?