Background image doesn't show in firefox and IE

时间:2015-06-30 13:41:32

标签: javascript jquery html css twitter-bootstrap

I'm new to bootstrap and overall web design. Using the original bootstrap.css and the bootstrap's default html file, I added this as my custom css :

 body {
    margin: 0;
    background: url("some image url");
    background-position: center top;
    background-size: 1440px 800px;
    background-repeat:no-repeat;
    display: compact;
}

and it works fine on chrome but it doesn't show up on IE or firefox. Using firebug I inspected the css and got this :

body {
   background: url("some image url") repeat scroll center top / 1440px 800px rgba(0, 0, 0, 0);
   margin: 0;
  }

But I still can't figure out where the problem is. Is there any other way to write the simple CSS snippet so IE and firefox can work with it?

edit : I fixed the semi colon issue but still not showing up. Firebug showing :

body {
margin: 0;
background: url("some image url");
background-position: center top;
/* background-size: cover; */
background-size: 1440px 800px;
background-repeat:no-repeat; 
display: compact;
  }

EDIT : I had to put the direct path to the image vs using a url. Thank you all for your suggestions and help!

3 个答案:

答案 0 :(得分:2)

http://www.w3schools.com/css/css_background.asp

You need to change

background: url("some image url");

into

background-image: url("some image url");

答案 1 :(得分:1)

Hello @tyrell_c i think the issue might be that the Firefox doesn't support the "display:compact", also try omitting the quotation marks inside the image URL

答案 2 :(得分:1)

所有其他的答案都很棒而且我总是使用它们但是如果它们不起作用你可能会做一个简单的技巧,比如在身体的开始处添加一个img并给它高度和宽度100%让照片根据屏幕尺寸进行响应 这将拉伸照片,它将像用户的背景照片一样,因为它看起来相同