Discussion :

[JefReb]

Bonjour à tous,
Je n'arrive pas à comprendre et à coder correctement le css. J'ai essayé plusieurs paramètres, mais sans succès.
J'ai une image de fond pour la page et un bandeau-header, tous deux large de 1024px.
Je souhaiterai que lorsque la largeur de la fenêtre du navigateur diminue l'image du bandeau diminue aussi mais reste proportionnelle.
Je comprends bien que si c'est trop petit les textes seront difficiles à lire. Mais j'aimerai comprendre le mécanisme de ce qui est possible.

Code css :

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
html        { background-color:#fff; }         
 
html, body 	{ height:100%;
              margin:0; padding:0;
              font-family:"Times New Roman", Times, verdana, arial,sans-serif;
              font-size:100%;              
			  font-weight:normal;           
			}
#page       { max-width:1024px;                
              width:100%;                      
              height:800px; 
              margin:0 auto;                  
              background: url(<a href="http://www.jefrebaud.fr/img/bb_background.jpg" target="_blank">http://www.jefrebaud.fr/img/bb_background.jpg</a>) repeat-y center center fixed;
			  background-size:1024px auto;
			}  
header      { max-width:1024px; width:100%; 
              max-height:200px; height:100%;                       
              margin:0; padding:0;                       
              background:url(<a href="http://www.jefrebaud.fr/img/bb_masthead.png" target="_blank">http://www.jefrebaud.fr/img/bb_masthead.png</a>) top center fixed no-repeat;  
              background-size:1024px 200px;
            }
@media screen and (max-width: 768px){			
#page       { max-width:768px; }
}

Code html :

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

1
2
3
4
<div id="page">
	<header>
	</header>
</div>

voir sur codepen en diminuant et agrandissant la largeur:
http://codepen.io/JefReb/pen/zkoni

Merci à ceux qui prendront de leur temps pour me répondre.

[Muchos]

La propriété BACKGROUND-SIZE me semble toute désignée. Ex :

Code css :

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

1
2
3
4
5
6
7
header {
  height: 200px;
  background: url(http://www.jefrebaud.fr/img/bb_masthead.png);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
}

[JefReb]

Merci Muchos,
J'avais pourtant essayé divers paramètres, content, cover, %. Et là ça marche. Encore merci