How to make a site header rubber, to adapt to different browser sizes.

HTML

<div class="header"> </div>

CSS

 .header{ background: url(../img/header.jpg); }

Closed due to the fact that the issue is too general for participants Yuri , Denis Bubnov , ߊߚߤߘ , fori1ton , user194374 11 Feb '17 at 6:55 .

Please correct the question so that it describes the specific problem with sufficient detail to determine the appropriate answer. Do not ask a few questions at once. See “How to ask a good question?” For clarification. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • width: 100vw; ? - SLy_huh
  • one
    Specify the question. What does it mean “to adapt”? If we are talking about the size of the block, set the width and height in CSS as a percentage of the size of the parent element. If about a background image, then use background-size , background-repeat . If you want different styles for different screen sizes, use media queries. - check1st

3 answers 3

 header { width: 100%; min-height: 150px; background-color: transparent; background-image: url("http://www.avionindia.com/images/Header.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; } 
 <header></header>

  • In width, I would use % - Yuri
  • background-size: cover; - draws a background image in proportion to the container, background-position: center; - center background, repeat-repeat: no-repeat; prohibits repeating the image - Yuriy Chaban
  • So what? Why did you tell me this? I'm talking about the width of the menu. In chrome, vw takes a scroll bar for width and a horizontal scroll may appear - Yuri
  • then do overflow: hidden; to cut off all unnecessary and make content the size of the device - Yuriy Chaban
  • If so, then you need to use overflow-x: hidden and this is not always convenient - Yuri

This is how it should work:

 .header{ background: url(../img/header.jpg); width: 100%; height: auto; }
  • This method does not work. There is a picture, but no changes occur when the screen changes - FLWRZ4U
 .header { background: url(../img/header.jpg) no-repeat center; backgriund-size: cover; height: 100vh; width: 100%; }

height: 100vh - sets the height equal to the height of the window

  • And why a hat height equal to the height of the window? About: - SLy_huh
  • one
    Otherwise, the question does not make sense. If you do not need - do not use. - Constantine Tretyakoff
  • This method does not work. There is a picture, but no changes occur when the screen changes - FLWRZ4U
  • It works only if you put the img tag, insert a picture there and assign the class header - FLWRZ4U
  • one
    Rubber header. Nothing is not talking about? - FLWRZ4U