Can a background image be larger than the div itself

Question

I have a footer div with 100  width  It s about 50px high  depending on its content   Is it possible to give that  footer a background image that kind of overflows this div   The image is about 800x600px  and I want it to be positioned in the left bottom corner of the footer  It should work sort of like a background image for my website  but I ve already set a background image on my body  I need another image positioned at the bottom left corner of my website and the  footer div would be perfect for that    footer       clear  both      width  100       margin  0      padding  30px 0 0      background  eee url images bodybgbottomleft png  no-repeat left bottom fixed      The image is set to the footer  however it doesn t overflow the div  Is it possible to make that happen   overflow visible doesn t do the job

User · Answer

This could help  It requires the footer height to be a fixed number  Basically  you have a div inside the footer div with it s normal content  with position  absolute  and then the image with position  relative  a negative z-index so it stays  below  everything  and a negative top value of the footer s height minus the image height  in my example  50px - 600px   -550px   Tested in Chrome 8  FireFox 3 6 and IE 9

User · Answer

I do not believe that you can make a background image overflow its div   Images placed in Image tags can overflow their parent div  but background images are limited by the div for which they are the background

User · Answer

You mention already having a background image on body   You could set that background image on html  and the new one on body  This will of course depend upon your layout  but you wouldn t need to use your footer for it

User · Answer

You can use a css3 psuedo element   before and or  after  as shown in this article  https   www exratione com 2011 09 how-to-overflow-a-background-image-using-css3   Good Luck

User · Answer

There is a very easy trick  Set padding of that div to a positive number and margin to negativ   wrapper        background  url xxx jpeg        padding-left  10px       margin-left  -10px

User · Answer

Using background-size cover worked for me    footer       background-color   eee      background-image  url images bodybgbottomleft png       background-repeat  no-repeat      background-size  cover      clear  both      width  100       margin  0      padding  30px 0 0      Obviously be aware of support issues  check Can I Use  http   caniuse com  search background-size

User · Answer

Not really - the background image is bounded by the element it s applied to  and the overflow properties only apply to the content  i e  markup  within an element    You can add another div into your footer div and apply the background image to that  though  and have that overflow instead

User · Answer

No  you can t    But as a solid workaround  I would suggest to classify that first div as position relative and use div  before to create an underlying element containing your image  Classified as position absolute you can move it anywhere relative to your initial div    Don t forget to add content to that new element  Here s some example   div     position  relative         div  before     content         empty but necessary      position  absolute    background          Note  if you want it to be  on top  of the parent div  use div  after instead

User · Answer

Use trasform  scale 1 1  property to make bg image bigger  move it up with position  relative  top  -10px    lt div class  home-hero  gt       lt div class  home-hero  img  gt  lt  div gt   lt  div gt    home-hero  img   position relative      top -10px      transform  scale 1 1       background            size  contain          image  url  image svg

[css] Can a background image be larger than the div itself?

Examples related to css

Examples related to image

Examples related to background