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

Unable 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">

Steven Parker
Steven Parker
241,957 Points

It 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.

10 Answers

To 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');
}

Thanks Justin! You did the trick! And thank you too, Ashley for all your help!

Try adding ./ in front of img in your path

Hi 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.

Hi 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,

Let 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. :)

Here is a link to the snapshot on workbench. I am absolutely stupified by this!

https://w.trhou.se/nj4xf4w1s2

<!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.

Hiya 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...

Mark,

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/

So 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..

Can 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.

Hi again Ashley,

https://w.trhou.se/cd8zhx8hnn

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!

Argh, 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,