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
John Ngonidzashe Muzanenhamo
8,612 PointsFailing to add background image and color on the header
Guys please help me. I am failing to add a background image and background color to my header the following is the code for my index.html and style.css file
<html>
<head>
<title>ICT</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header id="top" class="main-header">
<span class="title"> IT ENGINEERS</span>
<h1>Computer LABS</h1>
</header>
</body>
</html>
/*Main styles*/
.main-header {
background: #6c21de * url ('../img/buildings.jpg') no-repeat center;
padding-top:50px;
height: 600px;
background-size: cover;
text-align: center;
}
The style.css is located in the css folder and the the images are located in img folder. The index.html is the only file not in folder. In other words i have 2 folders.
SO PLEASE MAY SOMEONE HELP ME. My email is ngonexm@gmail.com you can also send feedback on that email.
5 Answers
Kallil Belmonte
35,561 PointsI had to put a placeholder image, here it is: https://codepen.io/anon/pen/RMjBMR?editors=1100
Kallil Belmonte
35,561 PointsHi,
The correct syntax in your case is this:
background: #6c21de url('../img/buildings.jpg') no-repeat center;
For for info go to: CSS background Property
John Ngonidzashe Muzanenhamo
8,612 PointsThank you, but i do not know why i cannot see my buildings background image after i have written what you have told me.
Kallil Belmonte
35,561 PointsPlease put all your code here so I can take a better look:
John Ngonidzashe Muzanenhamo
8,612 PointsI have added my code on codepen but how do you see it because i have never used codepen before.
Kallil Belmonte
35,561 PointsHi, plese put your code here and tell me and you do so: (don't forget to save on the top right button)
John Ngonidzashe Muzanenhamo
8,612 PointsI have saved my pen this is the new generated url which you can use to view the pen https://codepen.io/nmuzanenhamo/pen/zWPdeN Thank you
John Ngonidzashe Muzanenhamo
8,612 PointsThank you so much for the help
Austin Whipple
29,725 PointsAustin Whipple
29,725 PointsI've edited your question to format the code blocks a bit. Check out the Markdown Cheatsheet link below the text editor for more information.