Cra*_*der 13 html css image stretch
我正在努力获得我一起考虑的标题的布局.
这是到目前为止的HTML:
<div id="header">
<img src="/img/headerBg.jpg" alt="" class="headerBg" />
<a href="/"><img src="/img/logo.png" alt="Logo" class="logo" /></a>
<div id="loginBox">
other code
</div>
</div>
到目前为止的CSS:
#header {
height: 130px;
margin: 5px 5px 0 5px;
border: #0f0f12 outset 2px;
border-radius: 15px;
}
#loginBox {
float: right;
width: 23.5%;
height: 128px;
font-size: 75%;
}
.headerBg {
}
.logo {
width: 50%;
height: 120px;
float: left;
display: block;
padding: 5px;
}
我想要完成的是将图像"headerBg.jpg"显示为div"header"的100%宽度,所以基本上它将是div本身的背景.然后将图像"logo.png"和div"loginBox"显示在"headerBg.jpg"上方.
徽标应该浮动到最左端,loginBox浮动到最右边,就像在CSS中一样.
删除图像后,徽标和div被正确放置,但是当引入图像时,它们会在流中的图像之后放置两个浮动项目.
我已经尝试了各种添加和重新配置,但没有一个已经证明可以解决我想要的方式.
我已经在css中添加了图像作为标题div的背景,但它不会以这种方式伸展100%.
有人能够对此提供一些见解吗？
此外,任何涵盖此类内容的教程都将是我收藏的一个很好的补充!
谢谢!
cha*_*ers 10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
#header {
position:relative;
height: 130px;
margin: 5px 5px 0 5px;
border: #0f0f12 outset 2px;
border-radius: 15px;
}
#loginBox {
position:relative;
float: right;
width: 23.5%;
height: 128px;
font-size: 75%;
}
.headerBg {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.logo {
position:relative;
width: 50%;
height: 120px;
float: left;
display: block;
padding: 5px;
}
</style>
</head>
<body>
<div id="header">
<img src="img/headerBg.jpg" alt="" class="headerBg" />
<a href="/"><img src="img/logo.png" alt="Logo" class="logo" /></a>
<div id="loginBox">
other code
</div>
</div>
</body>
</html>