Menu icon Foundation
Adding a Body Background Image

How do I do this in Foundation? I've been looking on the net for a while, and seen stuff about overriding Foundation's white setting, using 'transparent', and !important but I can't get a background image to display.

At the moment I've changed it back so that just the main foundation.scss is changed to the below:

My styles.scss imports the foundation.scss and also foundation_changes.scss, in that order.

This must be pretty simple, but I'm stumped!

Thanks.

body {
  background-image:url(../../../images/body_bg.png);
  color: #000;
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  position: relative;
  cursor: default;
}
            

         

background-imagecss

How do I do this in Foundation? I've been looking on the net for a while, and seen stuff about overriding Foundation's white setting, using 'transparent', and !important but I can't get a background image to display.

At the moment I've changed it back so that just the main foundation.scss is changed to the below:

My styles.scss imports the foundation.scss and also foundation_changes.scss, in that order.

This must be pretty simple, but I'm stumped!

Thanks.

body {
  background-image:url(../../../images/body_bg.png);
  color: #000;
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  position: relative;
  cursor: default;
}
            

         

This post has been closed. No new replies can be added.

James Gehring over 5 years ago

do you have a live site we could look at? maybe your not pointing to the image correctly. (../../../images/body_bg.png). every time you put ../ it tells the browser to go up one folder to find the images folder from the scss file you are currently using. Is the scss file 3 levels deep?

Iain MacDonald over 5 years ago

Actually, it might be something dumb like that.

The scss file is three deep, but the styles.css file is only two deep.

Although wouldn't that be adjusted when it gets output from the scss to the css?

Its currently testing here:

http://195.8.196.32/~wildlife/

Andrew Patterson over 5 years ago

With this link removing one of the "../" from the bg image url finds the image. AP