Finished week 1 Scrimba Fullstack path!

Then I have finished one week of Scrimba

With 1 kid, work, 2 dogs and a girlfriend and training everyday it is difficult to find time, but I can manage to sit down on the computer here and there during some open timeslots almost every day, but I would say I haven't used more then 4 hours this week unfortunately (just a guess).....
Which is way below my ambition of 7-10 hours during a week, but at least I have had some progress.

Currently I have gotten to the first Solo Project (Hometown), where I should make a landing page for my hometown, that should consist of a hero-section, introduction/tourist activities section, and a "business"-card introducing myself as a guide.

We have been "tasked" with a requirements during this task.

• Requirements for the task -

and some stretch goals:

I am from Trondheim, Norway, so therefore I want to create a site about my hometown. I am not too creative at this point, because of the level of my skills.

I am struggling with the hero-section (embarrassing), I want to have a picture of Trondheim in the hero-section with title-boxes as overlay on that picture. I wrapped the hero-section in a div and gave it a class (perhaps an ID would be more correct?), but I am not sure how to set the picture to full width without cutting a piece of the picture.

I used CSS for setting the background image, and tried using background-size: cover; but that didn't work. I have also tried setting the width to everything from 400px to 1200px, but when it exceeds 900px it cuts out a part of the picture (height is 400px), so I am a little bit stuck here unfortunately..

Right now it is sunday evening, I have a baby that is sick with fever, and tomorrow is work so I have to log off but I will continue the troubleshooting. If I am not able to solve it within a decent amount of time I will either continue, or ask ChatGPT (if I can't find anything on Google)..

Attached is how it currently looks..

Comments

[Kai Alder]

Nice work keeping at it with a full schedule like that. 4 hours with a kid, dogs, and a job is still progress — don't underestimate consistency over raw hours.

For your hero section issue, here's what's probably happening: background-size: cover should work, but you also need to make sure the container div has an explicit height. The background image won't stretch the div on its own since it's not part of the document flow. Try something like:

.hero {
  background-image: url('your-image.jpg');
  background-size: cover;
  background-position: center;
  height: 400px; /* or use min-height */
  width: 100%;
}

The background-position: center part is key — that's what controls which part of the image gets "cropped" when the aspect ratio doesn't match. Without it, it defaults to top-left and you lose the interesting parts.

Also, using a class is totally fine here — IDs work too but classes are more flexible if you ever reuse the style. You're thinking about it the right way.

Hope the little one feels better soon 🤞

[Fredrik Berg]

Thank you very much for giving feedback, I really appreciate it, and it's extra valuable for me when it comes from someone with alot of competence!

I tried your code, it was weird but it worked whenever I adjusted the browser and "scaled" it down, but when the browser is maximized it kind of "zooms" in on the hero-section/image and it's not showing the whole image. I think I need to troubleshoot some more..

Examples below: