L'image de fond ne s'étire pas complètement

Je viens de lancer un site Web l'autre jour et je pensais qu'il était exempt d'erreurs CSS bizarres, mais apparemment ce n'est pas le cas. Ce que j'essaie de faire ici, c'est d'étirer une image pour qu'elle corresponde à la taille et à la largeur de la page.L'image de fond ne s'étire pas complètement

Le problème: J'ai le balisage suivant:

<img src="images/night_sky7.jpg" class="stretch" />

et le CSS suivant lui est appliqué:

img.stretch { 
left: 0px; 
position: absolute; 
top: 0px; 
width: 100%; 
z-index: 0; 
}

Cela fonctionne très bien sur mon 17.1' ordinateur portable avec 1440x900 résolution , mais j'ai remarqué que cela ne fonctionne pas correctement sur d'autres résolutions d'écran. Qu'est-ce qui se passe, c'est que l'arrière-plan ne s'étend pas au fond, mais juste en dessous du bas ou même au milieu de la page.

Maintenant, j'ai essayé de changer beaucoup de CSS, mais je n'arrive pas à l'étirer complètement.

Toute aide est appréciée.

L'URL que vous pourriez tester si vous voulez est: http://bit.ly/eOEzXJ.

Si nécessaire, je peux faire aucune de ces choses:

Changer l'image dans Photoshop pour toute dimension
Ajouter une JS ou CSS, mais la hauteur: 100%; solution ne fonctionne pas, au moins, pas ce que je peux voir

Source

2010-12-07 Evert

Vous pouvez reformuler cela. Il semblait que vous essayiez de rendre le fond d'un élément extensible, ce qui ne peut pas être fait avec CSS. – meagar

vous ne devriez pas étirer une image que vous devriez toujours utiliser la répétition de fond si vous voulez répéter, – kobe

@gov, merci pour votre commentaire! Cependant, si vous regardez le lien, vous pouvez voir que je n'essaie pas de répéter une image, mais d'étirer une image pour qu'elle corresponde à la page. L'image doit être suffisamment grande pour le faire. – Evert

Essayez de faire ceci:

body { 
    height: 100%; 
} 

img.stretch { 
    // your stuff 
    height: 100% 
}

Je remarqué que vous avez également une classe enveloppe CSS. Vous auriez besoin aussi d'ajouter ceci:

#wrapper { 
    height: 100%; 
}

Source

2010-12-07 16:39:08

la hauteur de votre image est mise à l'échelle pour conserver le format d'origine. Cela ne sera souvent pas assez grand pour de longs documents. Vous pourriez envisager de faire fondre l'image dans une couleur plate vers le bas. – meagar

Merci pour la réponse :-) Cela ne semble pas résoudre le problème, malheureusement .. – Evert

Chuck sur la bonne voie, mais vous pourriez avoir besoin d'ajouter

html { 
    height: 100%; 
}

ainsi.

Source

2010-12-07 16:41:12

Vous pouvez simplement définir la hauteur et la largeur de la balise img en html à 100%

<img src="images/night_sky7.jpg" class="stretch" width="100%" height="100%"/>

Source

2010-12-07 21:03:33 Kobby

L'image de fond ne s'étire pas complètement

Répondre

Questions connexes