我正在尝试创建一个简单的HTML页面。现在,我尝试添加bg-image
/ color
。所以我有这个简单的html标签:
<html>
<style type="text/css">
.header {
height: 100px;
}
.kontent1 {
height: 50px;
margin-top: 10px;
}
.kontent2 {
height: 50px;
margin-top: 10px;
}
</style>
<div class="bgheader"></div>
<div class="header">HEADER</div>
<div class="kontent1"> KONTENT </div>
<div class="bgfooter"></div>
<div class="kontent2"> KONTENT</div>
<div class="footer">FOOTER</div>
</html>
所以,我想要实现的是这样的:
如何实现这一目标?
更新
我试过这个:
body{
background:
url('<?=base_url();?>/assets/header_bg.png')no-repeat 100px -30px,
url('<?=base_url();?>/assets/footer_bg.png')no-repeat 0px 96%;
background-size: contain;
max-height:80%;
padding-top: 20px;
margin-bottom:10px;
}
但它没有响应,因为当页面高度发生变化时,背景会被破坏。
答案 0 :(得分:0)
您可以使用以下代码在div中添加2张图片:
z
您可以通过以下链接获得更好的理解:
答案 1 :(得分:0)
您可以使用background-color
获取背景颜色,并使用background-image
作为这些容器的背景图像。由于您有两个不同的容器,因此更好的方法是单独设置背景,而不是使用body
或父div
上的背景。
您可以尝试这样的事情,
.header-container, .footer-container {
width: 200px;
height: 200px;
border: 2px solid black;
text-align: center;
text-transform: uppercase;
}
.header, .content {
min-height: 100px;
}
.header-container {
background-color: #DD3388;
}
.footer-container {
background-color: #33DD44;
}
<html>
<head>
</head>
<body>
<div class="header-container">
<div class="header"> Header </div>
<div class="content"> Content </div>
</div>
<div class="footer-container">
<div class="content"> Content </div>
<div class="footer"> Footer </div>
</div>
</body>
</html>