Menu icon Foundation
Background

I'm trying to get a background on my website BJBGaming1.com, and i have this

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BJBGaming1</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
</head>
<body>
            

         

and if you look i have the css/main.css part which has this for code

html {
    min-height:100%;
    min-width:100%;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
} 
body {  
  background-image:url(../background.jpg);
    background-repeat:no-repeat;
    background-size:cover;
} 
            

         

and i have an image that matches the name background.jpg that is 1 folder back so i have the ../ but the background still wont show, somebody please help.

csshtmlbackground

I'm trying to get a background on my website BJBGaming1.com, and i have this

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BJBGaming1</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
</head>
<body>
            

         

and if you look i have the css/main.css part which has this for code

html {
    min-height:100%;
    min-width:100%;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
} 
body {  
  background-image:url(../background.jpg);
    background-repeat:no-repeat;
    background-size:cover;
} 
            

         

and i have an image that matches the name background.jpg that is 1 folder back so i have the ../ but the background still wont show, somebody please help.

Rafi Benkual almost 4 years ago

You might have an image path issue. Seems to work here: http://codepen.io/rafibomb/pen/YwKvjr

Matthias Hormann over 2 years ago

Your CSS (usually) gets compiled into /dist/assets/css/app.css, and your background.jpg might live in /dist/assets/img/background.jpg.

So you would use something like

body {  
  background-image: url('../img/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

So you need to "step up" on level from where you are (the location of the compiled CSS file), leaving you in the "assets" folder, then "go down" into the "img" folder. :-)