How to maintain responsive background image height while changing screen width?

user_16563481 0
Viewed 373

I have been working on positioning a background image, but the image is only positioned correctly while the webpage window is adjusted to its minimum width. As I resize the browser window the image is clipped on all of its' side lengths. The photo has a height much greater than its width(1391 x 2471). I thought I might have to incorporate a vertical scroll? The website is being designed for mobile platforms but I will be viewing and designing it primarily on a computer monitor. How might I maintain the images' integrity from Min. Width of browser to Max. Width of browser?

* { margin: 0;
    padding: 0;
}

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

My CSS code for the positioning of the image was taught to me on CSS-Tricks though it has provided the best results so far. I have added a link to the image encase you would like to view. It is a photo I took myself so I hope the link provided is functional.

responsive-design responsive css image html
3 Answers

If I have understood this properly, you want the image to be displayed properly on all the sizes you want?

Well in that case you can use @media query.

@media(max-width: your max width in px) {
    /*And here change the height and width so that it doesn't look weird*/
}
Admin1 
body{
    background: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
user_149535350

You need to get the html element (or whatever element you want the img to show in) to have at least the full height of the img when the img has full width (100vw) of the viewport.

You can do that if you know the aspect ratio of the image. In this case you know the natural width and height of the original so the aspect ratio can be calculated by CSS if you give it those dimensions as variables.

Here's an example using your CSS settings (except see caveat below):

* {
  margin: 0;
  padding: 0;
}

html {
  --imgw: 1391;
  --imgh: 2471;
  width: 100vw;
  min-height: calc(100vw * var(--imgh) / var(--imgw));
  /* make sure the whole height of the image is always shown */
  background-image: url(https://picsum.photos/id/1015/1391/2471);
  background-size: cover;
}
HELLO

Caveat: you have background fixed in your CSS. Two problems with that: it renders the element unscrollable and in any case it is not properly supported in Safari and makes the background look 'fuzzy' on IOS. So this snippet has removed it.

user_108674540
Related