0

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!

tyrell_c
  • 503
  • 3
  • 10
  • 24
  • 2
    Missing semicolon after `background-repeat`? – m4n0 Jun 30 '15 at 13:42
  • 1
    what is display:compact;? – Stickers Jun 30 '15 at 13:49
  • @Pangloss "**compact**: Depending on context, this value for the display property creates either an in-line or block level rendering box. In each case different CSS properties may apply to the compact element. In a block level context, the compact element is rendered in the left or right margin of the block element. The compact element participates in line-height calculations for the current line, and the ‘vertical-align’ property value is relative to the block element." - [source](http://www.css3.com/display/) – dippas Jun 30 '15 at 13:50
  • @dippas interesting, never heard of it before, not found on [mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/display) either. It might be where the problem came from, but not sure. – Stickers Jun 30 '15 at 13:53
  • 1
    Your code seems to work in IE, Chrome and FireFox: https://jsfiddle.net/grfjs1be/1/. Please create a Stack Snippet or JSFiddle that reproduces the issue. – Hidden Hobbes Jun 30 '15 at 13:55
  • @Pangloss actually exists, but AFAIK in Portuguese docs at least , [here](https://developer.mozilla.org/pt-PT/docs/Web/CSS/display), go figure! :) – dippas Jun 30 '15 at 13:57
  • @dippas that makes it even more interesting, thanks for the references. – Stickers Jun 30 '15 at 14:00
  • @Pangloss http://www.w3.org/TR/REC-CSS2/visuren.html#compact – TylerH Jun 30 '15 at 14:25

3 Answers3

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");
Laurens
  • 121
  • 1
  • 12
  • 2
    I am agree definitely the issue is in that line, also remember to check the URL of the image, the path of the image is relative to the css file, not to the page where the css is refered. – Chris Rosete Jun 30 '15 at 14:00
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

Pierre Irani
  • 805
  • 5
  • 19
  • Didn't work. Seems like it doesn't matter if there are quotation marks or not. – tyrell_c Jun 30 '15 at 14:01
  • hey again, i tried the code provided by u and it worked just fine...(testet on Firefox 25.0) can you please tell me which version of Firefox you are using? Thank you – Pierre Irani Jun 30 '15 at 14:13
  • Using Firefox ESR 31.2.0 – tyrell_c Jun 30 '15 at 14:15
  • 1
    I have checked another question and seems to be a solution that worth trying. please check the up-voted correct question in the following link. http://stackoverflow.com/questions/13423510/background-image-path-not-working-in-firefox Also check this forum it has some interesting information: http://forums.mozillazine.org/viewtopic.php?f=25&t=2778365 – Pierre Irani Jun 30 '15 at 14:21
  • YAY! It worked! I had to include the path vs including the url for the background to work! – tyrell_c Jun 30 '15 at 14:27
1

Well all the other answers are great and I always use them but if they dont work you might do a simple trick like to add a img at just at the beggining of the body and give it height and width of 100% to let the photo be responsive according to screen size This will stretch the photo and it will act like a background photo for the user cause it will look the same

Mohamed Sherif Noureldin
  • 400
  • 1
  • 3
  • 9