Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Wannan tattunawa ta zama daɗaɗɗiya. Yi sabuwar tambaya idan ka na bukatar taimako.

Why firefox doesnot shows my background image?

more options

I have a website which is working fine in chrome , edge and other browser but when I went with Firefox than the background of website disappear . If I inspect to CSS and just click here and there in CSS it started appearing but if I reload the page without cookies than again it disappear . here is my CSS

.top {

   background-image: url("../img/img.png");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;
   height: 100%;

} URL is fine i already tested it . can anyone help me with this? I already tried

display: block;

I have a website which is working fine in chrome , edge and other browser but when I went with Firefox than the background of website disappear . If I inspect to CSS and just click here and there in CSS it started appearing but if I reload the page without cookies than again it disappear . here is my CSS .top { background-image: url("../img/img.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; height: 100%; } URL is fine i already tested it . can anyone help me with this? I already tried display: block;

All Replies (3)

more options

I notice you used height: 100%. Firefox requires that the height of the containing element also be defined when using height: 100%. If the containing element, or any containing element beyond that, has a height of auto, then the height of the image may be undefined and limited to the height of the content. To see whether this could be an issue for your page, open the Page Inspector and check the Layout information for .top (it's among the panels on the right side of the inspector for the selected element).

https://developer.mozilla.org/docs/Tools/Page_Inspector

more options

I had checked but the containing element doesnot have height: auto ; +

more options

Okay.

(Hard to guess the problem without seeing the page. If pasting a URL, break the link before .com or other top level domain to avoid delays caused by link moderation.)