Centrer body et background en CSS, sans largeur fixe [Fermé]

Signaler
-
 capsule -
Bonjour à tous,

Comme dit dans le titre, je cherche à centrer mon body dans ma page, avec le background qui va avec. Ensuite mettre un bandeau noir de chaque côté.

J'essaie de faire une présentation élastique, c'est à dire que la taille du body s'adapte à la taille de l'écran, mais avec une largeur max (1000px). (Une fois que le body atteint 1000px, ce sont les bandeau qui devraient s'élargir)

C'est la première fois que j'utilise HTML et CSS, je ne sais pas si mon écriture est dans le règles de l'art. Jusque là j'avais à peu près réussi à faire ce que je voulais, mais j'avoue que je bute depuis hier sur ce problème, c'est pourquoi je me permet de solliciter
votre aide.


Voilà ce que j'ai dans mon CSS pour l'instant. (Notez que j'ai essayé deux solutions différentes, les lignes qui sont précédées des // sont inactives)

body {
width:80%;
margin-left: 10%;
max-width: 1000px;

//position: absolute;
//left:50%;
//width:80%;
//margin-left:-40%;
//max-width:1000px;

background-color :#000000;
background-image: url("../image/fond.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
background-size: 80% 100%;
}

Avec ces deux solutions tout va bien si la fenêtre fait moins de 1200px, mais quand elle les dépasse, le background continue de s'élargir au lieu de stopper à 1000px, et le body se décentre...

Vous pouvez le constater directement en allant voir le site :
www.clementlassalle.fr

Je vous remercie par avance...

2 réponses

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
650
salut
en fait le mieux : il faut passer par un div contener

html
<body>
<div id="contener"> tout le contenu</div>
</body>

css
body{
margin:0;
background:black;
}
#contener {
margin:0 auto;
width:80%;
max-width:1000px;
background: url("image.jpg");
} 


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.
La boîte dans la boîte !

Tu as parfaitement bien répondu à ce que je demandais, tout pile dans les clous, sauf que j'ai envie de chipoter :

J'aurais aimé que le bas du background s'adapte à la fenêtre et non au contenu... Une astuce ? Avec cette réponse là ce serait le top du top !

Je mets la nouvelle version en ligne pour que tu vois ce que je veux dire: www.clementlassalle.fr

Dans tous les cas un grand grand merci à toi animostab !
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
650
a ce moment tu fais

html{
height:100%; margin:0;
}
body{
height:100%; margin:0;
overflow:visible;
}
    
#contener {
margin:0 auto;
width:80%;
max-width:1000px;
height:auto;
min-height:100%;
background: url("image.jpg");
}


et voila
>
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019

Super !