Menu
I want to be able to reproduce the behavior of this website's image when resizing.
It seems like the background-image has a center point where the image start to crop when it cannot keep its proportion scale.
Here is an example:
http://themes.evgenyfireform.com/wp-jad/
For now my background has the following css:
#bg {
position: fixed;
top: 0;
left: 0px;
width:100%;
}
The problem is that it's fixed and I want it to crop when the image can't be scale.
955
Image resizing with the pointer toolBy clicking and dragging on these handles, the object is resized by moving the edge or corner clicked on to adjust the width and/or height of the selected object. If the Shift key is held down whilst moving the handle, then the proportions of the object will be preserved.
Use background-size property to cover the entire viewport The CSS background-size property can have the value of cover . The cover value tells the browser to automatically and proportionally scale the background image's width and height so that they are always equal to, or greater than, the viewport's width/height.
In that situation we can use CSS max-width or width to fit the image. Use max-width: 100% to limit the size but allow smaller image sizes, use width: 100% to always scale the image to fit the parent container width.
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.
You are looking for this combination:
background-position:50% 50%; /* Sets reference point to scale from */
background-size:cover; /* Sets background image to cover entire element */
Working sample fiddle here.
Note that this is not supported by IE8 and will require JS hackery there if you need IE8 or older to be supported.
174
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
