Background image not filling page, any other tips

Hello all,

I hope this post finds you well and that you have had a good time over the new year.

I’m creating a space themed tourist website as part of a HTML/CSS challenge and I have decided to use Flexbox and complete the task with a mobile first approach.

I’m a little ways into my project with the just the mobile layouts for the home and destination pages mostly complete. I am using the iPhone 6/7/8 and the iPhone X responsive templates in Chrome for reference.

I cannot get the HOME background image - which is smaller than the DESTINATION background image - to cover the viewport, I cannot get it to sacrifice the aspect ratio to fill the screen or anything like that.

Aside from the above, it would be cool to get some feedback for my project in general to help fill out any inconsistencies as it’s still early days and there may be things I could improve or change on.

Link to my project:

Many thanks,

Fran

Have you deployed this? It would be easier to see what the problem is from a live example,

You can put it live using github pages

Hi, thanks, you’re right. I have just deployed it to https://franko-c.github.io/space-tourism/ and it should be up soon. There isn’t much to it right now but I’m hoping for some tips/general feedback.

Thanks

on the homepage, if you give the body min-height: 100vh; background-position-y: 65%; does that produce the desired result?

If you like to set the background image to full width and height you need to set it as:

width: 100vw;
height: 100vh;

Another option would be:

object-fit: cover;
background-attachment: fixed;

Btw: Looks like a really cool project :slight_smile: