Фоновая картинка на всё разрешение окна?

116
17 января 2020, 00:20

Как это делается или как называется ? Пример-http://vse-gotovo.com/

Когда заходишь на сайт там на весь фон окна у меня их картинка

Answer 1

body { 
    background-image: url(https://compass-ssl.xbox.com/assets/12/02/120203e0-f7d1-4731-9a6c-be3c458c6ce9.jpg?n=Resident-Evil-2_GLP-Page-Hero-1084_1920x600.jpg); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position-x: center; 
    background-position-y: center; 
    background-attachment: fixed; 
    min-height: 100vh; 
}

Тут указываем источник картинки ссылку или путь в скобках.

background-image: url(https://compass-ssl.xbox.com/assets/12/02/120203e0-f7d1-4731-9a6c-be3c458c6ce9.jpg?n=Resident-Evil-2_GLP-Page-Hero-1084_1920x600.jpg);

Тут указываем размер. cover - картинка маштабируется на весь экран/блок сохроняя свои пропорции.

background-size: cover;

Тут указываем повторяется или нет.

background-repeat: no-repeat;

Тут указываем выравнивание по Х и У. В данном случае указано center. Но, можно указать в %.

background-position-x: center;
background-position-y: center;

Фиксируем

background-attachment: fixed;
Answer 2

html, 
body { 
  margin: 0; 
  padding: 0; 
} 
 
.block { 
  height: 100vh; 
  background-image: url("http://placeimg.com/500/300/an"); 
  background-size: cover; 
  background-attachment: fixed; 
} 
 
.content { 
  margin: 0 auto; 
  width: 50%; 
  min-height: 200px; 
  background: rgba(0, 0, 0, 0.5); 
} 
.block1 {min-height: 400px;}
<div class="block"> 
  <div class="content"> 
  </div> 
</div> 
<div class="block1">следующий блок</div>

READ ALSO
Как написвть вложенный клас в sass

Как написвть вложенный клас в sass

Здраствуйте! Как мне написать этот код на sass?

132
State React и props. Теряется при export

State React и props. Теряется при export

Как правильно через пропс передать состояние?Подскажите плизМодал открывается, но не закрывается + я уверен что не так это прокидывается

114