background image not showing using css

Question

I am trying to write into the CSS to show an image as the background and make it cover the page.

I am using the following code saved as css/varPractice.css

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

and have the following line in my html doc.

<link rel="stylesheet" href="css/varPractice.css">

however no pictures shows at all. This is the only style sheet link in that html file.

Any advice?

My problem was actually that my image was in folder img on the main directory not inside the css --> img folder, the console told me the directory wasn't found. I am very new to programming, I am just writing some pages in brackets for practice and fun. I do appreciate the feedback, once I fixed the file path it worked fine, I did switch background-image to background-repeat but in this instance seemed to have no effect, not repeating either way. — Rob Hudson
– Rob Hudson, Commented May 9, 2017 at 22:07
better practice to get into the habit of creating a css folder. As you progress you'll may find yourself using numerous stylesheets... start now! (using the folder i mean..) :) — Rachel Gallen
– Rachel Gallen, Commented May 9, 2017 at 22:38

K. Tromp · Accepted Answer · 2017-05-09 21:48:12Z

2

Try to remove the background-image: repeat; It should be background-repeat: repeat; You were overwriting the background image.

answered May 9, 2017 at 21:48

K. Tromp

3601 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joseph Marikle · Accepted Answer · 2017-05-09 21:49:15Z

2

You are redeclaring background-image. It looks like you meant to use background-repeat.

Your rule should read as follows:

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

answered May 9, 2017 at 21:49

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

2 Comments

Rob Hudson Over a year ago

Thanks Joseph, so when adding an image for the background from the css the url will automatically attempt to look in the same folder as the CSS? Is this correct?

Joseph Marikle Over a year ago

@RobHudson It depends on what path you use. With what you have now, yes, it would behave that way. relative paths (i.e. ones that don't begin with a slash or a protocol like http or https) will be relative to the stylesheet. I highly recommend using absolute paths. in your case it would probably just be /img/beautifulPic.jpg for that path. This effectively ensures that the resource is loaded relative to the site root.

Collectives™ on Stack Overflow

background image not showing using css

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related