I have no idea what I'm doing. 22% into the front end enginner career path

That looks good now.

Have you checked if the images are in the images folder? Is the spelling correct? That is probably part of the exercise to fix that.

yup every image i need is in the image folder

if im squared away then ill get to work :slight_smile: ty so much

2 Likes

Good morning!

Was just hopping on to see if you were squared away. Glad to see you’ve made progress. Keep on keeping on!

thank you! im happy i got myself organized lol now im just worried about the two broken images which is weird because all the other ones show up

i think this is the relevant code


this is what it looks like but there are supposed to be two pictures, features 1 and 2, where the broken image icons are which is weird because the html looks fine to me

ok update lol i noticed the pathing was different between the features, which dont show up, and the filter images, which do show up so i edited the img url path to include resources/images instead of just /images and i got them to show up!!

1 Like

That’s the exact purpose of this project! Great job.

thank you! apparently im supposed to add this image as part of the banner for the page but i have no idea how to write it. do i have to put it in the html, assign it a class, and edit its dimensions in the css?
it’s supposed to look like this

and this is what i have so far

i wrote this

now it looks like this lol

Well, here you need to asks yourself—from what you have learned so far, how do you get an image to be the background? From what I remember, there are two ways that should be familiar in this part of the course.

One deals purely with CSS and the other deals with display and positioning.

i would set a background-image property in the css or make it a grid i wrote it out in the html do i need to assign it a class so i can work it in the css? but if i assign it a class in the html then work on it in the css i would write background-image: but then i wouldnt know what value i assigned it because the url is already in the html lol im kind of confused im sorry


this is what it looks like now

i want it to stretch and be in the background and look like how it’s supposed to
maybe i should just stay working in css and not touch the html?

I would recommend going purely with CSS for the background-image. That way you do not need to worry too much about the <img> being the HTML.

You can also check out this resource here from W3 on making responsive backgrounds.

ok thank you ill look into it

i deleted what i wrote in the html and typed this in the css but doing so made the picture disappear entirely?

line 120

Well, in this case you are now in the stylesheet and not in the index.html file—so the path changed. You will need to have the path backout from the css directory and into the images directory.

so i need to add the banner picture in index.html and assign it a class so i can edit it in the style.css file?

Nope.

This is your current directory:

vFOTOMATIC
  v resources
    v css
       | reset.css
       | style.css ← You are here
    > images ← You need to get here
index.html

Look at your current path for the image from within the stylesheet:

background-image: url("/resources/image/banner-landingpage.jpg");

Do you understand why it’s not working?

1 Like

i dont understand :frowning: i thought i linked it right /resources/images/ the picture i need is in that folder so i dont know how it’s not the correct path

That’s okay!

I want you to try to figure it out before giving the answer.

I’ll use a more unorthodox explanation. Let us say that you are in your bedroom (style.css), but you need your phone charger which is out the door (resources) and in another room (images). You can’t just reach through the wall and grab your charger. You need to exit the room and walk into the other room to get your charger.

(css → resources → images → image)

Previously, you were already outside of your bedroom (index.html) and were able to walk directly to the room with your charger in it

(index → resources → images → image)

Does that make anymore sense? I am sorry if not, my brain understands things in odd ways.

1 Like

so if im in style.css and i want to add a background image url the file pathing to link the picture where it is located would be css/resources/images/image.jpg?

line 120

it still doesn’t show up as anything i dont know if im in the wrong class selector or what also idk how i got this far in the curriculum i thought i had everything down but now i realize i dont even know the basics of anything or how anything is supposed to work

Not quite.

This is what it needs to look like:

background-image: url("../images/banner-landingpage.jpg");

If you remember the lesson that talks about how to access and backout of directories, ../ is used to backout of the current directory you are in. So, when ../ is used, you go from being in the css folder and into the resources folder.

1 Like