Menu icon Foundation
Background image not working in foundation 6

Im trying to put a full-width background image in the footer of a web page in Foundation 6.3 (the CSS version).

I've tried different code variations in my app.css file, but nothing's working.  Here's my code below, (maybe I have too many selectors?), if anyone can tell me what the problem is.  

 

Thanks,

Steve

 

#wrapper {

    background: url("../assets/woodgrain326.jpg") no-repeat center center fixed; 

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    width: 100% !important;

    z-index: 0;

}

background-imagefull-width backgroundbackground

Im trying to put a full-width background image in the footer of a web page in Foundation 6.3 (the CSS version).

I've tried different code variations in my app.css file, but nothing's working.  Here's my code below, (maybe I have too many selectors?), if anyone can tell me what the problem is.  

 

Thanks,

Steve

 

#wrapper {

    background: url("../assets/woodgrain326.jpg") no-repeat center center fixed; 

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    width: 100% !important;

    z-index: 0;

}

Rafi Benkual over 2 years ago

Also z-index does nothing without a position (anything other than static)

Better to use classes for CSS and leave id's for JS in general

Rafi Benkual over 2 years ago