CSS arrière-plan multiple

J'ai un site et je voulais changer son arrière-plan. Je veux mettre un fond en haut et en bas.CSS arrière-plan multiple

Voici le code CSS:

 
div.bg_top { 
    background-image: url('bg_top.jpg'); 
    background-repeat: no-repeat; 
    background position: top center; 
} 

div.bg_bottom { 
    background-image: url('bg_bottom.jpg'); 
    background-repeat: no-repeat; 
    background position: bottom center; 
}

Code HTML:

 
<div class="bg_top"> 
    <div class="bg_bottom"> 
    Content Here. 
    </div> 
</div>

est-ce exact?

Source

2010-03-19 Jorge

Il devrait fonctionner si vous résoudre le background-position:

background-position: center top;

Source

2010-03-19 05:37:36

Devrait être 'center top' en fait. L'horizontale va d'abord, puis la verticale. – DisgruntledGoat

@DisgruntledGoat - Désolé, corrigé maintenant. La plupart des navigateurs le rendront correctement dans n'importe quel ordre, car c'est une erreur si commune. –

Vous avez raison - c'est vrai pour les valeurs de chaîne car il n'y a aucune chance d'ambiguïté ('top' est évidemment la verticale). Bien que l'ordre est vital pour les valeurs numériques. – DisgruntledGoat

je suggère d'utiliser CSS sténographie pour les meilleures pratiques

.bg_top { background: url('bg_top.jpg') no-repeat top center; } 

.bg_bottom { background: url('bg_bottom.jpg') no-repeat bottom center; }

Source

2010-03-19 06:08:12 pixeltocode

L'utilisation de la main courte ne fait pas automatiquement de "meilleure pratique". Et ne vous embêtez pas à ouvrir l'argument "ça garde votre feuille de style plus petite". –

il vous aide à trouver les propriétés CSS rapidement, rend le code plus lisible et gagne du temps lors de l'édition. si ce n'est pas la meilleure pratique, s'il vous plaît éclairer moi macek. – pixeltocode

Comme Lance changer le dit tout à l'background position: à background-position: il se doit fonctionne bien. Mais ce qui m'inquiète, c'est que la façon dont vous avez donné les arrière-plans, avec des résolutions différentes, les deux images d'arrière-plan peuvent se chevaucher et tout le design sera vissé. Donc, pour le rendre compatible avec toutes les résolutions, vous devez choisir une autre option. Je vais suggérer d'utiliser n'importe quel éditeur d'image et de placer les images que vous voulez et de faire une image, puis utiliser cette image comme arrière-plan.

Source

2010-03-19 12:35:44 Bipul

Pour éviter de modifier le code HTML, vous pouvez également placer l'un des arrière-plans dans html et l'autre dans body. Et utilisez une hauteur minimale (hauteur pour IE6) pour éviter le chevauchement.

Source

2010-03-19 13:02:23 jeroen

CSS arrière-plan multiple

Répondre

Questions connexes