如何使我的标题图像以全高显示而不向其中的元素添加填充?
How do I make my heading image show at it's full height without adding padding to elements inside of it?
我做的例子:
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;
}
尝试将 .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;
}
要制作标题背景图片,请尝试以下代码
.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%;
}
我做的例子: 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;
}
尝试将 .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;
}
要制作标题背景图片,请尝试以下代码
.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%;
}