Redimensionner image
Résolu
paulblassier
Messages postés
83
Statut
Membre
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
Voilà j'ai fais ma maquette de mon site sur photoshop et j'aimerais que ma maquette face exactement la taille de la page internet ( je sais pas ci vous voyez ce que je veux dire ... )
En gros quand j'importe mon fond ou logo par exemple il est 10x trop grand....
Y a t-il un code à mettre dans le CSS pour que ça se redimensionne directement par rapport au fond ou un truc comme ça ? ...
Désolé ci je m'explique mâl ça fait longtemps que je n'est pas fais de HTML/CSS ...
Je poste une photo qui explique mon soucis
code HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Mon site</title>
</head>
<body>
<section>
<img src="logo.png" alt="logo" id="forme" /> </a>
</section>
</body>
</html>
Code CSS :
body
{
background: url("fond.jpg") no-repeat;
}
#forme
{
position: absolute;
right: 0px;
bottom: 0px;
z-index: 1;
}
[URL=http://www.hostingpics.net/viewer.php?id=473948bla.png][IMG]http://img15.hostingpics.net/pics/473948bla.png[/IMG][/URL]
[URL=http://www.hostingpics.net/viewer.php?id=712085bla2.png][IMG]http://img15.hostingpics.net/pics/712085bla2.png[/IMG][/URL]
Merci d'avance pour vos réponses :)
Codialement Paul
Voilà j'ai fais ma maquette de mon site sur photoshop et j'aimerais que ma maquette face exactement la taille de la page internet ( je sais pas ci vous voyez ce que je veux dire ... )
En gros quand j'importe mon fond ou logo par exemple il est 10x trop grand....
Y a t-il un code à mettre dans le CSS pour que ça se redimensionne directement par rapport au fond ou un truc comme ça ? ...
Désolé ci je m'explique mâl ça fait longtemps que je n'est pas fais de HTML/CSS ...
Je poste une photo qui explique mon soucis
code HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Mon site</title>
</head>
<body>
<section>
<img src="logo.png" alt="logo" id="forme" /> </a>
</section>
</body>
</html>
Code CSS :
body
{
background: url("fond.jpg") no-repeat;
}
#forme
{
position: absolute;
right: 0px;
bottom: 0px;
z-index: 1;
}
[URL=http://www.hostingpics.net/viewer.php?id=473948bla.png][IMG]http://img15.hostingpics.net/pics/473948bla.png[/IMG][/URL]
[URL=http://www.hostingpics.net/viewer.php?id=712085bla2.png][IMG]http://img15.hostingpics.net/pics/712085bla2.png[/IMG][/URL]
Merci d'avance pour vos réponses :)
Codialement Paul
1 réponse
-
Salut
Bien que je n'ai pas bien compris les photos postées voila un exemple de taille et positionnement
pour le fond si ton image de fond fait par exemple 500px X 300px et que tu veux la positionner
le css
body {
background:url(fond.jpg) no-repeat;
background-position:50% 70%; /*a modifier selon ton gout*/
background-size:500px 300px; /*largeur hauteur*/
}
#forme {
margin: Xpx auto; /*Xpx : marge depuis le haut , auto : centré*/
width:largeur logo en px;
height:hauteur logo en px;
}
#forme img {
width:100%; /*l'image rempli le width de #forme*/
}
le html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Mon site</title>
</head>
<body>
<section id="forme">
<img src="logo.png" alt="logo" />
</section>
</body>
</html>
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
