28172 sujets

CSS et mise en forme, CSS3

Image de fond rebelle

Bonsoir,
je cherche à mettre une image de fond dans un bloc conteneur général.
En dehors de toute considération esthétique, avis perso, etc... (disons qu'il s'agit d'un exercice)
j'ai un problème car l'image dépasse verticalement du bloc.
J'ai tout essayé (enfin surement pas mais c'est mon sentiment...) et franchement je ne trouve pas de solution.
Si quelqu'un peut me secourir ce serait sympa.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>accueil</title>

<style type="text/css">
.principal{
margin-left: auto;
margin-right: auto;
width: 100%;
max-width:1100px;
min-width:700px;
border: solid 1px green;
}

.contenu{
margin-left: auto;
margin-right: auto;
width: 50%;
height: 400px;
margin-top: 50px;
margin-bottom:50px;
max-width:550px;
min-width:350px;
border: solid 1px red;
}
</style>
</head>

<body>
<div class="principal">
<img class="principal" style="position:absolute; z-index:-1; height:100%;" src="Photos/fond.jpg" alt="" >
<div class="contenu">
</div>
</div>
</body>
</html>


Merci d'avance
Philippe
Salut,

Pour une image de fond utilise plutôt la propriété background-image. 

.principal{ 
margin: auto; 
width: 100%; 
max-width:1100px; 
min-width:700px; 
border: solid 1px green; 
background-image: url(Photos/fond.jpg);
}

Et dans tout les cas tu as placé ton <img> en absolu. Ce qui fait qu'elle ne se base plus sur la div qui est censée la contenir.

A plus
salut,
merci pour ta réponse,
1- je n'utilise pas background-image car dans ce cas l'image ne se redimensionne pas avec la taille de l'affichage et l'image est soit tronquée soir répétée. C'est précisément la raison pour laquelle j'utilise une image de fond.
2- je met l'image en position absolute afin qu'elle sorte du flux, sinon les autres blocs se mettent à la suite et ne vont pas se superposer sur l'image.

mon problème se situe uniquement sur la taille de l'image qui pour une raison que je ne comprend pas est différente du bloc "principal" bien que je lui affecte cette classe Smiley confus Smiley confus Smiley confus

Merci si vous avez d'autres idées, je m'arrache les cheveux...

A+
Philippe
ha
il faut que la div qui contient ton image (en position 'absolute') soit en position relative.
désolé, toujours pas, si je met le .principal en position relative, l'image s'affiche avant les blocs et ne se superpose plus Smiley biggol

je fatigue

A+
Philippe
Modifié par filtep (18 Feb 2011 - 00:31)
il faut aussi que tu ajoutes top: 0; et left: 0 pour positionner ton image dans la div.
Je ne comprend pas pourquoi tu utilises la class "principale" pour l image et pour le conteneur et ensuite tu rajoutes du style en ligne sur l'image.

tu devras étudier ce cours sur le positionnement
Bonjour,

- Ne pas donner la même classe au conteneur et à l'image. C'est tendre le bâton pour se faire battre.
- Se familiariser un peu plus avec le positionnement CSS peut aider, effectivement.
- Les hauteurs absolues (height:400px) c'est le mal.
- Attention aux mises en page avec une image de fond qui prend toute la hauteur ou toute la largeur (ou les deux) du viewport (zone de visualisation du navigateur). Le viewport peut faire 300x400px, 1680x600px ou autre dimensions et rapports farfelus et imprédictibles.
- Par convention, on utilise plutôt des identifiants (id) que des classes (class) pour les principaux éléments de la page.

Tout ça est très généraliste. N'ayant aucune idée du contenu et du résultat voulu, j'aurais du mal à donner des conseils plus précis qui permettraient d'arriver à une mise en page correcte et robuste.
Sujet clos
Aller à