CSS et différentes tailles de moniteur?

Je fais un site web (WIP). J'ai rencontré des problèmes CSS, j'espère que vous pourrez m'aider.CSS et différentes tailles de moniteur?

Ma situation actuelle:

Je h l'image, laisse appelé « bg.png » avec la largeur au sujet 2500px, et au centre de l'image d'arrière-plan a mon logo.
Mon site Web doit cibler tous les utilisateurs (de 800 x 600 à 2400 x XXX).

Mes problèmes:

Comment puis-je centralisent l'image de fond (bg.png), de sorte que le logo toujours positionné dans le centré (horizontalement) de taille différente de l'écran des moniteurs?

Source

2010-06-11 studdler

En tant que nouvel utilisateur, assurez-vous de cliquer sur la coche «Accepter» si une réponse répond à vos besoins. –

Question bien indiquée par le chemin (situation actuelle -> problème/comportement souhaité). –

Vous devriez savoir que certains écrans sont plus grands que 2500. Et que vous pouvez développer quelque chose sur plusieurs écrans aussi. Donc 2500 n'est pas une limite assez grande. – Arkh

body { background: url('bg.png') 50% 50% no-repeat; }

Cela placera l'image à pleine grandeur au centre de la page, et l'utilisateur verra autant de cette image de fond que leur permis de la fenêtre du navigateur.

Source

2010-06-11 07:31:13

merci, cela fonctionne. Mais je dois attendre encore 9 minutes pour accepter une réponse. Merci Graphain – studdler

Bienvenue studdler, heureux de vous aider. Cela vaut la peine de vous inscrire afin de pouvoir suivre vos questions et vos réponses au fil du temps et d'encourager les autres à vous aider. –

Noté avec des remerciements :) – studdler

Si c'était juste un fichier logo que vous pouvez utiliser

<style> 
img 
{ 
    position:absolute; 
    left:-50%; 
    top:-50%; 
    z-index:-1; 
} 
</style>

Source

2010-06-11 07:34:48

Ceci ne centre pas exactement l'image. La gauche de l'image est centrée, mais le centre de l'image n'est pas centré. – strager

Pour ce faire, ajoutez margin-left: -50%, margin-top: -50%. – Sjoerd

#your_img { 
    width: 2500px; //In example 2500px 
    margin: 50%; 
    padding: -1250px; // 2500 divided by 2 
}

Il probablement ne fonctionne pas sur Internet Explorer, mais vous pouvez utiliser un petit hack avec position: absolute, comme ci-dessus

Source

2010-06-11 08:23:44 user170609

#your_img { 

    position: absolute; 
    left: 50%; 
    margin: -1250px; 
}

Cette solution est nécessaire lorsque vous placez l'élément img dans une autre boîte. Mais soyez prudent - cela pourrait changer la taille de la boîte des parents.

Source

2010-06-11 08:26:55 user170609

CSS et différentes tailles de moniteur?

Répondre

Questions connexes