CSS Background image not showing

Question

First time poster; please forgive the ignorance.

I have been able to get my background image to display in other elements, but for some reason this one is only showing a white background. I thought that the general css rules might be overriding this one, but other background images are showing just fine. I can't figure out what I'm doing wrong. Thanks in advance!

.space {
    background: #004080 url("../img/video-bg.jpg") center center no-repeat;
    border-bottom: 1px solid #ededed;
    border-top: 1px solid #ededed;

http://gradepowerbrandon.com/test/

Answer 1

You can check a couple things things here:

1. Is the path to the image correct? Your path is going up to the parent folder of which the CSS file is in and then going into the img folder in that parent folder.

2. Check the file name - double check. It happens to all of us.

3. What about the extension? Perhaps it's a .jpeg file? Once again...double check.

4. This element has no height so there's no room for the background image to show.

5. Try giving the style more precedence:

   • trying putting !important after your style
   • name your element with higher hierarchy. eg: (body #something .something .space)

With only this amount of code and knowledge, I can't really tell you anything else. Perhaps some other code is overwriting this?

Answer 2

What's the dimension of the background image? If it's too big, it will only show a fraction of the image. If so, try this:

background-size:contain;