Image "Retina" sur CSS Résolu

Question

Bonjour à tous,
J'ai mon fichier style.css et je voudrais mettre une image de résolution "Retina" (x2), j'ai donc mon image en 280 x 280, mais je dois la réduire à 140 x 140.
Voici la partie du code :

.pic-bg {
 background: url("../images/pic-bg.png") no-repeat;
 width: 140px;
 height: 140px;
 position: absolute;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 display: table-cell;
 margin: auto;
 vertical-align: middle;
 padding: 10px;
}
 
Or, l'image (avec le code ci-dessus) va sortir du cadre ...
Quelle syntaxe dois-je utiliser ?

Dans un fichier .html, je sais que c'est :
<img src="../images/pic-bg.jpg" alt="xxx" width="140" height="140">

Merci beaucoup :)
#ThinkDifferent

ccmga · Answer

C'est possible uniquement en CSS3 avec la propriété background-size

Ex : .pic-bg { background-size:140px 140px; }

Utilisateur anonyme · Answer

Hum... Mais ça ne marche pas :/

Faut t'il modifier width et height ?
#ThinkDifferent

ccmga · Answer

Tu as oublié d'enlever le } avec la propriété background-size

Utilisateur anonyme · Answer

Ah oui ! :D

Mais la propriété n'a pas d'effet ?!

.pic-bg { background-size:140px 140px;
	background: url("../images/pic-bg.png") no-repeat;
	width: 140px;
	height: 140px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	display: table-cell;
	margin: auto;
	vertical-align: middle;
	padding: 10px;
}

Utilisateur anonyme · Answer

Ah merci bcp, j'ai trouvé sur le site ! :D

.pic-bg {
	background: url("../images/pic-bg.png") no-repeat;
        background-size: 140px 140px;
	width: 140px;
	height: 140px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	display: table-cell;
	margin: auto;
	vertical-align: middle;
	padding: 10px;
}

Image "Retina" sur CSS

5 réponses

Votre réponse

Discussions similaires