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!

Make a UIButton background image larger than frame

I’m trying to make a UIButton with a background image where the image is larger than the button frame. The problem is, the UIButton automatically scales the image to fit and haven’t found a way to cha

div container larger than image inside [duplicate]

This question already has an answer here: Why does container div insist on being slightly larger than its content? 3 answers once again was hoping you could help me out. I am a novice at css an

image height 100% comes out larger than div

I’m trying to make an image inside a div that is always 100% of the height, with the width proportional. But when I set the height to 100% it comes out larger than the div. Am I misunderstanding what

CSS background image larger than window buggy

I have a weird issue that’s probably more of a bad coding than anything else. Basically, I have this site where if you resize your browser just around the size of the website, you will see that you c

Shadow larger than the background image [closed]

Ran into this problem when I was trying to add shadows to the thumbnail border image. Is there any way around this? :s Here’s the chunk of the code: #content .item{ width: 285px; height: 240px; float

CSS HTML How to make a larger image than div display in full in div

So I have a div with a background image; this div can grow in height and width depending on content/size of space for the div. But regardless I would like the background image to be 100% in size displ

Div background larger than window height wont scale

I have an image that is to be used as a background for a series of slides that are all contained within one page. There are four slides total. Each slide is the height of the screen. So I need the b

Remove background image if browser height is larger than 1080px

I’m trying to figure out how to remove the image if the browser height is larger than 1080 pixels. For example android devices would have more than 1080 when the page loads and my image is loaded and

Div larger than table cell problem

I am trying to have a div sit in a table cell. The div is larger than the table cell and I want the table cell not to resize, but to stay the same size as the div floats over the table. How can I mani

Android ImageButton how to have a clickable area that is larger than the image itself?

I have a small Android ImageButton on a screen representing an icon. The problem is that it is difficult to touch, and activate. I don’t want to increase the size of the image itself but I would like

Answers

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.

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.

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.

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.

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

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

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

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.

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