Https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/layout-with-flexbox/projects/tea-cozy

When you ask a question, don’t forget to include a link to the exercise or project you’re dealing with!

If you want to have the best chances of getting a useful answer quickly, make sure you follow our guidelines about how to ask a good question. That way you’ll be helping everyone – helping people to answer your question and helping others who are stuck to find the question and answer! :slight_smile:

https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/layout-with-flexbox/projects/tea-cozy

2 Likes

what is the problem exactly?

I was unable to get the first background image to display properly, then not at all.

Weirdly, after changing the CSS property from ‘background-image’ to ‘background’, it worked. I cannot explain this behavior but was finally able to move on from the project.

Thank you,

Mary Lins

Could you send your code?

Seems like you have also put the image in the html code. Am I right? That way when you then define a background-image in css it kind of gets messed up. Removing -image only made it so that you ask for a css-property that does not exist and then the HTML image is displayed as normal :wink: .

No, the image is not in the html code.

Thanks,

Mary

1 Like

Okies :wink: . Any chance you can provide us with the code using the </> button in the message box or by providing a github link?

I have uploaded my code files to github here:

https://github.com/linsmarye/My-Projects

1 Like

Thx! And found it :wink:

I removed the center center no repeat from the background-image css property because whilst background: supports that, background-image: does not.

Instead I added two more lines to the #mission css properties, et voilà it works:

#mission {
	background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg");
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 700px;
    width: 1200px;
    margin-top: 69px;
}
1 Like

Also I noticed you used some css properties that are new to me.

margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;

Upon checking online, they seem to be experimental. It may however be wise to use margin-left, margin-right etc. instead. My document writer did not recognize them :stuck_out_tongue: .

Also I noticed one syntax error in your html which may be of no relevance but nevertheless. Your first two images have a / before the closing >.

You are awesome! Thank you so much for your time and expertise! :blush:

2 Likes

Thanks for the additional checks/points, Jannes. I will make those suggested corrections.

  • Mary
1 Like

I am new to this forum. I think I marked the solution box … hopefully in the correct place. :blush:

1 Like

Done! Sorry about that!

Have a great day!

  • Mary
1 Like