CSSを使用して背景画像にテキストを追加する

Question

セクションが表示されている間に画面全体をカバーするセクションで背景画像を使用しています。その後、ページがスクロールすると、後続のセクションで覆われます。

#section1{ 
background: URL(../SiteData/Images/SectionBackground.jpg) no-repeat center top fixed #f1ece2; 

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

min-height:800px; 
} 

この画像の下半分についてテキストを追加したいと思います。これは私がすることができますが、私はそれが実際にイメージの一部であるかのように、その位置にとどまることを望みます。したがって、画面がスクロールアップすると、テキストは上にスクロールするのではなく隠されてしまい、画像の所定の位置にとどまります。

どうすればよいですか？ここで

おかげ

Answer 1

は、それらの画像とLive On FIDDLE応答テキストの両方作るためのデモの答えです。これを試してみてください。このテキストをイメージ上でどのようにCSSを理解してみてください。ご質問がありましたら、私にコメントしてください。運が良かった。

.img-reponsive { 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
    margin: 0 auto; 
 
} 
 

 
.textoverimage { 
 
    position: relative; 
 
} 
 

 
p.title { 
 
    position: absolute; 
 
    top: 75px; 
 
    left: 0; 
 
    text-align: center; 
 
    font-size: 38px; 
 
    width: 100%; 
 
    color: #fff 
 
} 
 

 
@media only screen and (max-width: 767px) { 
 
    p.title { 
 
    font-size: 1.5em; 
 
    line-height: 1.5em; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 479px) { 
 
    p.title { 
 
    font-size: 1.1em; 
 
    line-height: 1.1em; 
 
    } 
 
}

<div class="textoverimage"> 
 
    <img class="img-reponsive" src="http://cdn.shopify.com/s/files/1/0258/1101/t/2/assets/slideshow_3.jpg?5808719635421587686" alt="demo_img"> 
 
    <p class="title"> TEXT </p> 
 
</div>