1
我想安排一個頭的佈局像在圖像上的一個對齊文本和保護IMG長寬比
我想的背景圖像,以保持寬高比爲每一個屏幕尺寸和文字浮動在底部留下一些餘量。我有以下以下,但問題是,文本在一些斷點去下面的圖像或太接近底部
CSS
.header {
background-size:100%;
background-repeat:no-repeat;
overflow:hidden;
height:100%;
color: $dark;
.summary{
text-align:left;
margin-top:30%;
margin-bottom:5%;
margin-left:triple($spacing-unit);
hr {
position: relative;
height:6px;
background: $green;
text-align:left;
border-width: 6px !important;
width: 130px;
}
}
}
HTML
<section id="main" class="no-pad">
<div class='header' style="background-image: url('http://via.placeholder.com/1280x756')">
<div class="summary">
<hr></hr>
<p class="tagline">BIG TEXT HERE</p>
<p class="tagline">Smaller text</p>
<p class="intro">continuing smaller text</p>
</div>
</div>
</section>
對我來說聽起來像它是最有可能不按預期工作的背景圖像。試試'background-size:cover;' – dbrree
這實際上解決了問題 –
好吧,我將添加爲答案。如果您可以將其標記爲可行的答案,我將不勝感激! – dbrree