如何使我的标题图像以全高显示而不向其中的元素添加填充？

Question

我做的例子： JSFiddle

我希望 header 上的背景图片始终为照片高度的 100%。我只是不确定如何在不向图像顶部的 H2 添加大量填充的情况下执行此操作。我想我会遇到的另一个问题是，无论在什么设备上，如何使背景图像全屏显示？

这就是我正在尝试的。任何帮助将不胜感激。

.heading {
    background: url("http://www.lexcenter.com.br/site/wp-content/themes/dt-nimble/images/backgrounds/header/art-header-main/full/r_atr-header-main.jpg");
height: 100%;
/* background-size: cover; */
}

.heading h2 {
    padding: 50px;
    text-align: center;
    color: white;
}

Answer 1

尝试将 .heading 的高度设置为 100vh；

.height{
  width: 100%;
  height: 100vh;
  background-image: url('http://www.lexcenter.com.br/site/wp-content/themes/dt-nimble/images/backgrounds/header/art-header-main/full/r_atr-header-main.jpg');
}

您也可以设计更多样式。我觉得这更符合你的想法？

body{
  margin: 0;
  padding: 0;
 }

.height {
  width: 100%;
  height: 100vh;
  background-image: url('https://images.pexels.com/photos/949097/pexels-photo-949097.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

Answer 2

要制作标题背景图片，请尝试以下代码

.heading {
  background: url("http://www.lexcenter.com.br/site/wp-content/themes/dt-nimble/images/backgrounds/header/art-header-main/full/r_atr-header-main.jpg");
  background-size: container; /* background size will be equal to your content */
  background-position: 50%;
  background-repeat: no-repeat;
}

.heading h2 {
  padding: 50px;
  text-align: center;
  color: white;
  margin: 0; /* reset the default margin for header tags */
}

无论在什么设备上，要全屏显示背景图片，请尝试以下代码

* {    /* reset all the default margins and padding */
  padding: 0;
  margin: 0;
}

.background-bg {
  width: 100%
  height: 100vh; /* height will be equal to viewport.*/
  background-image: url("background-image.jpg");
  background-size: cover;
  background-position: 50%;
}

如何使我的标题图像以全高显示而不向其中的元素添加填充？

How do I make my heading image show at it's full height without adding padding to elements inside of it?

html

css

image

height

background-image