image CSS Redimensionnement

Je possède ce code CSS:image CSS Redimensionnement

<style> 
    body { 
    position:absolute; 
    background-image: url(art/c11.jpg); 
    width:100%; 
    height:100%; 
    } 
</style>

Comme je l'ai lu sur le net, je prévu que ce serait redimensionner l'image d'arrière-plan et l'adapter à la fenêtre du navigateur.

Mais non. Je pense que je fais évidemment quelque chose de mal (je ne connais pas assez les CSS). Des conseils?

MISE À JOUR:

ajouter l'exemple de trou (ne fonctionne pas):

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>No Title</title> 
<style type="text/css"> 
    body { 
    position:absolute; 
    background-image:url(art/c11.jpg); 
    background-size:100%; 
    background-repeat: no-repeat; 
    width:100%; 
    height:100%; 
    } 
</style> 
</head> 
<body > 
</body> 
</html>

Source

2010-07-20 mRt

Quelle est la raison pour laquelle vous positionnez votre élément de carrosserie?Cela ne devrait pas être nécessaire, mais c'est généralement une bonne idée de définir la marge et le remplissage du corps à 0. Cela normalise certains paramètres par défaut des navigateurs. – jasongetsdown

Si vous allez faire ce travail cross browser, vous êtes mieux de mettre une image sur la page, puis envelopper tout votre contenu une DIV qui est posée en haut. Par exemple.

CSS

#background { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

#content { 
    position: relative; 
    z-index: 1; 
}

Si vous envisagez de soutenir IE6, puis ajoutez cet extrait:

<!--[if IE 6]> 
    <style type="text/css"> 
    html { 
     overflow-y: hidden; 
    } 

    body { 
     overflow-y: auto; 
    } 

    #background { 
     position:absolute; 
     z-index:-1; 
    } 

    #content { 
     position:static; 
    } 
    </style> 
<![endif]-->

HTML

<img id="background" src="art/c11.jpg" alt="" /> 

<div id="content"> 
    Your content 
</div>

Code in action.

Source

2010-07-20 03:15:17

Vous pouvez utiliser la propriété CSS3 de background-size:100% mais le soutien de cette propriété n'est pas à travers le encore conseil et gagné » t travailler dans les anciens navigateurs. Pour réaliser ce que vous voulez, vous avez besoin d'un tas de hacks pour le faire fonctionner. Il y a un certain nombre de blogs comme celui-ci one qui va vous montrer ce que vous devez faire. Je ne recommande pas cela car si vous avez une grande image/connexion lente, vous verrez la charge de l'image. Si l'image n'est pas de la meilleure qualité, elle ne sera pas bonne si elle est étendue sur un écran ou dans une résolution différente.

Source

2010-07-20 02:53:22 amurra

Je ne sais pas pourquoi, mais aucun des exemples ne fonctionne pour moi ... Merci quand même. – mRt

Ajoutez la propriété background-repeat.

le code fini devrait ressembler à ceci:

 
    body { 
    position:absolute; 
    background-image: url(art/c11.jpg); 
    background-size:100%; 
    background-repeat: no-repeat; 
    width:100%; 
    height:100%; 
    }

Source

2010-07-20 02:53:24

Je ne sais pas pourquoi, mais aucun des exemples ne fonctionne pour moi ... Merci quand même. – mRt

juste mis à jour le code avec la suggestion d'amurra. Est-ce que ça marche maintenant? –

Non. En fait, avec ce code, il n'affiche rien. – mRt

Je ne pense qu'il ya un moyen d'étirer ou de contrôler la taille d'une image d'arrière-plan en utilisant CSS. Cependant, vous pouvez utiliser le background-repeat background-position, background-attachment et Porperties pour obtenir un résultat alternatif ..

ou vous pouvez utiliser un peu de JavaScript mettre l'image dans une couche z-index inférieur et définir la couche comme vous backgournd, mais c'est un peu Hacking là

Source

2010-07-20 02:56:32

En utilisant CSS3, vous pouvez obtenir l'image en perspective redimensionnez,

html { 
background: url(bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

Cela fonctionne dans tous les navigateurs et IE9 +. Les filtres suivants fonctionnent également dans ie7 et ie8.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";

Source

2012-12-27 04:53:58 Gopalch

image CSS Redimensionnement

Répondre

Questions connexes