Responsive div height

Question

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>

Possible duplicate of [how do I give a div a responsive height](http://stackoverflow.com/questions/14714744/how-do-i-give-a-div-a-responsive-height) — JRulle, Dec 17 '15 at 18:54

JaviCasa · Answer 1 · 2015-12-17T17:21:09.823

2

You're probably looking for

background-size: cover

or

background-size: contain

edited Dec 17 '15 at 17:21

answered Dec 17 '15 at 03:27

JaviCasa

698
8
17

do you mean `contain` instead of `content`? – alexwc_ Dec 17 '15 at 04:42
Yes but then how to make the div size responsibly? I don't want the hieght to be 800px on a mobile device. – MattM Dec 17 '15 at 16:57
I absolutely meant contain, thanks. About the height, then... what height do you want? You could always use percentage heights or relative units like em. – JaviCasa Dec 17 '15 at 17:22
I want the height to hold the background image. I changed it to contain which works perfect as long as the size of the container matches the size of the background image. Problem is that right now the size of the container is defined by the text area to the left side. I have the margins set at percentages and the font size set at rem but it doesn't resize. Any suggestions? I have added to the CSS above. – MattM Dec 17 '15 at 19:57
Yeah cover sounds like what he wants. – Vince Dec 17 '15 at 20:02
Cover actually makes it so at certain sizes the entire image doesn't display, contain fills the box. I would actually like to see the Text adjust according to screen size but my padding percents and font-size rem is not working. – MattM Dec 17 '15 at 22:26

score 0 · Answer 2 · answered Feb 01 '20 at 16:21

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

Responsive div height

2 Answers2