Comment remplacer l'image de fond définie dans le CSS avec un autre CSS?

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

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 le noyau.css définit: 

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

Tandis que l'indice.css définit:

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

Merci!

  • il aiderait à voir le css définition sur les deux fichiers css, et comment vous les importez de votre page web.
  • J'ai mis à jour ma réponse, voir si ça aide.
  • merci ça fonctionne maintenant
  • est-il un manque "url" avant " ("dans l'index.css?
  • en regardant maintenant, oui, il semble "url" est manquant...mais je ne pouvais pas dire à coup sûr que c'était il y a longtemps et depuis oublié problème
InformationsquelleAutor aateeque | 2011-01-26
  1. 13

    arrière-plan 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: ...
}

    puis Site2.css .img remplacer .img dans Site1.css si Site2.css est inclus après Site1.css sur votre page.

    Mise à JOUR: je ne sais pas pourquoi le corps de la balise n'est pas remplacée correctement. Pourriez-vous essayer de lui donner une classe ou un id, et utiliser à la place du corps?

    par exemple 

    <body id="backgroundTest">

    Puis dans les fichiers css, vous feriez #backgroundTest { background-image... }

    Et juste au cas où, pourriez-vous vérifier si homeBg.png existe et l'index.css. http://yourpage.com/homeBg.png et http://yourpage.com/index.css devrait à la fois exister.

    • C'est la bonne façon de le faire, en utilisant le naturel CSS 'cascade'. Éviter à tout prix en utilisant le !déclaration importante, car elle rend la cascade de l'imprévisible et de l'avenir de maintenance beaucoup plus difficile.
    • C'est ce que je pensais. Le code HTML pour que mon code est: <head> <link type="text/css" href="core.css" /> <link type="text/css" href="index.css" /> je fais évidemment quelque chose de mal?
    • Est votre code css qui devrait remplacer l'arrière-plan au sein de l'indice.fichier css? Pouvez-vous me montrer le css de définition où le fond est spécifié pour les deux fichiers. (éditer votre question)
    • Ses dans le, édité question
    • Avez-vous vérifié avec un inspecteur DOM (Firebug ou ceux qui sont intégrés dans Chrame ou IE) si et l'ordre dans lequel les règles sont appliquées?
    • comment dois-je faire dans CHrome?? Inspecter l'élément?
    • merci pour la mise à jour. Ont essayé id require corps, mais cela ne fonctionne pas non plus!
    • Vérifier si le fichier existe dans le chemin d'accès correct. index.css et homeBg.png.
    • yep...il existe des fichiers sur ce chemin
    • Dans google Chrome, appuyez sur "Ctrl-Maj-I". C'est l'inspecteur DOM. Au dessus de lui "Éléments" doit être mis en évidence avec un arbre de code HTML ci-dessous. Sélectionnez la <body ... élément. Sur la droite il y a une section intitulée "Styles" avec un paragraphe "Matched Règles CSS". Il y a une règle sur le dessus, avec la règle remplacée juste en dessous.
    • merci beaucoup pour votre aide. Il a résolu étrangement par lui-même!
    • Se pourrait-il que le site a été mis en cache? Auraient pu suffire à faire Ctrl + F5 ? 😉

    InformationsquelleAutor raRaRa
  2. 49

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

     background-image: none;
    InformationsquelleAutor unknownrisk
  3. 4

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

    InformationsquelleAutor Sotiris
  4. 1

    Définir l'arrière-plan dans une règle CSS avec le même sélecteur de la règle originale, et inclure votre nouveau fichier CSS après l'original, 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 le fond de la propriété de la !important drapeau, mais c'est généralement un dernier recours, et le signe d'un mal organisée feuille de style.

    InformationsquelleAutor RoToRa
  5. 0

    Si le fond de la page est définie dans le corps, vous pouvez simplement annuler en donnant au corps à cette page en particulier d'une classe ou d'un identifiant et d'ajouter (peut aussi être dans le même fichier css...):

    body.someClass {
  background: ...
}

    ou

    body#someID {
  background: ...
}

    (dans les deux body partie n'est pas vraiment nécessaire que la classe et l'id d'annuler le sélecteur)

    InformationsquelleAutor jeroen
  6. 0

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

    Ce que j'ai fais dans ma feuille de style qui a été fait le remplacer, j'ai appliqué non seulement de corps, html:

    Donc...

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

    Espère que cela peut aider quelqu'un.

    InformationsquelleAutor Jack Marchetti
  7. 0

    dans l'index.css écrire

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

    vous pouvez remplacer n'importe quel bien définie n'importe où en écrivant "!important" après avoir dans un nouveau fichier

    • !important ne doit pas être utilisé dans le CSS. Si forcé à l'utiliser, le son est un signe que les règles ne sont pas appliquées dans l'ordre correct.
    • Actuel de la question, il est demande comment remplacer la propriété css dans le nouveau fichier. Ma réponse est appliquée pour une question donnée , et n'est pas un css utilise la directive.
    • que faire si vous êtes aux prises avec un 3e partie CSS qui charge dynamiquement (vous avez absolument aucun contrôle sur les règles de style à elle) qui a déjà un style défini avec un !important et vous souhaitez la remplacer ??
    • Juste point de. Si la 3ème partie CSS charges !important alors oui, vous êtes de gauche avec pas le choix. Un autre cas d'utilisation, c'est que lorsque style tag est utilisé par JS pour ajouter des styles.
    • Relativement à la question, vous avez raison. Mais cependant, il pourrait donner l'impression que c'est correct d'utiliser !important comme un mécanisme pour remplacer les styles et jusqu'à la fin avec CSS ayant !important tous sur la place.
    InformationsquelleAutor Dashrath