Dasmoto's CSS Background Image

Hi Everyone,

Like many others, I am having the damnedest time getting a background image to work for this project. I am using VS Code. Below are my HTML and CSS code. It will not work with relative nor absolute paths. The other CSS stylings are working just fine…this is all that won’t work. I looked through everything here and have been searching the Web for 2 hours now. It just wont work. Please help.

Since I’m a “new user” I can only upload one photo, so I have my HTML and CSS in the same file in the photo, but they are not that way when I am writing.

1 Like

Bump. Still looking for help.

Be sure that the path is correct for the background image.

../images/pattern.jpeg

from what we can tell of your site structure.

1 Like

I copied and pasted the absolute path directly from the panel on the left where it shows the image. It doesn’t work with relative or absolute path. I’m kind of at my wits end with it. I’ve tried all 4 images just in case it was a bad file for some reason. Nope…doesn’t work. I really don’t know what to do at this point. Very frustrating.

We cannot see your CSS. Please post so we can examine it.


D’oh! We can see it.

Okay, first thing to keep in mind is never writing Local Machine paths on your virtual website projects. Put them in a folder along with their resources, and base all URLs on that file structure.

Second thing to be in a habit of is writing http urls with forward slash.

Is there an image called pattern.jpeg somewhere? Is it the one to use in the background? You already have a paints.jpeg image in the view.


Also, please post the URL to this project so we can look at the provided resources (and the redline).

I believe mtf is correct in earlier post…CSS commented at the bottom of picture has incorrect relative path for the background image.

   ../images/pattern.jpeg

@ samurai
Yeah…I see that…that was before I changed the name of the image. Like I said, it doesn’t work with any of the images so the name of the file didn’t really matter, as it will not work with any of the images that are in the folder.

@ mtf

I don’t really understand what you’re saying to me in your last reply. It seems like it could be helpful, I just don’t understand. Can you break that down so I can understand as a newbie, please?

I’m just so confused why this isn’t working.

Here is the url for the project.
https://www.codecademy.com/paths/web-development/tracks/styling-a-website/modules/local-website-development/projects/dasmoto

Does redline mean the solution? I am sorry if I ask basic questions, but I am still pretty new, so I don’t have a ton of background knowledge. I hope that this helps.

Sort of. It is the specification of the document.

https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/dasmotos-arts_redline.jpg

Last thing to mention, it DOES work when I use:
background-image: url(“https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg”);

in order to link to the image from the source on the Web…just cant get it to work when linking from my local folder.

That was going to be my next question, whether the CDN image works or not.

Because the pattern.jpeg image is only used as a CSS background, I would recommend putting it in the same folder as the style sheet.

+ resources/
    + css/
        + skins/
            - pattern.jpeg
        - style.css
    + images/
h1 {
    background-image: url(skins/pattern.jpeg);
}
1 Like

Last ditch effort - I changed the ""s to "/"s

AND IT WORKED…

Now, the real question is…WHY?

should say ""s to "/"s

Why does it delete my backslashes in quotes?

I changed the backslashes to forward slashes…thats what I was trying to say.

The why is more difficult to explain than would be worth it. The wherefore would be that we are writing for the web so our operating system affords us the ability to use the HTTP prescribed path syntax when writing on the local machine. Down the road this course will likely have us working with a local server using actual HTTP URL to access and display in a browser.

We won’t go that far, thankfully. Just know that your local site should present with the same behavior as a web hosted site. The simplest way to do this is to structure the file folders to emulate that environment.

+ sites/
    + dasmotos/
        + resources/

… and so on.

It follows you may have parent folders to all this, the key parent being My Documents or perhaps, D:\. The latter case is the only one that will behave like a site root. That, too, is for another discussion.

OK. So the lesson that I have learned here is to use forward slashes in the code…even if I copy and paste and it wants me to use backslashes…change them to forward slashes.

Sound right?

1 Like

Yes, as long as it is for the right reason. Think WWW. We want web behavior when writing and testing locally based sites. Not all can be emulated in the browser, though. We don’t have PHP on our machine. We don’t have Rails on our machine. We don’t have Node.js, Angular.js, React.js, etc. on our machine. Those are all taught as separate advanced learner courses we needn’t get into right now.

As a learner, we benefit from spending the most time possible on the native browser, lots with NO CSS, and tonnes with style sheets. The basics of writing and running code locally are not that hard to learn, as you have found, and are skills that we never forget if we deploy them on a regular basis. Practice, experiment, innovate.

Backslash is an escape character. To have one appear as you want, escape it

"\\"   => \

Escape characters permit us to render as printable any special character that would normally not render in text.

That makes sense. Thanks.

So does the explanation of using forward slashes for the right reasons. Thanks.

1 Like