Hello! I just finished learning the basics of HTML and CSS so I wanted to get some practice in. This is my first-ever challenge on GitHub! Unfortunately, I haven't learned Java Script yet so I couldn't make this website interactive, so here's the design part! I've had some trouble trying to fit the background pattern into the top part of the page, which is why my CSS code for it is messy. I made the width of the image 100% so that it covers the entire width of the page, at the same time trying to make the height smaller. But doing so made the width of the image smaller even though it's still 100% and I don't understand why. Any feedback would be appreciated!
@MuhammadZariyanAsif123
Posted
Hi,
You can fixed this issue by setting the body with background-image with this pattern and background-repeat = "no - repeat" something like this.
In CSS FILE:
body { background-image: url("your image"); background-repeat: no-repeat; }
@WestonVincze
Posted
Great job taking the first steps to learning web development!
Responsive "hero" images are a bit tricky. The reason the height changes is because if the width is 100% the only way to maintain the correct aspect ratio is to shrink the height. There are many approaches to solve this problem, each with its own trade off.
I solved this problem by setting a fixed height for the background-image and aligning it to the top center of the page. That way as the screen shrinks the image height stays the same and the edges get cropped. The reason I chose this solution is because I wanted to ensure that the FAQ section and hero image retained their overlapping positions.
Also, HTML5 has relatively new <details> and <summary> elements that can create collapsible content (like an accordion) without the need for JavaScript. The browser support is somewhat limited but that's not a problem for a task like this.
// details is a wrapper element
<details>
// summary is where you would put the "question"
<summary>
(question)
</summary>
// anything inside details and outside of the summary tag will be hidden or shown when the summary is clicked
<p>
(answer)
</p>
</details>
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
