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!
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
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 PointsCSS and HTML
l am trying to upload this image onto my background but it doesn't seem to be working whenever l refresh my browser. the html code is as follows: <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/futurelabs.css" type="text/css" media="screen">
</head> <body> </body> </html>
the css: body { font-family: 'Nunito', sans-serif; font-weight: 100; font-size: 1.125em; color: #faf3bc; background: url("img/london.jpg") repeat; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-size:20px; }
what exactly am l doing wrong here? Nick Pettit
7 Answers
Chris Dziewa
17,781 PointsCould you include your entire html file also if you type 3 backticks before with the name of the language and 3 backticks after your code, it will be formatted nicely. Do you see anything when it refreshes? With formatting:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Mike Bronner
16,395 PointsOne thing that CAN mess some browsers up is if the DOCTYPE is off. In your case you might try how Chris wrote it: <!DOCTYPE html>. You'll notice the lowercase variation. If that doesn't fix it, please do post out your entire code so we can play with it on our machine. :)
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Pointswith a few search online i change the whole html code to :
<!DOCTYPE html><head><link rel="stylesheet" href="css/futurelabs.css" type="text/css" /></head><body></body></html>
but this aint doing the trick eitrher
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 PointsFor some reason the browser wont post all my code on here :(
Mike Bronner
16,395 PointsHI Hackey, please post your entire code from the page you are working on.
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points'''<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html> <head> <link rel="stylesheet" href="css/futurelabs.css" type="text/css" />
</head> <body> </body> </html>'''
Mike Bronner
16,395 PointsLooks like it didn't copy all your code. However, You need to get rid of the <?xml tag before the DOCTYPE. DOCTYPE must be the first thing on the page.
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points```<!DOCTYPE html> <head> <link rel="stylesheet" href="css/futurelabs.css" type="text/css" />
</head> <body> </body> </html>
Mike Bronner
16,395 PointsHackey, if there is no other code on the page, it won't display anything -- all you'll get is a white page. I'm assuming there is no other code, because each time you posted code, it only included the DOCTYPE, but no HTML. Please post the ENTIRE code you are working with in that file, if there actually is more. :)
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Pointsthere is i was trying to use the markdown cheatsheet but that aint working for me. well probz not using it well. its <!DOCTYPRE html><head><link rel="stylesheet" href="css/futurelabs.css" type="text/css" /></head><body></body></html>
Mike Bronner
16,395 PointsWhen marking up code in the forum, you want the opening line with the three apostrophes to stand on its own, then add code in the following line. Like so:
code
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Pointsi keep trying but whenever i use the 3 backtips and try saving or posting i get an alert saying the page am looking for cant be found.
Mike Bronner
16,395 PointsPost your code to pastebin.com and share your link. :)
Mike Bronner
16,395 PointsI meant to escape it, but didn't work. Remove the dashes when doing it for real:
--
code
--
Mike Bronner
16,395 Pointswow, that didn't work either :-|
but you get the idea:
- escape sequence of 3 apostrophes
- code on next line(s)
- escape sequence of 3 apostrophes on last line
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Pointsabit confused now is it the backtips or the apostrophes?
'''html <!DOCTYPE html> <head> <link rel="stylesheet" href="css/futurelabs.css" type="text/css" />
</head> <body> </body> </html> '''
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Pointsthat aint working
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/futurelabs.css" type="text/css" />
</head>
<body>
</body>
</html>
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Pointsohh there we are ^^^^
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Pointsthe css code as follows
body {
font-family: Georgia, serif; /* default page font */
background: #bbb url(./images/london.gif);
margin: 0; /* shorthand for all margins = 0 */
padding: 0; /* no padding */
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
Mike Bronner
16,395 PointsYou're missing the opening HTML tag. The code should look like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/futurelabs.css" type="text/css" />
</head>
<body>
</body>
</html>
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Pointsjust tried that instead of it coming up with the picture i uploaded it comes up with a grey background
Mike Bronner
16,395 PointsRemove the "./" from the URL of the image in the CSS file.
Mike Bronner
16,395 PointsIt's getting the gray background from #bbb, so we know it's working. But it can't find the image because of the "./" in front of the images directory. Should be:
background: #bbb url(images/london.gif);
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Pointsthank you that worked :). one more issue though. it comes up with three different tiles of the image. how to i make this into one stretched image to fit the browser
Mike Bronner
16,395 PointsThat is a whole other issue. Scaling background images is fairly complex and probably beyond the scope of the course you are taking at the moment. The following should provide some insight: http://stackoverflow.com/questions/5662735/stretch-background-image-css.
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Pointswont it work if i use the grid system and set the size to 960px?
Mike Bronner
16,395 PointsNo, background images aren't limited by the size of the element they appear in. They will always display in their native size, unless specifically modified.
Chris Dziewa
17,781 PointsTry using ``` background-repeat: no-repeat; background-size: cover;
in your body css. Also make sure you are using a larger resolution photo. the cover attribute will fill the body but it could distort the image if its resolution is too low. For more info about working with images head over to Guil's CSS Deep Dive when he talks about images.
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Pointsthat did worked thank you guys for your help this evening so much grateful Chris Dziewa and Mike Bronner
Chris Dziewa
17,781 PointsAnytime man! Glad we could help.
Mike Bronner
16,395 PointsYes, glad to hear that everything is working now. :) Best of luck!