Discussion :

[tatutatu2009]

Bonsoir tout le monde,
j'espère que quelqu'un pourra m'aider, je ne suis pas excellent coté programmation , j'ai toujours appris sur internet petit à petit
j'ai une bannière en haut au milieu avec ce code css, la bannière est au milieu je souhaite qu'elle soit sur toute la largeur de la page et s'adapte au différents tailles d'écrans, qu'est ce qu'il faut changer svp, merci beaucoup pour votre aide
(j'ai deux bannière différentes une pour la page d'accueil 980x273 et une commune pour les pages du site 980x164 , ces deux là je souhaite qu'elles soient sur toute la largeur de la page)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.header {
    background: transparent url("../img/header-bg.png") no-repeat scroll center top;
    height: 166px;
    margin: 10px auto 0px;
    width: auto;
}
.home .header .main {
    position: relative;
    height: 274px;
    margin: 0px auto;
    padding-top: 0px;
    z-index: 99;
    background: transparent none repeat scroll 0% 0%;
}
.header .main {
    background: transparent url("../img/header-main-bg.jpg") no-repeat scroll center top;
    width: 980px;
    height: 170px;
    margin: 0px auto;
    position: relative;
    z-index: 3;
}

[Invité]

Bonjour,

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
width:100%;
background-size:cover;

La hauteur reste fixe.

N.B. Il est possible d'adapter la hauteur proportionnellement à la largeur en JavaScript.

[tatutatu2009]

Bonjour Mr,
Merci pour votre aide, malheureusement je ne suis pas top en programmation :/
Svp j'ai ajouté :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
width:100%;
background-size:cover;

dans

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.header {
    background: transparent url("../img/header-bg.png") no-repeat scroll center top;
    height: 166px;
    margin: 10px auto 0px;
    width: auto;
}

mais ca n'a rien donné, est ce que c'est la bas qu'il faut l'ajouté ou dans un autre bloc ? Merci

[tatutatu2009]

Bonjour Mr
j'ai ajouté ce code sur mon pc c'est bon pour l'affichage merci sauf que sur un ecran plus petit j'ai un décalage, sachant que j'ai une image pour le fond plus un menu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	top: -290px;
	background-size:cover;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
@media only screen and (max-width: 1020px) {
.header, .home .header { background: none; }
.header .main {
	background: none;
	height: 129px;
}
.home .header, .home .header .main { height: 214px; }
.header #gallery, .header #bg-interne { top: -214px; }
.header #bg-interne { top: -129px; }
.header #gallery img, .header #bg-interne img { width: 100%; }
.home .menu {
	top: 148px;
	margin: 0 5px;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
@media only screen and (max-width: 782px) {
body, .home { background: #fff; }
.header .main, .header #gallery, .supercontainer .container, .footer .main, .header #bg-interne {
	padding: 0 10px;
	max-width: 460px;
	width: 100%;
}
.header, .home .header { margin: 0; }
.header, .header .main, .home .header, .home .header .main {
	height: auto;
	background-image: none;
}
.header .main { border-bottom: 3px solid #56B3AA; }
.header #gallery, .header #bg-interne { display: none; }
.logo {
	display: block;
	margin: 0 0 10px;
}

Cordialement