Cupcake Project - Background Color Won't Show Up

Question

Hi. I need help on the cupcake project. I wrote the CSS code for background color, but it will not show up on the web page. I checked through the forum but still cannot resolve this issue. Thanks. Here is my code so far:

body { font-family: 'Nunito', sans-serif; color: #FAF3BC; background: #420600 url('img/bg-texture.jpg') repeat; }

a { color: #49B69F; text-decoration: none; }

h1 { font-size: 1.750em; letter-spacing: -1.5px; }

h2 { font-size: 1.500em; color: #B4C34F; }

Answer 1 · 2014-01-17T23:32:16Z

January 17, 2014 11:32pm

Hi Nicole, Is it just your background colour that isn't showing is your image displaying correctly ?

Answer 2 · 2014-01-17T23:57:43Z

January 17, 2014 11:57pm

All the pictures are showing up fine (the ones I included in the HTML code). When I created the css style sheet and added background color, the color does not change on the web page. Thanks!

Answer 3 · 2014-01-18T00:03:16Z

January 18, 2014 12:03am

Have you linked your css file to your html file in the the head of the document ? something like this

<!doctype html>

  <head>

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

  </head>

just trying to start at the bottom and work up

Answer 4 · 2014-01-18T00:05:22Z

January 18, 2014 12:05am

Hi Nicole. When I did that project the bg-texture image was in the img folder inside the css folder.

Try this:

body { font-family: 'Nunito', sans-serif; color: #FAF3BC; background: #420600 url('css/img/bg-texture.jpg') repeat; }

Answer 5 · 2014-01-18T00:08:17Z

January 18, 2014 12:08am

I just checked my stylesheet and I stand corrected. Your original code should work.

Answer 6 · 2014-01-18T23:58:04Z

January 18, 2014 11:58pm

Nicole if you open the dev tools in Chrome (F12) > select elements and find your body tag. Then select Computed on the right. Scroll down and you should see the background image in the list of styles. It should show your bg file. If not your file might be in a different location than the one you specified in your background property.

Or do the same check under the resources tab, frames and keep expanding until you see images then check the list of images for you bg image.

Did that help?

Answer 7 · 2014-01-20T19:07:31Z

January 20, 2014 7:07pm

I see the background image in the project folder css/img/ and it should link correctly. I just can't figure this out and I am new to this.

Answer 8 · 2014-01-20T19:29:10Z

January 20, 2014 7:29pm

Im just on my phone so it's hard to see all the post but if you want to zip your files and send them to hind.anthony@sky.com looking at your last post try moving your Img folder out of the CSS folder so it is at the same level so you would have index.html then a CSS folder then an Img folder

Answer 9 · 2014-01-20T20:04:20Z

January 20, 2014 8:04pm

Hi Nicole,

            <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
            ```

Answer 10 · 2014-01-20T20:07:07Z

January 20, 2014 8:07pm

Do you have the above link to your css file in the head of your document

Answer 11 · 2014-01-20T20:13:45Z

January 20, 2014 8:13pm

In your css file style.css you should then have the following css code

  body {
  font-family: 'Nunito', sans-serif;
  color: #FAF3BC;
  background: #420600 url('img/bg-texture.jpg') repeat;
}
            ```

Welcome to the Treehouse Community

Looking to learn something new?

Nicole Tamminga

Nicole Tamminga

Cupcake Project - Background Color Won't Show Up

11 Answers

Anthony Hind

Anthony Hind

Nicole Tamminga

Nicole Tamminga

Anthony Hind

Anthony Hind

Nicole Tamminga

Nicole Tamminga

Nicole Tamminga

Nicole Tamminga

Danielle Hill

Danielle Hill

Nicole Tamminga

Nicole Tamminga

Danielle Hill

Danielle Hill

Blair Rorani

Blair Rorani

Nicole Tamminga

Nicole Tamminga

Anthony Hind

Anthony Hind

Anthony Hind

Anthony Hind

Anthony Hind

Anthony Hind

Anthony Hind

Anthony Hind