Https://content.codecademy.com/courses/freelance-1/unit-2/dasmotos-arts_redline.jpg

HTML
h1 Dasmoto’s Arts & Crafts h1

CSS
h1 {
background-image: “resources\css\images\image1.jpeg” ;
text-align: center;
font-size: 100px;
color: khaki;
}
I am trying to create the banner that is shown in the link above. I copied the images from the internet and created relative paths. Image1 will not show up on my web page if I try to produce it from my CSS file. If I paste Image1 into my HTML file then I get that image on to my web page, but I don’t know how to get “Dasmoto’s Arts & Crafts” into the image. I inspected the actual webpage and if I copy the url of the image into my CSS then the image does show up on my webpage, but I don’t want to cheat.

  1. How do I get the text into the image? 2. Why does the image not show up on my webpage from the CSS file? Thank you

background-image: “resources\css\images\image1.jpeg” ; where is this file saved?

you might need to write ".\resources\css\images\image1.jpeg" or whatever to get to the correct directory.

The file is saved here.
C:\Codecademy\Dasmoto_Arts_Crafts\resources\css\images\image1.jpeg

This background image DOES show up on my webpage when I run it from my html file.
h1>Dasmoto’s Arts & Crafts</h1
<img src=“resources\css\images\image1.jpeg” alt=""

So now I have “Dasmotos Arts and Crafts” and the background image on my web page.
1) How do I get the text into my background image?

  1. When I look at the Solution provided for this Project, they use CSS to get the background image onto the webpage:
    h1 { background-image: url(“https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg”);
    I can do this also, but this doesnt teach me how to get the text into that background-image, or how to size the background-image… its just copy and paste the link into your CSS and its done for you.

Why cant I use my local image “resources\css\images\image1.jpeg” from my CSS file to produce the background image on my webpage. I can only use the file to produce the background-image from my html file. Thank You

Try looking here for ideas and references of getting the local file:
https://discuss.codecademy.com/t/dasmotos-arts-craft-project-background-image-not-loading/571166
and here:
https://discuss.codecademy.com/t/dasmotos-arts-craft-project-background-image-not-loading/571166

In terms of getting text into your background image what do you mean?


If I run this image from my (html) file it opens on my web page. This is my local image that I downloaded and saved to my PC.


If I run that same local image file from my (css) file it DOESNT open on my web page.
The only way that image will open is if I use the image address from the web and use this—>background-image: url(“https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg”);

Why does the local image show up on my web page when I run it from my (html) file…but then it wont open when I run it from my (css) file?
I have tried .\ and …\ but that doesnt work either.

Try something like url("../images/image1.jpeg");

I think the problem is your backslashes are escaping the string. Forward slashes are much easier to deal with (this is true for programming in general).

I’d also maybe try going through navigating the command-line lessons and digging around your inspect element tool and clicking stuff to see what happens. Often times it will tell you when you try to click on the bad link from within inspect element what exactly it interpreted your url as (and is often the big clue to figuring out where it was off).