Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to show full height background image?

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; } 
like image 497
hangee Avatar asked Sep 19 '13 17:09

hangee


People also ask

How do I stretch a background image in CSS?

You can use the CSS background-size: cover; to stretch and scale an image in the background with CSS only. This scales the image as large as possible in such a way that the background area is completely covered by the background image, while preserving its intrinsic aspect ratio.

How do I make a background image fit in HTML?

Try this , background: url(../IMAGES/background. jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; For more information , follow this Perfect Full Page Background Image !!

How do you make a background image full height in CSS?

CSS-Only Technique #1 We set a min-height which keeps it filling the browser window vertically, and set a 100% width which keeps it filling horizontally. We also set a min-width of the width of the image so that the image never gets smaller than it actually is.


1 Answers

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; } 
like image 93
Kevin Lynch Avatar answered Sep 20 '22 18:09

Kevin Lynch