CSS background-attachment: fixed doesn't work properly on floated elements

Question

When I set background-attachment: fixed as a property for a group of floated elements, background-position doesn't work properly. If I set the value normally to 'left top', it positions properly only left column of elements. If I set it to 'center', only the images in cental columns are visible, etc. Only way to set it to behave properly is to add image's offset to background-position-x, or to increase background-size, but I don't want that. Any ideas?

Here is my CSS:

.element {
    float: left;
    margin: 10px;
    width: 300px;
    height: 300px;
    background-position: left top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: initial;
    background-image: url(...);
}

That is indeed a problem. I was able to work around it with a nasty trick, however. http://jsfiddle.net/MrLister/n7x0bLhh/ Would that work? — Mr Lister, Sep 29 '15 at 09:47
Looks like it would, if the nasty trick is to leave background-repeat as repeat. Thanks :) — cincplug, Sep 29 '15 at 12:43
OK, I've posted it an an answer. Maybe you can work with that until something better comes up. — Mr Lister, Sep 29 '15 at 13:10

score 1 · Answer 1 · answered Sep 29 '15 at 13:10

One possible workaround is to set the background-repeat to repeat and to make the background image exactly as large as the floating element plus its margins.

.element {
    float: left;
    margin: 10px;
    width: 300px;
    height: 300px;
    background-position: left top;
    background-attachment: fixed;
    background-repeat: repeat;
    background-size: initial;
    background-image: url(http://lorempixel.com/320/320/animals/5);
}

<div class="element">div 1</div>
<div class="element">div 2</div>
<div class="element">div 3</div>
<div class="element">div 4</div>
<div class="element">div 5</div>
<div class="element">div 6</div>
<div class="element">div 7</div>

The drawback of this method is that it has a number of restrictions:

The elements must all be the same size and have the same margin
The background image must be that size as well
All the elements get the very same background

If that works, OK! Otherwise, I'd be thrilled to see if this question gets a better answer.

For the moment this is the best. – cincplug Sep 29 '15 at 13:12 — cincplug, Sep 29 '15 at 13:12

score 0 · Answer 2 · edited May 23 '17 at 10:27

You could try wrapping the element in a "clearfix" class:

CSS:

.clearfix:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

More clearfix information here.

"A clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally. The clearfix is a way to combat the zero-height container problem for floated elements." Dec 18, 2011 - StackOverflow

HTML:

<div class="clearfix">
    <div class="element"></div>
</div>

You could also wrap your element inside of a float:

CSS:

.element-wrap {
    float: left;
}
.element {
    margin: 10px;
    width: 300px;
    height: 300px;
    background-position: left top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: initial;
    background-image: url(...);
}

HTML:

<div class="element-wrap">
    <div class="element"></div>
</div>

Thanks, I tried wrapping floated elements with clearfix elements with such styles, but that doesn't change anything about background image position issue. How is it related anyway? — cincplug, Sep 29 '15 at 15:04
At least in my case, clearing content:after or wrapping it with another floated element doesn't change background image behaviour. I still don't see how it could be related. — cincplug, Sep 30 '15 at 08:44

CSS background-attachment: fixed doesn't work properly on floated elements

2 Answers2