Redimensionner l'image d'arrière-plan en HTML pour un modèle réactif

Je m'exerce à créer un site Web réactif. Mon problème est de savoir comment redimensionner l'image en fonction de la résolution de la page Web. Voici mon code:Redimensionner l'image d'arrière-plan en HTML pour un modèle réactif

<html> 
<head> 
<meta charset="utf-8"> 
<style> 
body { 
    background: url("streetlight.png"); 
    width: 100%; 
    height: 100px; 
    background-attachment: fixed; 
    position: absolute; 
    background-repeat: no-repeat; 
} 
</style> 
</head> 
<body> 

</body> 
</html>

Source

2014-05-21 thenewbie

Vous regardant l'image d'arrière-plan? ou tag IMG? – ShibinRagh

taille de fond: 100% 100%; –

@ShibinRagh image de fond – thenewbie

Essayez cette

body{ 
    background: url(streetlight.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

Source

2014-05-21 06:27:29 ShibinRagh

oui j'étais juste en train de poster cette solution parce que j'ai aussi fait face au même problème pendant que j'essayais de créer des modèles réactifs. C'est pourquoi je me souviens de la solution – Nothing

L'image correspond à toute la page elle ne se redimensionne pas en fonction de la résolution du navigateur. – thenewbie

Redimensionner l'image d'arrière-plan en HTML pour un modèle réactif

Répondre

Questions connexes