How to show full height background image

Question

I have a photo type  not landscape  background image with 979px width by 1200px height  I would like to set it to float left and show 100  full image height fixed  without the need to scroll up down  regardless of content length    This is my CSS code  but it is not working   img  media       max-width  100      body       background-color  white      background-image  url     images bg-image jpg        background-size  auto 100       background-repeat  no-repeat      background-position  left top

User · Answer

CSS can do that with background-size  cover   But to be more detailed and support more browsers     Use aspect ratio like this    aspectRatio         bg width      bg height      FIDDLE

User · Answer

This worked for me  though it s for reactjs  amp  tachyons used as inline CSS   lt div className  quot pa2 cf vh-100-ns quot  style   backgroundImage   url   a6      gt             lt  div gt   This takes in css as height  100vh

User · Answer

You can do it with the code you have  you just need to ensure that html and body are set to 100  height   Demo  http   jsfiddle net kevinPHPkevin a7eGN   html  body       height 100       body       background-color  white      background-image  url  http   www canvaz com portrait charcoal-1 jpg        background-size  auto 100       background-repeat  no-repeat      background-position  left top

User · Answer

html  body       height 100      body        background  url images bg jpg  no-repeat center center fixed       -webkit-background-size  cover      -moz-background-size  cover      -o-background-size  cover      background-size  cover

[css] How to show full height background image?

Examples related to css

Examples related to image

Examples related to background