Practice HTML Basics P2

My previous post was about finishing up the basic web page by adding some styling through CSS. I achieved that but did encounter an issue I was unable to resolve when using a CSS propery called clip-path. It’s what creates the angle cut on the “Hero Image” (the large background in the top).
Too bad it “clipped” everything after it!

Web page clipping issue.

The reason for that was because everything was inside the same container (div) the property was assigned to. Ok so I put the content in another container to solve it.

Web page still clipping an image.

But this still clipped the VR user image.

Here is where I was stuck!

I reached out to the Treehouse Coummunity and posted my issue.
Luckily someone replied and solved it.
Turns out you need to use position:relative to force the VR users image to be on top.

Fixed web page

Leave a Reply

Your email address will not be published. Required fields are marked *