Background commun à plusieurs sections

**jujumomo75** · 26/04/2019, 01h36

Bonjour,

Ma question va peut être vous paraitre bête, mais je me lance quand même (en PJ vous pouvez trouver le html et le fichier css en question).

Voilà, j'ai suivi des cours et je passe du temps à essayer de partir de maquettes tests et arriver au même résultat en codant.
Mais je bloque sur un élément depuis ce matin: dans les fichiers joints, j'ai un background global (niveau body, une couleur de fond), et j'aimerai que la background image de la section 1 serve aussi de fond au header.
J'ai essayé de créer une div ou section commune au couple header/section 1, et de mettre le background sur cette div globale, rien n'y fait.

J'ai dû passer à côté d'un truc mais je n'arrive pas à trouver.
Je vous laisse aussi le résultat attendu pour que vous compreniez mieux.

Merci à tous!

Invité · 26/04/2019, 09h10

Bonjour, et bienvenu sur DVP,

on n'ouvre pas les fichiers joints.

Merci de copier-coller les codes * dans le contenu du message, en ajoutant les balises [CODE] (icône # du menu wysiwyg)

* nécessaires et suffisants.

**jujumomo75** · 26/04/2019, 11h00

Bonjour,

Ok merci pour la réponse.

Voici mon code HTML :

Code HTML :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
 
<html>
<head>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/tuto2.css" rel="stylesheet">
</head>
<body>
 
<!-- Header -->
 
<header>
  	<div class="row">
    	<div class="col-md-2">
      		<img src="assets/img/logo.png">
    	</div>  
   		<div class="offset-6 col-md-4">
    		<div class="row nav">
    			<div class="col-md-3">
    			Accueil
    			</div>
    			<div class="col-md-3">
    			Nos cours
    			</div>
    			<div class="col-md-3">
    			FAQ
    			</div>
    			<div class="col-md-3">
    			Contact
    			</div>
    		</div>
    	</div>
  	</div>
</header>
 
<!-- Section 1 -->
<section id="section_one">
	<div class="head col-md-12">
		<p class="a">FITNESS IN A CAN<span>/</span></p>
		<p class="b">YES YOU CAN<span>/</span></p>
	</div>
</section>*
 
 
<footer>
</footer>
 
</body>
 
</html>

Et mon CSS :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
.head
{
	background: url('../assets/img/hero.jpg');
	height: 890px;
  	background-repeat: no-repeat;
  	background-attachment: scroll;
  	background-size: cover;
    background-position: top;
}
 
body 
{
  	background-color:  #fd634e;
  	height: 5760px;
}
 
@font-face 
{ 
	font-family: Myriad; 
	src: url('Myriad-Pro_31655.ttf'); 
}
 
.nav
{
	font-size: 13px;
	font-family: Myriad, Arial;
	text-transform: uppercase;
	color: #FFFFFF;
	text-align: center;
}
 
.a
{
	padding-top: 40%;
	padding-left: 8%;
	font-size: 40px;
	color: white;
	font-family: Arial;
}
 
.b
{
	margin-top: -1.5%;
	padding-left: 24%;
	font-size: 15px;
	color: white;
	font-family: Arial;
 
}
 
.a span
{
	color: green;
}
 
.b span
{
	color: red;
}
 
header
{
	padding-left: 25px;
}

Merci!