Tea Cozy Mission and Location Images

I have been going over and over this, I know the error must be in the file path in the css, since the html images show just fine. I’ve read a lot about the pathways but I have tried all the different ways I could think (and have seen on here) and no version of the image pathway seems to have them show.

Here is my html:

    <div id="mission">
            <div class="mission-container">
                <div class="text-ontop">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Siustainable, Small Batch, Fair Trade, Organic Tea</h4>

And here is the CSS:

 mission-container {
    background-image: url("./images/img-mission-background.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    max-height: 700px;
    max-width: 1200px;
    margin: 40px auto;
    display: flex;

I’m using Visual Studio Code, so when I start to type in a url it assists in showing the directory, I have tried with and without the ‘./’ but still no luck.

Th rest of the exercise is complete but this is so annoying, it’s going to be a simple fix but at this point I’ve become code blind :blush:

A few questions

  1. Why are the images in webp format? I just checked the project and they are all jpg except for 1 png file.

  2. Is your CSS file linked to your HTML file properly? They’re not in the same folder so in your HTML file you’d need the following in the <link> in the <head></head> section. href="./Resources/index.css" Could you show a screenshot of the top of your HTML file?

Hey, thanks for your reply.
All the images only gave that option for saving immediately and to be honest i didn’t pay too much attention since the files are displaying when they are linked in the html and all other style is being applied from the style sheet to the site. I could copy them and save to a png or jpeg, but with some working an some not I assumed it was the pathway I was adding to the css that was the issue.
So I’m sure I have linked that as it should be, here’s a quick image of the page so you can see why I’m confident it’s linked correctly:

Gotcha. Yeah, that looks like it is all being styled correctly so the CSS must be doing its job. I’m getting a small picture when I pasted your code, so I’m wondering if it has something to do with the mission-container class or the #mission div not having an explicit height or width set. HTML automatically makes the images appear on the page but CSS needs a container to have a width and height before the background image will appear. Setting a max and/or min isn’t specific enough for CSS, I think.

I tried giving .mission-container a width of 95% and a height of 700px , and it made the image display nice and big.

1 Like

Amazing, thank you so much that has solved one of the two, I just tried to add that same change to the second image lower down and it hasn’t appeared.

I went with max initially as i was thinking of adding in media queries later on, to improve appearance on mobile etc.

I’m going to spend some time looking at that second box now that I realise it wasn’t the pathway and see if I can figure out why it’s not showing as well. Thanks so much for resolving that one and pointing me in the right direction :slightly_smiling_face:

1 Like

No problem! Glad you got that first one figured out.

Managed to get the second one to display too, thanks a lot for your help, it was really bugging me

1 Like

Hi @rebeccamears46652517, I’ve been in the Tea Cozy mission but stuck in the “tea of the month” images as I cannot figure how to get the arrangement of that image using flexbox. It will only do one line row or one line column.

I found a really helpful walkthrough when I was trying to fix some of mine, there are three parts, the first one is here hope it helps :+1:

1 Like

Thank you, it makes sense now.:slight_smile:

1 Like