Menu
I have a large image to be use as a background-image of a page. What I want is that the height of the image will be stretched to fill the height of the page. It should be centered also.
background: black url("/image/background.jpg") no-repeat fixed center;
800
Use: background-size: 100% 100%; To make background image to fit the div size.
The background-size CSS property lets you resize the background image of an element, overriding the default behavior of tiling the image at its full size by specifying the width and/or height of the image. By doing so, you can scale the image upward or downward as desired.
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
background-size: cover will do the trick in modern browsers - see mozilla's documentation for more details.
For older browsers (particularly older versions of IE), I've had a lot of success with jQuery plugins like this one to emulate the behaviour.
104
here is a good writeup
http://css-tricks.com/perfect-full-page-background-image/
the gist of it being
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;
}
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
