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>
        </div>   

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:

2 Likes

Thank you, it makes sense now.:slight_smile:

1 Like

I’ve used the YouTube walkthrough, but made some adjustments so it’s even closer to the specs. Let me know if you have further improvement ideas. I might try and make it responsive next and use semantic html where I can.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tea Cozy</title>
    <link rel="stylesheet" href="resources/style.css">
</head>
<body>
    <!-- Header Section-->
    <header>
        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" id="logo">
        <ul class="navigation">
            <a href="#mission"><li>Mission</li></a>
            <a href="#featured"><li>Featured Tea</li></a>
            <a href="#locations"><li>Locations</li></a>
        </ul>
    </header>
    
    <main>
    <!-- Mission Section-->    
        <div id="mission">
            <div class="mission-container">
                <div class="text-over">
                    <h2>Our Mission</h2>
                    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
                </div>
            </div>
        </div>

   <!-- Featured Tea Section -->
        <div id="featured">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy</h4>
        </div>
        <div class="image-container">
            <div class="images">
                <img src="resources/images/img-berryblitz.jpeg">
                <h4>Fall Berry Blitz Tea</h4>
            </div>
            <div class="images">
                <img src="resources/images/img-spiced-rum.jpeg">
                <h4>Spiced Rum Tea</h4>
            </div>
            <div class="images">
                <img src="resources/images/img-donut.jpeg">
                <h4>Seasonal Donuts</h4>
            </div>
            <div class="images">
                <img src="resources/images/img-myrtle-ave.jpeg">
                <h4>Myrtle Ave Tea</h4>
            </div>
            <div class="images">
                <img src="resources/images/img-bedford-bizarre.jpeg">
                <h4>Bedford Bizarre Tea</h4>
            </div>
        </div>
    <!-- Locations Section-->
        <div id="locations">
        </div>
        <div class="locations-container">
            <h2>Locations</h2>
            <div class="box-container">
                <div class="location">
                    <h3>Downtown</h3>
                    <p>384 West 4th St</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="location">
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue</p>
                    <p>(Northwest Corner)</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="location">
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue</p>
                    <p>Second Floor</p>
                    <p>Portland, Maine</p>
                </div>
            </div>
        </div>
    <!-- Contact Section-->
        <contact>
            <h2>The Tea Cozy</h2>
            <h5>contact@theteacozy.com</h5>
            <h5>917-555-8904</h5>
        </contact>
    </main>
<!-- Footer Section-->
    <footer>
        <h5>copyright The Tea Cozy 2017</h5>
    </footer>
</body>
</html>
body {
    font-family: Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
    margin:auto;
}

header {
    position: fixed;
    height: 69px;
    width: 100%;
    border-bottom: 1px solid seashell;
    display: block;
    top: 0;
    background-color: black;
}

#logo {
    height: 50px;
    float: left;
    padding-left: 10px;
    padding-top: 9.5px;
}

.navigation {
    float: right;
    height: 100%;
    margin: 0 auto;
}

.navigation a {
    height: 100%;
    display: table;
    float: left;
    padding: 0px 20px;
}

.navigation a li {
    vertical-align: middle;
    display: table-cell;
    text-decoration: underline;
    color: white;
}

.mission-container {
    background-image: url("/Users/petrajung/Desktop/Codecademy/Tea Cozy/resources/images/img-mission-background.jpeg");
    background-repeat: no-repeat;
    background-position: center;
    height: 700px;
    max-width: 1200px;
    margin: 40px auto;
    display: flex;
}

.text-over {
    margin: auto;
    width: 100%;
    background-color: black;
}

#featured h2 {
    margin-top: 80px;
}

.image-container {
    display: inline-flex;
    max-width: 1000px;
    flex-wrap: wrap;
    justify-content: center; 
}

.images img {
    height: 200px;
    width: 300px;
    padding: 0px 15px;
}

.image-container h4 {
    margin: 10px 0px;
    padding-bottom: 20px;
}

.locations-container {
    height: 500px;
    max-width: 1200px;
    margin: 40px auto auto auto;
    padding-top: 50px;
    background-image: url("/Users/petrajung/Desktop/Codecademy/Tea Cozy/resources/images/img-locations-background.jpeg");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
}

.locations-container h2{
    margin-bottom: 15px;
}

.box-container {
    max-width: 1050px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.location {
    width: 300px;
    max-height: 280px;
    padding: 20px;
    margin: 0px 20px;
    flex-basis: 30%;
    background-color: black;
    opacity: 1;
    box-sizing: border-box;
}

.location h3, p {
    padding-bottom: 40px;
    margin: auto 0px 0px 0px;
}

footer {
    display: block;
    text-align: left;
    padding-left: 20px;
}