-1

Im working on a project and im trying to add a background img. The img does work and i can get it to show in a img src="". But when im trying to add it as a background image it does not work. Would be glad if someone could help me out !

html {


    body{
        background: url("images/background.png");

    }

    header {
        @include linear();

    }

    nav {
        text-align: center;
    }

    ul {
        padding-top: 200px;

    }

    li {
        display: inline-block;
        padding-right: 70px;
    }

    a {
        text-decoration: none;
        color: black;
        font-size: 20px;
        transition: all 1s ease;
        font-family: 'Elegant Lux';
        &:hover {
            color: gray;

        }
    }

}
Niels Abildgaard
  • 2,662
  • 3
  • 24
  • 32
Fredrik_Swe
  • 13
  • 2
  • 6
  • 4
    Is the image url correct relative to the location of the css file? E.g. if the css is in /css/ then should you have ../images/background.png instead? – Alex Hadley Jan 15 '15 at 15:45
  • Clearly should have entered as an answer rather than a comment since it seems it's correct! :) – Alex Hadley Jan 15 '15 at 16:21

1 Answers1

0

It looks like you have a css block wrapped around the rest of your css - the html one in particular:

html { //all your css is here }

Make sure it's separate like this:

html{

}

body{
    background: url("images/background.png");

}

header {
    @include linear();

}

nav {
    text-align: center;
}

ul {
    padding-top: 200px;

}

li {
    display: inline-block;
    padding-right: 70px;
}

a {
    text-decoration: none;
    color: black;
    font-size: 20px;
    transition: all 1s ease;
    font-family: 'Elegant Lux';
    &:hover {
        color: gray;

    }
}

Also, make sure yout image path is correct. It will be realtive to the css file so you may need to jump up a directory with "..". Like this:

body{
    background: url("../images/background.png");
}
Rupert
  • 1,629
  • 11
  • 23
  • Hey i see what you mean. The thing is that I am using Sass so I am wrapping. Thats what makes it look kinda strange. The thing is that i'm kinda new to sass so it might be a problem there. – Fredrik_Swe Jan 15 '15 at 15:56
  • Oh right, then it's probably the path problem them. Have you checked the output of the sass to css? Does it look ok? – Rupert Jan 15 '15 at 15:57
  • Well if i'm using it in a img src="images/background.png" it works. So I relly don't know what it is... – Fredrik_Swe Jan 15 '15 at 16:02
  • Hey i got it now. It was wat you said about the path. Had to go ../../images/background.jpg. – Fredrik_Swe Jan 15 '15 at 16:04
  • Good to hear, remember the css file looks for images relative to itself. So if it's in the same directory then "background.jpg" would have sufficed. Otherwise you need to point it in the right direction. – Rupert Jan 15 '15 at 16:22