web-dev-qa-db-fra.com

Comment remplacer l'image d'arrière-plan définie en CSS par une autre CSS?

J'ai un "Core.css" qui définit une image d'arrière-plan de la page, ainsi que le thème, pour le site. Mais pour une page spécifique, je veux juste changer l'arrière-plan. Des suggestions sur la façon dont cela peut être réalisé dans un fichier CSS séparé?

Le code HTML de la page est:

<head>
    <link rel="stylesheet" type="text/css" href="core.css" />
    <link rel="stylesheet" type="text/css" href="index.css" />

Et core.css définit:

body
{
        background-image: url('bg.png');
}

Alors que index.css définit:

body
{
    background-image:('homeBg.png');
}

Merci!

cssbackground-image
25
aateeque

le fond défini plus tard devrait remplacer les précédents. Donc si vous avez:

Site1.css qui a:

.img {
    background: ...
}

Site2.css qui a:

.img {
    background: ...
}

alors Site2.css .img remplacerait .img dans Site1.css si Site2.css est inclus après Site1.css sur votre page.

MISE À JOUR: Je ne sais pas pourquoi la balise de corps n'est pas remplacée correctement. Pourriez-vous essayer de lui donner une classe ou un identifiant, et l'utiliser à la place du corps?

par exemple.

<body id="backgroundTest">

Et puis dans les fichiers css vous feriez #backgroundTest { background-image... }

Et juste au cas où, pourriez-vous vérifier si homeBg.png existe et index.css. http://yourpage.com/homeBg.png et http://yourpage.com/index.css devraient tous deux exister.

13
raRaRa

Si vous souhaitez remplacer l'image d'arrière-plan par rien (c'est-à-dire la rendre inactive ou la "désactiver"), utilisez le mot-clé "none" dans votre feuille de style en aval:

 background-image: none;
49
unknownrisk

Pour la page spécifique, vous pouvez utiliser une règle css dans la page, en utilisant !important . Si vous ajoutez your-selector {background: url("the-path-for-the-bg-image") no-repeat !important;} dans le fichier, remplacera l'arrière-plan par défaut.

4
Sotiris

Soit définir l'arrière-plan dans une règle CSS avec le même sélecteur que la règle d'origine, et inclure votre nouveau fichier CSS après celui d'origine, ou assurez-vous que votre nouvelle règle a un sélecteur qui a une spécificité plus élevée: http://www.w3.org/TR/CSS2/cascade.html#specificity

Enfin, vous pouvez donner à la propriété background la !important le drapeau, cependant c'est généralement un dernier recours et le signe d'une feuille de style mal organisée.

1
RoToRa

Si l'arrière-plan de la page est défini dans le corps, vous pouvez simplement le remplacer en donnant au corps de cette page spécifique une classe ou un identifiant et ajouter (peut également être dans le même fichier css ...):

body.someClass {
  background: ...
}

ou

body#someID {
  background: ...
}

(dans les deux parties body n'est pas vraiment nécessaire car la classe et l'id remplacent le sélecteur)

0
jeroen

dans index.css écrire

 body { background-image:('homeBg.png') !important;

vous pouvez remplacer n'importe quelle propriété définie n'importe où en écrivant "! important" après dans un nouveau fichier

0
Dashrath

J'ai eu le même problème.

Ce que j'ai fini par faire était dans ma feuille de style qui faisait le remplacement, je l'ai appliqué non seulement au corps, html:

Donc...

#id, html, body { background-color: #FFF }

J'espère que cela pourrait aider quelqu'un.

0
Jack Marchetti