Menu icon Foundation
Foundation 5 - Background Image

Hey Guys,

How do you put a background image in foundation. I tried the default

background: url(images/NADINE.jpeg) no-repeat center center fixed;       
            

         

but to no avail. I read that Foundation sets with a white background?

Thanks

Foundation-5backgroundimagewhite

Hey Guys,

How do you put a background image in foundation. I tried the default

background: url(images/NADINE.jpeg) no-repeat center center fixed;       
            

         

but to no avail. I read that Foundation sets with a white background?

Thanks

Brittney Hillerich over 4 years ago

I'd really like to find a solution to this problem as well, I am having the same issue. I've read countless threads and have tried multiple methods, but still cannot override the white background. Here is a sample of my code, similar to Arjun's.

body {
background-image : url("imgs/seamless.jpg");
background-repeat : repeat;
}

Arjun Naha over 4 years ago

Hi Brittney,

The closest workaround I have found, is to wrap the entire site in a div and then style it...

<div style="background-image: url(imgs/seamless.jpg);">

<div class="large-12 columns"
<h1>Content</h1>
</div>

</div>

Just remember, with the first div, not to attach Foundation classes to it, otherwise it gets overridden.

Arjun

Brittney Hillerich over 4 years ago

Thanks Arjun!

That worked beautifully!

I have been searching for a solution for days now.

Gert Kaae Hansen over 4 years ago

Hi

I am using a mixin

@mixin cover-background($img-uri, $background-top: "center", $background-left: "center", $background-attachment: "fixed") {
    background: url($img-uri) no-repeat unquote($background-top) unquote($background-left) unquote($background-attachment);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

And in the css file

body {
    @include cover-background("images/image.svg");    
}