CODEWITHSUNDEEP
htmlcss
Knownow
Knownow

Reputation: 385

background-image on container element doesn't show all the sections of the container

I am new to CSS and learning everyday. I am stuck at understanding something which could be trivial but I am not sure about the right term to research the problem.

So, I have a container <main> with class "background" inside which there are three sections with class "package" followed by the footer. The sections inside the container are tall enough needing the reader to scroll down to view them all:

</header>
    <main class="background">
        <section class="package" id="plus">
            <a href="#">
                <h1 class="package__title">Our PLUS Plan</h1>
                <h2 class="package__subtitle">The most popular choice of our customers.</h2>
                <p class="package__info">Benefit from increased storage and faster support to ensure that your mission-critical data and applications
                    are always available!</p>
            </a>
        </section>
        <section class="package" id="free">
            <a href="#">
                <h1 class="package__title">Our FREE Plan</h1>
                <h2 class="package__subtitle">An extremely solid start into our hosting world.</h2>
                <p class="package__info">Get started immediately at zero cost!</p>
            </a>
        </section>
        <div class="clearfix"></div>
        <section class="package" id="premium">
            <a href="#">
                <h1 class="package__title">Our PREMIUM Plan</h1>
                <h2 class="package__subtitle">All your enterprise needs. Instant support, guaranteed uptime. </h2>
                <p class="package__info">The best solution for small to large enterprises. Because hosting shouldn't be in the way!</p>
            </a>
        </section>
    </main>
    <footer class="main-footer"> ....

It looks like:

enter image description here

I wanted a background image to cover the entire page so that it lays behind all the section till when the footer starts. I thought, I could target <main class= "background"> and tried:

<style>
        .background {
                background-image: url("../images/plans-background.jpg") ;
                
        }

But this doesn't show the last section onwards in the page (even though <main> contains three sections) and the scrollbar disappears.

enter image description here

What is the reason behind this behaviour? I assumed this was happening because of the inherent height of the image so to test it out I created a very tall image (with 5000 px in Photoshop) and tried using the image as background but the same problem persists.

Upvotes: 0

Views: 54

Answers (1)

Vishal
Vishal

Reputation: 255

You can try this. The background image stay fixed position.

 .background { 
  background: url("../images/plans-background.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Upvotes: 1

Related Questions