Fixed background for 1/3 of the page

HTML/CSS
1

I tried to re-create the Starbuck webpage for html/CSS project. 1/3 of the background should be fixed and not scrolled up. I tried to make a fixed one. However, the bottom is scrolling, leaving empty page. Can someone help me with this please?
.main {
display: grid;
grid-template-columns: 1fr 2fr;
}

.site {
width: 37vw;
height: 100vh;
background-image: url(images/summersip.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: fixed;
margin-top: 1rem
}
.top-image {
width: 62vw;
margin-top: 1rem;

2

can you kindly send some images of the website and the error?

3

Summer 2 FY23 FLH v2.png
Summer 2 FY23 FLH v2.png1335×534 38.1 KB

4

Hi,

Thank you so much for your reply! I tried to set that as background image. I didn’t know any other way. Thank you for your time!

.site {

width: 37vw;

height: 100%;

background-image: url(images/summersip.jpg);

background-repeat: no-repeat;

position: sticky;

background-size: 100%;

background-position: fixed;

margin-top: 1rem

}

.top-image {

width: 62vw;

margin-top: 1rem;

}

5

summersip
summersip724×1009 42.4 KB

6

@PPveena, It looks great, are you watching a tutorial or something? I was free so I wanted to try projects of my own, where did you get the idea, what resources did you use and where did you get the high quality images, and lastly did you learn this from the course from Mosh? Just curious because it looks awesome, I quit coding for a while but I am back so I wanted to start off with a good project like yours.