M. Slomski M. Slomski - 4 months ago 16
CSS Question

How to make a div act as an infinite background

I am trying to figure out how to resolve a certain issue where I want the background to always be the same color.

The initial view looks great, but if the user zooms out with the browser then they see a blank white area on the bottom which indicates that the content has ended. (Note that the width of the content always populates the free space by growing as they zoom out)

I have a div that wraps my content and it is supposed to display the background color that I want. Is there a special way to always make the div container cover the height area like it does the width area?

I don't want to modify the body tag since my web app is not built to allow that.

Things I tried:


  • Applying the style to the body tag. It worked, but it would apply
    this to all of my pages since this stylesheet is shared.

  • Set the height of the container to 100% which did nothing.



Code I am using:

HTML

<div class="container">

<section class="color-1">
<nav class="cl-effect-14">
<a href="#/intro" class="animsition-link menu-link">Start New Game</a><br/>
<a href="#" class="menu-link">Resume Game</a><br/>
<a href="#" class="menu-link">Join Existing Game</a><br/>
<a href="#" class="menu-link" onclick="self.close()">Quit</a><br/>
</nav>
</section>

</div>


CSS

.container {
background-color: #000;
}

.menu-link {
font-family: Old Standard TT;
}

Answer

Have you tried setting the div's height and width properties to 100% or 100vh and the position property absolute or fixed?

Comments