Fit background image to div

Question

I have a background image in the following div  but the image gets cut off     lt div style  text-align center background-image  url  media img 1 bg jpg  background-repeat no-repeat width 450px height 900px   id  mainpage  align  center  gt    Is there a way to show the background image without cutting it off

User · Answer

You can use this attributes   background-size  contain  background-repeat  no-repeat    and you code is then like this     lt div style  text-align center background-image  url  media img 1 bg jpg   background-size  contain  background-repeat  no-repeat   id  mainpage  gt

User · Answer

try any of the following  background-size  contain  background-size  cover  background-size  100     container      background-size  100

User · Answer

you also use this   background-size contain  height  0  width  100   padding-top  66 64      I don t know your div-values  but let s assume you ve got those   height  auto  max-width  600px    Again  those are just random numbers  It could quite hard to make the background-image  if you would want to  with a fixed width for the div  so better use max-width  And actually it isn t complicated to fill a div with an background-image  just make sure you style the parent element the right way  so the image has a place it can go into   Chris

User · Answer

You can achieve this with the background-size property  which is now supported by most browsers   To scale the background image to fit inside the div   background-size  contain    To scale the background image to cover the whole div   background-size  cover    JSFiddle example  There also exists a filter for IE 5 5  support  as well as vendor prefixes for some older browsers

User · Answer

If what you need is the image to have the same dimensions of the div  I think this is the most elegant solution   background-size  100  100     If not  the answer by  grc is the most appropriated one   Source  http   www w3schools com cssref css3 pr background-size asp

User · Answer

background-position-x  center  background-position-y  center

[html] Fit background image to div

Examples related to html

Examples related to css

Examples related to background-image