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!

8
  • 2
    Missing semicolon after background-repeat?
    – m4n0
    Jun 30, 2015 at 13:42
  • 1
    what is display:compact;?
    – Stickers
    Jun 30, 2015 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
    – dippas
    Jun 30, 2015 at 13:50
  • @dippas interesting, never heard of it before, not found on mdn either. It might be where the problem came from, but not sure.
    – Stickers
    Jun 30, 2015 at 13:53
  • 1
    Your code seems to work in IE, Chrome and FireFox: jsfiddle.net/grfjs1be/1. Please create a Stack Snippet or JSFiddle that reproduces the issue. Jun 30, 2015 at 13:55

3 Answers 3

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
  • 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. Jun 30, 2015 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

5
  • Didn't work. Seems like it doesn't matter if there are quotation marks or not.
    – tyrell_c
    Jun 30, 2015 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 Jun 30, 2015 at 14:13
  • Using Firefox ESR 31.2.0
    – tyrell_c
    Jun 30, 2015 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. stackoverflow.com/questions/13423510/… Also check this forum it has some interesting information: forums.mozillazine.org/viewtopic.php?f=25&t=2778365 Jun 30, 2015 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, 2015 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

1
  • This was a great tip. Thanks!
    – tyrell_c
    Jul 6, 2015 at 14:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.