poner - ¿Cómo anular la imagen de fondo definida en CSS con otro CSS?
imagen de fondo html5 (7)
Tengo un ''Core.css'' que define una imagen de fondo de la página, junto con el tema, para el sitio. Pero para una página específica quiero cambiar solo el fondo. ¿Alguna sugerencia sobre cómo se puede lograr esto en un archivo CSS separado?
El HTML para la página es:
<head>
<link rel="stylesheet" type="text/css" href="core.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
Y core.css define:
body
{
background-image: url(''bg.png'');
}
Mientras que index.css define:
body
{
background-image:(''homeBg.png'');
}
¡Gracias!
El fondo definido más adelante debe reemplazar a los anteriores. Así que si tienes:
Site1.css que tiene:
.img {
background: ...
}
Site2.css que tiene:
.img {
background: ...
}
entonces Site2.css .img reemplazaría .img dentro de Site1.css si Site2.css se incluye después de Site1.css en su página.
ACTUALIZACIÓN: No estoy seguro de por qué la etiqueta del cuerpo no se está reemplazando correctamente. ¿Podrías intentar darle una clase o id, y usar eso en lugar del cuerpo?
p.ej
<body id="backgroundTest">
Y luego en los archivos css harías #backgroundTest { background-image... }
Y, por si acaso, podrías verificar si homeBg.png existe e index.css. http://yourpage.com/homeBg.png y http://yourpage.com/index.css deben existir.
Establezca el fondo en una regla CSS con el mismo selector que la regla original e incluya su nuevo archivo CSS después de la original, o asegúrese de que su nueva regla tenga un selector que tenga una mayor especificidad: http://www.w3.org/TR/CSS2/cascade.html#specificity
Finalmente, podría darle a la propiedad de fondo la bandera !important , sin embargo, esto suele ser un último recurso y el signo de una hoja de estilo mal organizada.
Para la página específica puede usar una regla css en la página, usando !important . Si agrega your-selector {background: url("the-path-for-the-bg-image") no-repeat !important;} en el archivo, reemplazará el fondo predeterminado.
Si desea reemplazar la imagen de fondo por nada (es decir, dejarla inactiva o "apagarla"), use la palabra clave "ninguna" en su hoja de estilos descendente:
background-image: none;
Si el fondo de la página está configurado en el cuerpo, simplemente puede anularlo asignando una clase o una identificación y agregar al cuerpo en esa página específica (también puede estar en el mismo archivo css ...):
body.someClass {
background: ...
}
o
body#someID {
background: ...
}
(Tanto en la parte del body no es realmente necesario, ya que la clase y la identificación anulan el selector)
Yo tuve el mismo problema.
Lo que terminé haciendo fue en mi hoja de estilo que estaba haciendo la anulación, lo apliqué no solo a body, html:
Asi que...
#id, html, body { background-color: #FFF }
Espero que esto pueda ayudar a alguien.
en index.css escribe
body { background-image:(''homeBg.png'') !important;
puede anular cualquier propiedad definida en cualquier lugar escribiendo "! important" después en un archivo nuevo