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; }
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.
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 !!
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.
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With