html - 页眉和页脚背景不会拉伸(stretch)页面的整个宽度

Question

我的网站页眉和页脚上的背景图片没有拉伸(stretch)到整个屏幕。

我试过使用 background-size:cover; 更改背景图像、屏幕尺寸、显示、添加最小宽度

HTML

 <header>
    <h1>
     <svg viewBox="-30 25 480 400">
         <path id="curve" d="M10 75 Q 80 25 500 90" />
             <text font-size="30" width="500">
                 <textPath xlink:href="#curve">
                        Porcelian Corporation "L&J"
                    </textPath>
              </text>
      </svg>   
   </h1>
</header>

<div class="logo">
    <img src="css/logo3.png" alt="logo" class="logopic"> 
</div>

CSS

header {
    background-image: url('patt.jpg');
    height: 17em;
    width: 100%;
    box-shadow: 0px 8px 96px -17px rgba(31, 60, 87, 0.7);
}
.logo {
    margin-left: 5%;
    border-top: 1px solid rgba(78, 127, 136, 0.9);
    border-left: 1px solid rgba(78, 127, 136, 0.9);
    border-right: 1px solid rgba(78, 127, 136, 0.9);
    border-bottom: 1px solid rgba(78, 127, 136, 0.9);
    background: rgba(144, 190, 214, 0.7);
    height: 22em;
    width: 22em;
    margin-top: -15%;
    z-index: 3;
    position: relative;
}
.logopic {
    height: 22em;
    width: 22em;
    margin: 1%; 
    margin-top: 1%;
    cursor: pointer;
}
h1 {
    font-family: "Bevan-Regular";
    text-align: center; 
    height: 2em; 
    width: 15em; 
    background-color: rgba(144, 190, 214, 0.7); 
    display: inline-block; 
    color: rgba(57, 70, 36, 0.8); 
    font-size: 3em; 
    padding: 0; 
    margin: 0 auto;
    margin-top:1%; 
    margin-left: 30%; 
    border: 1px solid rgba(78, 127, 136, 0.9);

}
svg {
    display: inline-block;
}
path {
    fill: transparent;
}
text {
     fill: rgba(11, 22, 27, 0.8);
}

Answer 1

你必须将你的 h1 标签宽度设置为 100%，否则它会溢出到页面宽度:

h1{
    font-family: "Bevan-Regular";
    text-align: center; 
    height: 2em; 
    width: 100%;
    background-color: rgba(144, 190, 214, 0.7); 
    display: inline-block; 
    color: rgba(57, 70, 36, 0.8); 
    font-size: 3em; 
    padding: 0; 
    margin: 0 auto;
    border: 1px solid rgba(78, 127, 136, 0.9);
   }

检查下面的 fiddle :

header{
background-image: url('patt.jpg');
height: 17em;
background-size:100%;
}
.logo{
margin-left: 5%;
border-top: 1px solid rgba(78, 127, 136, 0.9);
border-left: 1px solid rgba(78, 127, 136, 0.9);
border-right: 1px solid rgba(78, 127, 136, 0.9);
border-bottom: 1px solid rgba(78, 127, 136, 0.9);
background: rgba(144, 190, 214, 0.7);
height: 22em;
width: 22em;
margin-top: -15%;
z-index: 3;
position: relative;
} 
.logopic {
height: 22em;
width: 22em;
margin: 1%; 
 margin-top: 1%;
cursor: pointer;
}
h1{
font-family: "Bevan-Regular";
text-align: center; 
height: 2em; 
width: 100%;
background-color: rgba(144, 190, 214, 0.7); 
display: inline-block; 
color: rgba(57, 70, 36, 0.8); 
font-size: 3em; 
padding: 0; 
margin: 0 auto;
border: 1px solid rgba(78, 127, 136, 0.9);
}
svg{
display: inline-block;
}
path{
fill: transparent;
}
text{
 fill: rgba(11, 22, 27, 0.8);
}

<header>
    <h1>
     <svg viewBox="-30 25 480 400">
         <path id="curve" d="M10 75 Q 80 25 500 90" />
             <text font-size="30" width="500">
                 <textPath xlink:href="#curve">
                        Porcelian Corporation "L&J"
                    </textPath>
              </text>
      </svg>   
   </h1>
</header>

<div class="logo">

    <img src="css/logo3.png" alt="logo" class="logopic"> 
</div>