Menu

Redimensionner image [Résolu/Fermé]

Messages postés
69
Date d'inscription
samedi 29 juin 2013
Statut
Membre
Dernière intervention
10 mai 2016
-
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
Afficher la suite 

1 réponse

Meilleure réponse
Messages postés
2849
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
21 mars 2019
470
3
Merci
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.

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 55035 internautes nous ont dit merci ce mois-ci

paulblassier
Messages postés
69
Date d'inscription
samedi 29 juin 2013
Statut
Membre
Dernière intervention
10 mai 2016
1 -
MERCI BEAUCOUP, et excusez mi du retard :)
animostab
Messages postés
2849
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
21 mars 2019
470 -
ok tu peux mettre le sujet en résolu