Menu
Can background image extend beyond div's borders? Does overflow: visible apply to this?
454
CSS-Only Technique #1 We set a min-height which keeps it filling the browser window vertically, and set a 100% width which keeps it filling horizontally. We also set a min-width of the width of the image so that the image never gets smaller than it actually is.
The best way to stretch an image to fit the background of an element is to use the CSS3 property, for background-size, and set it equal to cover.
Adding a Background to an Image With object-fit: contain # We would benefit from that when also using object-fit: contain . In the example below, we have a grid of images. When the aspect ratios of the image and the container are different, the background color will appear.
No, a background can't go beyond the edge of an element.
The overflow style controls how the element reacts when the content is larger than the specified size of the element.
However, a floating element inside the div can extent outside the div, and that element could have a background. The usefulness of that is limited, though, as IE7 and earlier has a bug that causes the div to grow instead of letting the floating element show outside it.
186
Following up on kijin's advice, I'd like to share my solution for image offsets:
/** * Only effective cross-browser method to offset image out of bounds of container AFAIK, * is to set as background image on div and apply matching margin/padding offsets: */ #logo { margin:-50px auto 0 auto; padding:50px 0 0 0; width:200px; height:200px; background:url(../images/logo.png) no-repeat; } I used this example on a simple div element <div id="logo"></div> to position my logo with a -50px vertical offset. (Note that the combined margin/padding settings ensure you don't run into collapsing margin issues.)
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With