Can a background image be larger than the div itself?

Question

I have a footer with 100% width. This is approximately 50 pixels depending on its content.

Is it possible to give this #footer a background image that overflows this div?

The image is about 800x600px, and I want it to be located in the lower left corner of the footer. It should look like a background image for my site, but I already set the background image on my body. I need another image located in the lower left corner of my site, and the #footer div is perfect for this.

#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 does not overflow the div. Is it possible to do this?

overflow:visible does not do the job!

Answer 1

I do not believe that you can make the background image overflow with your div. Images placed in image tags can overflow their parent div, but background images are limited to the div for which they are the background.

Answer 2

There is a very simple trick. Set the registration of this div to a positive number and the margin to negativ

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

Answer 3

You can use the css3 psuedo element as shown in this article

https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/

Answer 4

No, you can’t.

But as a lasting solution, I would suggest classifying this first div as position:relative and using div::before to create the base element containing your image. It is classified as position:absolute , you can move it anywhere relative to your starting div.

Remember to add content to this new element. Here is an 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.

Answer 5

You already mention the background image on the body .

You can set this background image to html and the new one to body . This, of course, will depend on your layout, but you will not need to use its footer.

Answer 6

Not really - the background image is limited to the element to which it is applied, and overflow properties apply only to the content (for example, markup) inside the element.

You can add another div to the footer div and apply a background image to it, but instead an overflow.

Answer 7

It might help . This requires that the height of the footer be a fixed number. Basically, you have a div inside the footer with its normal content, position: absolute , and then an image with position: relative , a negative z-index , so it stays “below” everything and a negative value of top footer height minus image height ( in my example, 50px - 600px = -550px ). Tested on Chrome 8, FireFox 3.6, and IE 9.

Answer 8

Using a background cover for me worked.

 #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, you need to know about support issues, check if I can use: http://caniuse.com/#search=background-size