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!

score 198 · Answer 1 · edited May 03 '22 at 16:35

198

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;
}

edited May 03 '22 at 16:35

Asef Hossini

655
8
11

answered Jul 19 '13 at 22:18

transGLUKator

1,997
2
11
2

5

Thanks man, I think this should be accepted answer. – Elagin Vladislav Mar 02 '21 at 16:53
3

Even though it makes the trick, this modifies the size of the wrapper and not extending it outside. This makes all other items which do not depend on padding reposition – Mbotet Mar 18 '22 at 11:02

score 56 · Accepted Answer · answered Nov 25 '10 at 21:16

56

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.

answered Nov 25 '10 at 21:16

Daniel Bingham

12,414
18
67
93

score 27 · Answer 3 · edited Nov 20 '19 at 05:44

27

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

edited Nov 20 '19 at 05:44

Aakash

21,375
7
100
81

answered Aug 08 '13 at 04:09

Josh Sells

271
3
2

1

I prefer this method because it does not interfer with the positionning of the `#wrapper` element (like if you need to center it with `margin: 0 auto;`) – scandel Jan 29 '18 at 14:24

score 11 · Answer 4 · answered Apr 26 '15 at 18:48

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.

how does it work for you? position absolute makes element on top of every unpositioned siblings of the "before" block, i.e. the whole content of the div — klm123, Oct 29 '21 at 15:15

score 7 · Answer 5 · answered May 19 '15 at 10:25

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

score 5 · Answer 6 · edited Mar 11 '22 at 09:17

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');
  }
}

edited Mar 11 '22 at 09:17

Erman Kadir Kahraman

469
6
6

answered May 18 '18 at 08:52

Pavlo Kozachuk

244
3
7

score 4 · Answer 7 · answered Nov 25 '10 at 22:50

4

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.

answered Nov 25 '10 at 22:50

stephenhay

2,824
24
25

score 2 · Answer 8 · answered Nov 25 '10 at 21:18

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.

score 2 · Answer 9 · answered Nov 25 '10 at 21:58

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.

Can a background image be larger than the div itself?

9 Answers9

Linked