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
Mark Collins
2,955 PointsUnable to write on background image
HI I have a background image of the sky which loads on the style sheet, but I am unable to write text on this background. What must I do to enable writing text over the image? I've spent ages trying to figure this out and it must be sooooo easy!
<body> <header class="main-header"> <div class="sky2"> <h1> Text here </h1> <p>This is a test</p> <img src="img/steadfastlogo-sml.jpg" alt="steadfast logo"> <a href="img/sky2.jpg"> <img src="img/sky2.jpg" alt="sky">
10 Answers
Justin Pacheco
15,060 PointsTo write some text on a background image you will have to put the image inside a folder(you can choose the name). Go to the CSS file and use the background-image: url('../folder name/link of the image'); The ../folder name will start searching the img folder and put that image on the website. First time answering a question so I hope it makes sense. :)
Example:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="main-header">
<p>Journey Through the Sierra Nevada Mountains</p>
<h1>Lake Tahoe, California</h1>
</header>
</body>
</html>
.main-header {
height: 850px;
background-image: url('../img/mountains.jpg');
}
Mark Collins
2,955 PointsThanks Justin! You did the trick! And thank you too, Ashley for all your help!
Cindy Lea
Courses Plus Student 6,497 PointsTry adding ./ in front of img in your path
Ashley Gonzalez
4,530 PointsHi Mark. It doesn't look like it's a problem with your coding there. Like Steven a snapshot of your html and CSS referring to this section would help. It can be a display issue in CSS, it could be a unclosed HTML tag somewhere before this code, or even grouping.
Mark Collins
2,955 PointsHi again, Thanks for your assistance. Actually I'm not using the workbench, I'm using notepad++, so getting a shot isn't so easy.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Steadfast Wills | Becky Feaney</title> <link rel="stylesheet" href="css/style.css"> <style>
</style>
</head> <body> <header class="main-header"> <div class="sky2"> <h1> Text here </h1> <p>This is a test</p> <img src="img/steadfastlogo-sml.jpg" alt="steadfast logo"> <a href="img/sky2.jpg"> <img src="img/sky2.jpg" alt="sky">
</header>
<section>
<p>Details will go here.</p>
</section>
<footer>
</footer>
</body>
</html>
The text goes anywhere but on the image, Sky 2. I hope this works. If not I'll paste it into the workbench,
Ashley Gonzalez
4,530 PointsLet me know if Justin was able to help. It should actually.
<head>
<title>Example</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="main-header">
<p>Journey Through the Sierra Nevada Mountains</p>
<h1>Lake Tahoe, California</h1>
</header>
</body>
</html>
^ cleaned it up for you. :)
Mark Collins
2,955 PointsHere is a link to the snapshot on workbench. I am absolutely stupified by this!
Ashley Gonzalez
4,530 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Steadfast Wills | Ben Healy</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="main-header">
<div class="sky2">
<h1> Text here</h1>
<p>This is a test.</p>
<img src="img/bear.jpg" alt="steadfast logo">
</div>
</header>
<section>
<p>Details will go here.</p>
</section>
<footer>
</footer>
</body>
</html>
try that out. Replace the "bear.jpg" with the image you desire, and make sure the image is in the img folder. i didn't see it in there originally. Let me know if that fixes it.
Mark Collins
2,955 PointsHiya I loaded your code, I get the sky as before (changing from 'bear'), but the text is anywhere but on the background pic (sky2). My problem remains the same! It's driving me nuts...
Ashley Gonzalez
4,530 PointsMark,
The clouds are part of the background, no? Then you need to add that in your CSS onto the .main-header tag, with background-image: url("image.jpg");
but to combine them, below is a CSS-tricks and how they did it. https://css-tricks.com/tinted-images-multiple-backgrounds/
Mark Collins
2,955 PointsSo the browser is separating clouds from sky? I haven't used any css yet for this picture and corresponding text. Has this messed me up do you think? I mean I am getting the blue coudy sky, and I am getting text, but simply no text is on the picture itself..
Ashley Gonzalez
4,530 PointsCan you update the workspace with the most current work and share it again please. And just to clarify, you want text to show on top of the background from a <p> or other elements. Or actual text on the image? Because if you want text on the image itself, you might not be using the image with the text.
Mark Collins
2,955 PointsHi again Ashley,
In this I have copied the css file. I don't seem to be able to upload my image. I want to write text (preferably <p></p>) on the image and add a logo. I have the logo above the image atm, and the text is elsewhere, in fact anywhere but on the background itself! Thank you for your patient assistance, it is much appreciated!
Mark Collins
2,955 PointsArgh, the code looks horrible!
Thanks all. I hope Justin has solved the issue. If not I'll just have to copy the text onto a workbench,
Steven Parker
225,770 PointsSteven Parker
225,770 PointsIt can be hard to see the issue without the complete project, particularly when images are involved. You can share everything at once if you make a snapshot of your workspace and provide the link to it.