时间戳

首页 > 解决方案 > 无法将图像设置为适合整个 div

html - 无法将图像设置为适合整个 div

问题描述

我想为我的网站创建一些标题，但实际上我无法正确设置背景图像。我想从我的背景图像中填充整个标题 div，但它实际上甚至不适合整个 div。我该怎么办？（请不要因为代码质量而责备我：D）

HTML

    <!DOCTYPE html>
    <html>
      <head>
      <link

 href="css.css" rel="stylesheet" type="text/css"/>
   </head>
    <body>
     <div class = "headerContainer">
      <div class = "headerCol1"><h1>LoremIpsum</h1></div>
      <div class = "headerCol2"><h1>LoremIpsum</h1></div>
      <div style = "clear:both;"/>
      <div class = "headerCol3"><h1>LoremIpsum</h1></div>
      <div style = "clear:both"/>
     </div>
  </body>
</html>

CSS

    body{
    background-color:#666766;
}

.headerContainer{

    height:100vh;
    border:solid 2px;
    background-image:url("https://i2.wp.com/oddshjelpen.com/wp-content/uploads/2018/08/350851-download-free-website-background-1920x1080-for-mobile-hd.jpg?ssl=1");
    background-size: contain;
  background-position: left-top;
  background-repeat:no-repeat;

}
.headerCol1{
    height:100px;
    width:600px;
    background-color:yellow;
    margin:0 auto;
}
.headerCol1 h1{
    text-align:center;
    font-size:40px;
    padding:15px;

    font-size:72px;
    letter-spacing:15px;

}

.headerCol2{
    height:70px;
    width:500px;
    background-color:yellow;
    margin-top:150px;
    float:right;
}

.headerCol2 h1{
    margin:0;
    padding:0;
    text-align:center;
    position:relative;
    top:50%;
    transform:translateY(-50%);
    font-size:62px;

}

.headerCol3{
    height:65px;
    width:550px;
    background-color:yellow;
    margin-top:20px;
    float:right;
}
.headerCol3 h1{
    margin:0;
    padding:0;
    text-align:center;
    position:relative;
    top:50%;
    transform:translateY(-50%);
    font-size:56px;
}

https://jsfiddle.net/48t7xLrg/

标签： htmlcss

解决方案

您必须更新background-size到coverCSS 下面的更新。

.headerContainer {
    height: 100vh;
    border: solid 2px;
    background-image: url(https://i2.wp.com/oddshjelpen.com/wp-content/uploads/2018/08/350851-download-free-website-background-1920x1080-for-mobile-hd.jpg?ssl=1);
    background-size: cover;
    background-position: left-top;
    background-repeat: no-repeat;
}

小提琴

推荐阅读