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
Corey Plummer
2,738 Pointsbackground image
Hey guy's I am having an issue. I am unable to get my background image to show up.
index.css
body {background-image: url("img/hands.png") }
This is exactly how I am typing it in. Everything else is working on the page, rest of coding and all other photos. What could be the problem?
Corey
Valery Kukatov
6,996 PointsIs the hands.png actually located in the folder img? And then next question is the index.css actually located in the folder outside of img folder?
Valery Kukatov
6,996 Pointsdiscard the first comment. It won't let me delete or edit it for some reason.
Corey Plummer
2,738 PointsThe root folder is theoblog. Index.css is located inside the CSS folder Located inside the Theoblog folder (root) Hands.png is located inside the IMG folder located inside the Theoblog Folder (root)
TheoBlog I I > CSS > Index.css I I > IMG > hand.png
Do I need to go up a folder?
Corey
Valery Kukatov
6,996 PointsCan you show HTML code that directs to the index.css? As long as all files are in one folder it shouldn't matter how many folders you make inside each other folder. I'm curious as to if you wrote inside your html code index.css instead of Index.css as you are stating above that it's with a capital letter.
Corey Plummer
2,738 PointsHere is the code for what I have done. I know the image works because I was able to set it as an image via html however it's not working as a background via CSS. Every other image works on the other pages and everything else is doing fine. But I can't seem to get this background image to work.
<html>
<head>
<title>Theological Musings and Other B.S.</title> <link rel="stylesheet" href="css/index.css">
</head>
<body >
<div class="wrapper" <p><h1>Theological Musings and Other B.S.</h1> <a class="enter" href="blogs.html">Enter Our Minds</a>
</p>
</div>
</body> </html>
CSS
body {background-image: url ('img/hands.png') ; }
h1,p {text-align: center; }
.wrapper {border:2px solid red; }
.wrapper {text-align: center; }
5 Answers
Homer Gaines
262 PointsProvided your file is in the correct place, try this...
body {background: url("img/hands.png") }
Valery Kukatov
6,996 PointsAlso try this code added to your body.
{
background-image:url('hands.png');
background-repeat:repeat;
}
And don't forget to include the semicolon at the end of each statement. I think that is actually your problem lol. The repeat is to make sure your image is actually big enough to be noticed haha.
NVM the repeat, it looks like the background is repeated automatically. But you can include it just in case, I guess some browsers don't do it correctly.
Corey Plummer
2,738 Pointshere is the
HTML
<html>
<head>
<title>Theological Musings and Other B.S.</title> <link rel="stylesheet" href="css/index.css">
</head>
<body >
<div class="wrapper" <p><h1>Theological Musings and Other B.S.</h1> <a class="enter" href="blogs.html">Enter Our Minds</a>
</p>
</div>
</body> </html>
CSS
body { background-image :url('img/hands.png'); background-repeat:repeat; }
h1,p {text-align: center; }
.wrapper {border:2px solid red; }
.wrapper {text-align: center; }
Corey Plummer
2,738 PointsAbove comment is being foolish..
<head>
<title>Theological Musings and Other B.S.</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body >
<div class="wrapper"
<p><h1>Theological Musings and Other B.S.</h1>
<a class="enter" href="blogs.html">Enter Our Minds</a>
</p>
</div>
</body>
</html>```
CSS
```body {
background-image :url('img/hands.png');
background-repeat:repeat;
}
h1,p {text-align: center; }
.wrapper {border:2px solid red;
}
.wrapper {text-align: center;
}
Homer Gaines
262 PointsDid you notice you didn't close the div with the "wrapper" class?
Corey Plummer
2,738 PointsHey thanks, I did fix that, but still nothing has been fixed. I'm honestly stumped on this issue. I have even W3C hi both my HTML and CSS code and both are good. And like I have said, everything else works fine. So I know its not bad written code (HTML or CSS). How is something so simple stumping me?
Corey Plummer
2,738 PointsEVERYONE I figured it out. after long days of wrestling I did it. Thank you all so much.
<!DOCTYPE HTML>
<html lang="EN">
<head>
<meta charset="utf-8">
<title>Theological Musings and Other B.S.</title>
<link rel="stylesheet" href="css/index.css">
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,700italic' rel='stylesheet' type='text/css'>
</head>
<body >
<div class="wrapper">
<p> <h1>Theological Musings and Other B.S.</h1>
<a class="enter" href="blogs.html">Enter Our Minds</a>
</p>
</div>
</body>
</html>```
```body {
}
h1,p{text-align: center;
vertical-align: center;
margin-top:200px;}
h1 {font-family: 'Alegreya Sans SC', sans-serif;
font-weight:bolder 700;
color:#5390A8;
font-size:48px;}
div a {margin-top:800px;}
.wrapper { border:2px solid black;
width:500px;
height: 500px;
border-radius: 50%;
background-image:url('../img/hands.png');
background-repeat:no-repeat;
background-position: center;
margin:5% auto;
text-align:center;
}```
Valery Kukatov
6,996 PointsValery Kukatov
6,996 PointsIs the hands.png actually located in the folder img?