gpt4 book ai didi

html - 在div和页脚之间没有空白的div中添加背景图像

转载 作者:太空宇宙 更新时间:2023-11-04 02:09:48 25 4
gpt4 key购买 nike

我正在使用 bootstrap 创建网页。我创建了一个页面,其中包含 1 个水平导航栏、页眉,然后是正文内容的分区和左侧的垂直栏,然后是页脚。我想在背景中添加图像,但仅限于我创建的主体部分 (col-lg-10)。哪种方法最好?我想要覆盖所有这个部门的图像,例如 http://www.bootply.com/62096问题是,我尝试添加图像,但 div 和页脚之间有一个空白空间。

这是我的代码 - https://jsfiddle.net/clarissab/23kcck71/

我的 CSS 代码

html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 120px;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #E0E0E0;
}
#header {
background-color: #4C6F85;
height: 80px;
text-align: center;
background-size: cover;
}
.nav-custom a {
background-color: #ffffff;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

我的HTML代码

<body>

<div class="container-fluid">
<nav class="navbar navbar-default">

<div class="navbar-header">
<a class="navbar-brand" href="#">Name company</a>
</div>

<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">

<li><a href="#">Info</a></li>
<li><a href="#">Address</a></li>
</ul>
</div>
</nav>

<div class="row">
<div class="col-sm-8">
<ul class="breadcrumb lighterbgcolor">
<li class="location">HOME</li>
</ul>
</div>
</div>


<div id="header" class="col-lg-12">
<h2><strong>Title</strong></h2>
</div>


<div id="sideLeft" class="col-lg-2">
<ul class="nav nav-pills nav-custom nav-stacked">
<BR>
<BR>

<li class="nav-link active"><a href="#">ABOUT</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Goals</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>


<div id="body2" class="col-lg-10" style="padding-left:100px; padding-right:300px;">
<BR>
<h4 class="text-justify">blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</h4>
<BR>
<h4 class="text-justify">blaablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</h4>
<BR>
<h4 class="text-justify">blablablablablablabla</h4>
<BR>
<h4 class="text-justify">blablablablablablabla</h4>
<BR>

</div>
</div>


<div id="footer" class="col-lg-12">

</div>

</body>

我尝试在 CSS 中添加上面的代码,但直到页脚才覆盖所有 div。

#body2 { background-image: url('xx.jpg');
background-repeat:no-repeat;
background-size:79%;
height: 740px;
}

最佳答案

您可以尝试使用 css 设置背景大小。首先定位你想要背景的div。示例:

 body{
...
background-size: cover;
*/or/*
backgroun-size: contain;
background-repeat: no-repeat;

}

contain 可能适合您的 div 中的整个图像,但可能不会覆盖整个 div。覆盖,可能不会显示部分图像,因为您覆盖了整个 div。另一个选项可能是 background-size:100% 100%;

关于html - 在div和页脚之间没有空白的div中添加背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39982662/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com