Redimensionner image
Résolu
paulblassier
Messages postés
69
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 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
A voir également:
- Redimensionner image css
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Légender une image - Guide
- Image gratuite - Guide
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.
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.
paulblassier
Messages postés
69
Date d'inscription
Statut
Membre
Dernière intervention
1
MERCI BEAUCOUP, et excusez mi du retard :)
animostab
Messages postés
2829
Date d'inscription
Statut
Membre
Dernière intervention
738
ok tu peux mettre le sujet en résolu