CODEWITHSUNDEEP
htmlcss
MattM
MattM

Reputation: 3217

Responsive div height

I have wordpress site with a container at the very top to display a background image. I want the background to stay proportional with the div height to adjust according to screen size. I am currently using the height tag to get this area to show (See CSS below). I basically want it to not overflow when the site is big (it hides the bottom of the image when at higher resolutions) and not show white at the bottom when the site is small.

How can I make the height responsive?

You can see the site here: http://69.195.124.65/~flywitha/

CSS:

.top_site{
    background: rgba(0, 0, 0, 0) url("/wp-content/themes/alex/images/mast_w-kid_1920x800.jpg") no-repeat scroll right bottom;
    background-size: contain;
 }

.top_site h1{
    font-family:lato, sans-serif;
    color:rgba(40, 40, 40, 0.8);
    padding: 15% 0 9.255% 15%;
    margin:0;
    width:50%;
    font-size:6rem;
    font-weight:bold;
    -webkit-text-stroke: 1px black;
    text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

HTML:

<div class="top_site">
    <h1 class="site-hdr-tag inset-text">
            the<br>
            INTERACTIVE<br>
            AEROSPACE<br>
            LEARNING<br>
            CAMPUS
    </h1>
</div>

Upvotes: 4

Views: 2492

Answers (2)

Robert
Robert

Reputation: 651

simplest solution is to specify the height (and/or width) of the container as a percentage of the Viewport's height (and/or width):

DIV { height: 25vh; width: 50vw; }

.myclass { height: 25vh; width: 50vw; }

both meaning, size the 'container' at 25% of the Viewports height and 50% of it's width.

Cheers

Upvotes: 0

JaviCasa
JaviCasa

Reputation: 738

You're probably looking for 

background-size: cover

or 

background-size: contain

Upvotes: 2

Related Questions