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!

Answer 1

There is a very easy trick. Set padding of that div to a positive number and margin to negative

#wrapper {
    background: url(xxx.jpeg);
    padding-left: 10px;
    margin-left: -10px;
}

Answer 2

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.

Answer 3

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...