Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Helloyellow Yellowhello
Helloyellow Yellowhello
3,800 Points
Posted by Helloyellow Yellowhello
Helloyellow Yellowhello
3,800 Points

why my background image does not show, in my banner class ? 

main-banner{background-image: url("../img/leaf.jpg");}



<div class="main-banner">
            <h1>This is the Main Banner Heading</h1>
            <p>Andouille pork chop pancetta drumstick ground round beef ribs swine brisket ham.</p>

        </div>
Andrew Dushane
Andrew Dushane
9,264 Points
Andrew Dushane
Andrew Dushane
9,264 Points

Your code didn't come through readable. Check out the markdown instructions for posting code in a question. http://daringfireball.net/projects/markdown/basics

5 Answers

adamkemp
adamkemp
3,335 Points
adamkemp
adamkemp
3,335 Points

Hi Karam,

Have you defined the width and height of the div class main-banner? Try:

.main-banner {
background-image: url("../img/leaf.jpg");
background-size:cover; /*This makes the image the entire size of the div */
width:100%; /*This makes the width of the div 100% to it's parent */
height:10em; /*Change the height to your requirements */
}

Hope this helps

Adam

Helloyellow Yellowhello
Helloyellow Yellowhello
3,800 Points
Helloyellow Yellowhello
Helloyellow Yellowhello
3,800 Points

HI Adam i have done that, the only difference i noticed was the increase of the height but there is no image being displayed, just the height of the banner has increases as i defined the height

Zack Taylor
Zack Taylor
9,021 Points
Zack Taylor
Zack Taylor
9,021 Points

karam Oulad-Sbouria 90% of the time your find that the image is in the wrong place of your file structure. Take a look where you have placed this image. Your saying its in the img/ Folder. Tho for all you know you have gone down/up a level this is why its not showing.

your code: .main-banner{background-image: url("../img/leaf.jpg");} -Try- .main-banner{background-image: url("../../img/leaf.jpg");}

Good luck on your journey. I am sure your figure it out. If not message again I am sure someone might help or review videos again that might shine some light on your problem. :)

Terry Williams
Terry Williams
12,469 Points

Karem,

I think Zack is right. It seems, based on what you have typed about your problem that the CSS styles are coming over just not your image source. If this is correct then I think your path to the file is incorrect. You can use your inspector window or Firebug to view your code and it will allow you to change the path and see where things need to point. Then just go and modify your CSS code.

Helloyellow Yellowhello
Helloyellow Yellowhello
3,800 Points
Helloyellow Yellowhello
Helloyellow Yellowhello
3,800 Points

hi terry i checked the path, i applied the style to my body tag and the path is fine it just doesn't work in my .main-banner class 

.main-banner{background-image:url("../img/leaf.jpg"); background-size:cover; width:100%; height:10em;}

body{background-image:url("../img/leaf.jpg"); background-size:cover; width:100%; height:10em;}
Helloyellow Yellowhello
Helloyellow Yellowhello
3,800 Points
Helloyellow Yellowhello
Helloyellow Yellowhello
3,800 Points

i can get it to work in the body tag for example 

body{background-image: url("../img/leaf.jpg");}

but cant get it to work in my banner class for some reason i tried the z-index that didnt help either

adamkemp
adamkemp
3,335 Points
adamkemp
adamkemp
3,335 Points

Check to see if you have the correct link to your image.

If the image is in the same folder as your index page the link should be:

background-image: url("leaf.jpg");

If it is in an image (in this example a folder named img) folder on from your index page - the link should be:

background-image: url("img/leaf.jpg");

Hope this helps

Helloyellow Yellowhello
Helloyellow Yellowhello
3,800 Points
Helloyellow Yellowhello
Helloyellow Yellowhello
3,800 Points

Hi Adam thanks for your response, i have checked my path, i applied the same css to the body tag, which works fine, but the image does not show in my main-banner class , i dont know what i am doing wrong ? 

.main-banner{background-image:url("../img/leaf.jpg"); background-size:cover; width:100%; height:10em;}

body{background-image:url("../img/leaf.jpg"); background-size:cover; width:100%; height:10em;}
Helloyellow Yellowhello
Helloyellow Yellowhello
3,800 Points
Helloyellow Yellowhello
Helloyellow Yellowhello
3,800 Points

i fixed it, it was due to my stupidity , that i was overlaying the background image with the color white after in my media queries that's why i could not see the image, thanks again i appreciate everyone's help

adamkemp
adamkemp
3,335 Points

Glad it's sorted.