Menu
Hi all I am trying to strech the background of my side to fit the width. I only found big workarounds in the internet. Is there not one single command for this?
body {
background-image: url(money.jpg);
}
Thanks for the answers. Doonot
578
width is set on the element in HTML. height (or width ) is set in the CSS — including using percentage values like max-width: 100%; width (or height ) is set to auto in the 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.
1.1.When you added max-width: 100%; to any image, the width will be adjusted automatically based on the outer element width and you know what height: auto; does as it's self-explanatory. This is the fix we have been using for years to prevent image stretching in our sites.
Press Ctrl + T (Windows) or ⌘ Cmd + T (Mac). This activates the Transform tool, so you'll be able to freely change the size of the photo. If you want to maintain the ratio, you can press ⇧ Shift as you drag the photo size.
Use background-size like the one used below,
body {
background-image: url(money.jpg) no-repeat;
background-size: 100%;
}
Some useful links :
85
If you have a CSS3 browser you can use background-size (read more about background-size):
body {
background-image: url(money.jpg);
background-size: 100%;
}
Unfortunately this won't work in IE 6-8. IE 9, Firefox, Chrome, Safari it will work fine.
27
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
