'Can a background image be larger than the div itself?

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!

cssimagebackground


Solution 1:[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;
}

Solution 2:[2]

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

Solution 3:[3]

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.

Solution 4:[4]

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

Solution 5:[5]

Use trasform: scale(1.1) property to make bg image bigger, move it up with position: relative; top: -10px;

<div class="home-hero">
  <div class="home-hero__img"></div>
</div>

.home-hero__img{
  position:relative;
  top:-10px;
  transform: scale(1.1);
  background: {
    size: contain;
    image: url('image.svg');
  }
}

Solution 6:[6]

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.

Solution 7:[7]

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.

Solution 8:[8]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Asef Hossini
Solution 2 Aakash
Solution 3 ArcTanH
Solution 4 PanPipes
Solution 5 Erman Kadir Kahraman
Solution 6 stephenhay
Solution 7 hollsk
Solution 8 cambraca

Related Questions