使用 CSS 将文本添加到背景图像

Question

I am using a background image on a section which covers the whole screen while the section is in view. Then it is covered up by subsequent sections as the page scrolls.

#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;
}

I want to add text about half way down this image. This I can do, but I want it to stay in position, as if it was actually part of the image. So when the screen scrolls up, the text gets hidden rather than scrolls to the top - so it stays in position on the image.

How would I do this?

Thanks

Answer 1

Here is a demo answer for make them both image and text responsive Live On FIDDLE . Try this but not just copy paste. Try to understand the css how this text over the image. If you have any questions ask me in comment. Best of luck.

 .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>

Answer 2

bootstrap 4

    <section class="vh-100" style="
     background: url(public/images/aimage.png) no-repeat center center fixed; 
     background-size: 100%;
 ">
        <div class="container h-100 d-flex ">

            <div class="row my-auto ">
                <div class="col-lg-3 col-sm-12">
                    <div class="jumbotron ">
                        <h1 class="display-3">Hello, world!</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem fuga, molestiae illo pariatur praesentium nemo nam magnam molestias eius at! Cupiditate ratione natus veritatis eaque totam illo accusamus perferendis? Enim?</p>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-12">
                    <div class="jumbotron ">
                        <h1 class="display-3">Hello, world!</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem fuga, molestiae illo pariatur praesentium nemo nam magnam molestias eius at! Cupiditate ratione natus veritatis eaque totam illo accusamus perferendis? Enim?</p>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-12">
                    <div class="jumbotron ">
                        <h1 class="display-3">Hello, world!</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem fuga, molestiae illo pariatur praesentium nemo nam magnam molestias eius at! Cupiditate ratione natus veritatis eaque totam illo accusamus perferendis? Enim?</p>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-12">
                    <div class="jumbotron ">
                        <h1 class="display-3">Hello, world!</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem fuga, molestiae illo pariatur praesentium nemo nam magnam molestias eius at! Cupiditate ratione natus veritatis eaque totam illo accusamus perferendis? Enim?</p>
                    </div>
                </div>


            </div>
        </div>
    </section>