как сделать изображение за один раз на всю страницу

Question

У меня проблема в css.На моей странице я хочу добавить фоновое изображение к странице, которая растягивается до полной высоты, изменяя ее ширину (ширина не обязательно должна быть полной).Я считаю, легко сделать это с помощью тега фона, но проблема в том, что я хочу придать непрозрачность изображению, поэтому мне нужно иметь два div, один с изображением, а другой с содержанием и изменением положения.Но когда я делаю это, изображение имеет только высоту порта просмотра, но я хочу, чтобы он был равен полной странице.

Может кто-нибудь, пожалуйста, помогите мне.

Любая помощь будетоценили.

Спасибо.

html {
  min-height: 100%;
  position: relative;
}

body,
#back-img,
#content {
  margin: 0;
  padding: 0;
  height: 100%
}

#back-img {
  background: url(https://youngisland.com/wp-content/uploads/2018/01/aerial-optimized2.jpg);
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}

#content {
  aheight: 1000px;
  position: absolute;
}

<div id="content">
  <h1>Title</h1>
  <h2 style="font-size:50px">MORE</h2>
</div>
<div id="back-img"></div>

Answer 1

Используйте для вашего изображения: background-size: cover;

Answer 2

Я не уверен, что это ваша проблема, но вы установили рост 100% на вашем теле, это должна быть минимальная высота.Затем я бы сделал тело относительным, а затем использовал бы ширину и высоту справа и снизу, а не ширину и высоту, в то время как размер вашего фона соответствовал бы:

 
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;   /* use min-height */
  position: relative;  /* move relative here */
}

#back-img {
  background: url(https://youngisland.com/wp-content/uploads/2018/01/aerial-optimized2.jpg) top left no-repeat;
  background-size: cover;   /* add this */
  position: absolute;
  top: 0;
  left: 0;
  bottom:0;                 /* use bottom and right instead of height and width */
  right:0;
  z-index: -1;
}

#content {
  padding: 1px;       /* stop margins collapsing */
  height: 1000px;    /* for test and remove absolute positioning */
}

<div id="content">
  <h1>Title</h1>
  <h2 style="font-size:50px">MORE</h2>
</div>
<div id="back-img"></div>

Answer 3

body, html {
  min-height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}
#back-img {
  background: url(https://youngisland.com/wp-content/uploads/2018/01/aerial-optimized2.jpg);
  opacity: 0.5;
  background-size: cover;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

#content {
  height: 1000px;
}

<div id="content">
  <h1>Title</h1>
  <h2 style="font-size:50px">MORE</h2>
</div>
<div id="back-img"></div>

Answer 4

Добавление фиксированной позиции к элементу с фоновым изображением и относительной позиции к вашему контенту:

.content {
  position relative;
  z-index:2;
}

#back-img {
    background : url(https://youngisland.com/wp-content/uploads/2018/01/aerial-optimized2.jpg);
    background-position: cover;
    position:fixed; 
    right:0;
    bottom: 0;
    top:0; 
    left:0; 
    z-index:1; 

}