How to make background-image size height always equal what the image height needs to be for full width image?


Tags: html,css

Problem :

How do I make an image always have the same crop height. As in on this site http://deliciousproductions.com.au/ the div is 420px high. But the image extends further.

Here's the div

<div class="dpsplash">
</div>

css

.dpsplash {
    background-image: url('/img/banner1.png');  
    background-size: auto 800px;
    height: 400px;
    background-position: center top;
    background-repeat: no-repeat;
}

So what this does is make the image height so that when you resize the page horizontally it doesn't shift the point where you crop the image for the div height, but instead extends the width. Buuuut we run into a problem because I have to guess the image height for a full width drawing on bigger resolutions where the image won't be shorter than 400px if displayed at full width, because if a 2500x1200 image is displayed at full width on a phone, it's gonna end before the div does, looking ugly.

I feel like in maths/javascript it should be that [(current page width)/(image width)] * (image height) = (the height it needs to be) or x, so the background-size style should be background-size: auto (that formula from above?);

I know basically no Javascript, it's so confusing but I understand logic arguments.



Solution :

Do you mean background-size: cover;? What it does (source):

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area


    CSS Howto..

    How to create dynamic business listings in wordpress [closed]

    how to fix the css padding in this situation?

    How to make slanted CSS arrow pointing to a div

    how to add background images using css in phonegap

    how to give no-more-use of css in jquery for css params

    How to apply custom CSS on Facebook comment box plugin

    How to add html in language file of opencart 2.0.1.1?

    JavaFx: How to get the corresponding stylesheet for a given style class of a Node?

    How to make to border-bottom line longer with CSS

    How can I hide a div when content is not displayed

    how do i prevent respond.js reading my retina display media query?

    Using HTML5 and CSS3 How can I keep two elements inline in a responsive container whilst maintaining the same margins?

    CSS: how to address Samsung Android browser?

    How can i make infinite flowing background with only CSS?

    How to prevent IE from loading hidden content using HTML/CSS only?

    How to get same cursor(hand) on links in all browser?

    How to change CSS style without id or class

    How do I organize imports in Compass/Blueprint?

    How can I delete unused css lines?

    How to match an element's background colour with 2 semi-transparent element background colours

    How to modify output buffer?

    mkd2pdf, wkhtmltopdf, how to make PDF for slide

    How to set height of child div while hovering over a parent div in css?

    How do I apply an image to background using inline CSS?

    how to display only 100 rows of 1000 from a database with options to go to next 100 and previous 100 in html/php/css/js [closed]

    How to horizontally center text in bootstrap button?

    How to style JavaScript created text using CSS's @font-face

    How do I hide images that have a certain class when creating a pdf from html?

    How to make this double line shape with css?

    simplecart.js Images not Showing in IE8 on blogger.com site