Resize background image in div using css

Question

Below css sets an individual background on two divs  the images repeat themselves if they do not fit into the div size    How can I stretch the images using css to fit into space required by div     lt style type  text css  gt      contentMain       margin-bottom  5      margin-top  10     margin-left  10     margin-right  10     background  url   jQuery mypage img background1 png        page1         background  url   jQuery mypage img background2 png         lt  style gt

User · Accepted Answer

Answer  You have multiple options    background-size  100  100   - image gets stretched  aspect ratio may be preserved  depending on browser  background-size  contain  - image is stretched without cutting it while  preserving aspect ratio background-size  cover  - image is completely covering the element while  preserving aspect ratio  image can be cut off     edit  And now  there is even more  https   alligator io css cropping-images-object-fit  Demo on Codepen  Update 2017  Preview  Here are screenshots for some browsers to show their differences   Chrome      Firefox      Edge      IE11    Takeaway Message  background-size  100  100   produces the least predictable result   Resources   https   alligator io css cropping-images-object-fit

User · Answer

i would recommend using this     background-repeat no-repeat    background-image  url your file location here     background-size cover  will only work with css3    hope it helps  D  And if this doesnt support your needs just say it   i can make a jquery for multibrowser support

User · Answer

With the background-size property in those browsers which support this very new feature of CSS

[html] Resize background image in div using css

Answer

Demo on Codepen

Update 2017: Preview

Chrome

Firefox

Edge

IE11

Takeaway Message

`background-size: 100% 100%;` produces the least predictable result.

Resources

Examples related to html

Examples related to css