Background Image Is Not Displayed in Firefox

background image is not working in mozilla firefox

Generally when I have ran into this problem, the error comes from the path to the image. If I were you I would try changing that from your relative path url('../images/yourimage.jpg') to the absolute path:
ex. url('home/user/Desktop/website/images/yourimage.jpg').

If you're site is linked to the folder containing images though(which it should), you won't need to do that. All you need is url('image/yourimage.jpg'); Because your site is already pulling the files from that folder

Section background image not working on firefox

Found the solution the problem was adblock blocking the background image

DIV background image not displayed in Firefox and Chrome

Your CSS has an error. Since you used shorthand, the top and center styles are confused. Put them together and it will be fine:

<div class="area" style="height:343px; background:transparent url('images/header.png') top center no-repeat ; position:relative">

top center no-repeat

Background image not showing on firefox and chrome

It's probably this line that's not good:

background-image: url('img/faces.png');

Change it to:

background-image: url('../img/faces.png');

I know the problem. img/faces.png does not exists! You're using WordPress and you have to upload the image you want to use. Go to the image and click on it and you will see the full path name to the image. Copy that, and paste it in the url tag like this: url('COPY_LINK_HERE'). That has to fix it.

Why firefox doesnot shows my background image?

You can use the html element as it is better than body for always being at least the height of the browser window. Set a fixed and centered background on it

html {
     background: url('../img/img.png') no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
}

Background image size is not displaying on firefox

background-size works properly,

but you content is in position:absolute; so it gives no height to body, so no background to see in fact.

Where every other browser use html to draw the background and also move the background-size, firefox keeps background-size attached to the actual size of body, it is morelike a bug in my opinion.

https://www.w3.org/TR/CSS2/colors.html (about backgrounds and colors ... )

You can add:

html {
    height:100%;
}
body {
    min-height:100%;
}

or use html instead for the background.

---

Related Topics