Problème de positionnement de l'image de fond

J'ai ceci comme style CSS. Mon #pg_wrap ne se centre pas avec l'image d'arrière-plan lorsque la fenêtre du navigateur est redimensionnée. La capture d'écran que j'ai est quand vous réduisez la fenêtre du navigateur moins de 1344px que la largeur #pg_wrap (la largeur ne doit pas être cela, était juste un numéro de test).Problème de positionnement de l'image de fond

La capture d'écran a été prise avec Firefox, qui le fait. Chrome ne le fait pas. Comment puis-je obtenir l'image de fond pour rester en place?

Chrome

Firefox

body 
{ 
    text-align: center; 
    background-image: url('p_bg_75.jpg'); 
    background-repeat: repeat-y; 
    background-color: black; 
    background-attachment:fixed 
    margin: 0px; 
    padding: 0px; 

} 
#pg_wrap 
{ 
    margin-left: auto; 
    margin-right: auto; 
    width: 1344px; 
    height: 1000px; 
    border: 1px solid white; 
    text-align: center; 
}

Source

2009-04-13 MJ.

La différence est que les navigateurs gèrent css incorrect de différentes façons.

changement

background-attachment:fixed

background-attachment:fixed;

Source

2009-04-13 03:27:03 Guffa

NINJA semi-colon! – jcelgin

Même si j'ajoute le point-virgule, il le fait. Si je supprime la position d'arrière-plan tous ensemble, cela ne fonctionne toujours pas. –

Lorsque j'essaie le code dans Firefox et Chrome, ils ont exactement la même apparence. Cependant, il n'y a rien dans le code qui pourrait centrer l'image de fond. – Guffa

Avez-vous oublié de déclarer la position d'arrière-plan? Rappelez-vous que l'alignement du texte n'aligne pas l'arrière-plan. Comme une seule déclaration, il semble que vous êtes après:

background: #000000 url('p_bg_75.jpg') repeat-y fixed top center;

Je ne peux pas dire par votre question de savoir si vous voulez vraiment l'attachement à « fixe », mais en fonction de vos captures d'écran, je doute il. Donc, vous pouvez probablement laisser tomber cela de la déclaration aussi.

Source

2009-04-13 08:37:17 ozan

comme conseillé ci-dessus, essayez:

background-position: center;

coller un extrait du code HTML afin que nous puissions tester dans Safari/Chrome.

Source

2009-06-19 15:53:24

Normalement, avec un site aligné au centre, il est préférable d'utiliser 2 images d'arrière-plan. Une image de fond est placée sur le CORPS et un autre arrière-plan est placé sur le DIV aligné au centre.

Si le corps n'a pas de marge comme dans votre exemple et que votre navigateur est plus petit que 1344px, vous ne verrez plus l'arrière-plan du corps. Pour s'assurer que dans les cas où le contenu est court, il n'y a pas d'effets étranges, vous pouvez donner au DIV une hauteur minimale de 100%.

ont peut-être un coup d'oeil sur ce site où cette technique est également utilisée: http://www.prgs.nl/

Source

2009-06-20 17:08:57 Michiel

Problème de positionnement de l'image de fond

Répondre

Questions connexes