Mozilla Firefox CSS fail to apply background color on

Question

I try to apply a background color on a div, in a way the div is completely filled with the background.
I succesfully achieved it on Chrome, but have some issue with Firefox.

Here is my .html:

<div class="col-sm-3 text-center">
    <div class="to_be_filled" id="status-sessions">
        <div class="background-icon">
        </div>
        <div class="row">
            <div class="col-xs-6 text-right">
            </div>
        </div>
    </div>
</div>

And my .css

.to_be_filled {
    background: #fff;
    background-size: contain;
    -webkit-border-radius: .25em;
    -moz-border-radius: .25em;
    border-radius: .25em;
    margin: 0 1em;
    padding: 2em;
    position: relative;
    color: #929292;
}

On Chrome, the whole div is filled with a white background.
In Firefox, the white background filled the whole height of the div, but not the whole width.

How can i make Firefox to have the same behaviour as in Chrome?

Maybe the `margin: 0 1em;` part? Why don't you provide us a working example? — Marcos Pérez Gude, Jul 14 '16 at 08:08
Have you removed `background-size: contain;` and tested again? I don't see why you need to set `background-size` if you want a completely filled element. — feeela, Jul 14 '16 at 08:08
In addition to @feeela , `background-color` and `background-size` are not a sense mix. Background size is for images — Marcos Pérez Gude, Jul 14 '16 at 08:09
@MarcosPérezGude: I do not understand your question. I have no working example (except the one above which works in Chrome). — Mornor, Jul 14 '16 at 08:11
@feeela: I removed it (it was for testing purpose), but still does not work :( — Mornor, Jul 14 '16 at 08:11
My question for `margin: 0 1em` means that you have an horizontal margin that can cause conflict, as the answer of @BhojendraNepal said. If you don't provide a working example reproducing the issue we can't help you better. Read before ask: http://stackoverflow.com/help/how-to-ask || http://stackoverflow.com/help/mcve — Marcos Pérez Gude, Jul 14 '16 at 08:23

score 1 · Accepted Answer · edited May 23 '17 at 10:28

Background-size is used if there is background image. To say, background-size works only with background images to make it in that size but not with background-color.

Your div contains margin so it is showing you the space there. Set the margin to 0.

.to_be_filled {
    background-color: #fff;
    -webkit-border-radius: .25em;
    -moz-border-radius: .25em;
    border-radius: .25em;
    margin: 0;
    padding: 2em 3em;/*1em adjusted for your layout as used in margin*/
    position: relative;
    color: #929292;
}

Still I cannot tell you setting padding: 2em 3em; will result as per your layout because of lack of your illustration but still hope you can manage them by structuring yourself.

Probably you see in chrome that is working as your layout but that's really not the background-size effect but due to margin-collapsing issue. If that issue is with margin-collapse then see the post.

I have also answered for margin-collapse related post which might be helpful to you. Check it here.

Or, it might be floating elements issue. If the issue persists with this you need to clear the floats. To simply avoid the issue, you may just set the overflow:hidden; to the div or you may google about clearfix.

Thanks for the answer! However, even with your code I cannot make it work. — Mornor, Jul 14 '16 at 08:14

Mozilla Firefox CSS fail to apply background color on

1 Answers1