Background copy image drag

Hey y’all,

I’m making a personal project to replace one of the responsive web design projects. something similar to the product landing page. I made an image the entirity of my background and want it to follow as you scroll down the page but I’m not sure how to make the web page bigger in size. I’m sorry if this is a novice question I just haven’t been able to find the right words to get the results I want on google.

Here is my code: https://codepen.io/IanGoodman/pen/qBZzWEr

I’m trying to make something similar to this: https://djpoolboi.com/

Any help is appreciated!

hey @iangoodman,

One thing you dont wanna be doing is using position: absolute; on everything thats just gonna mess your page up very quick.

just giving your image a position: fixed; is enough as you have already, then wrap everything else in a div and have that on top of the image, it seems like your over complicating things a lot by looking at your code have you ever used flexbox?

Have the every section set to minHeight: 100vh; that way your title will fill the web page then you can scroll down to the next section but with min-height the section can height will grow if you change to mobile or tablet I cant make you an example if you want so you get what i mean

thanks so much for your comment.

I feel like my code is messy because I was looking up how to a lot of what my page consists of on google and pretty much copy and pasted accordingly for the nav bar, positioning of h1, and making my background image the entirety of the page. I think I tried using flex box in the beginning and was having difficulty.

any help examples would be great

yeah the worst thing is trying to copy code from a real website because most are using other libraries or frameworks, stuff like bootstrap or react so it will never work out properly.

I suggest doing a course on flexbox so you understand how it works and you will see how much easier it is than trying to do everything with absolute cuz that will mess your page up on different sized screens, anyway there are plenty of free flexbox courses around, on here, youtube, theres even games to help you learn it such as http://www.flexboxdefense.com and https://flexboxfroggy.com.

I will change your code into a flexbox version for now and post it so you understand how its working, but i would defo learn how it works yourself and things will become much easier mate :slight_smile:

thanks so much,

ive actually completed flexbox froggy. I think the route of my issues here was trying to get my background image to fill the entire screen

yeah i remember doing that myself now its quite hard when you dont know how, there’s a css property called object-fit that really helped me when trying to get images to fit stuff https://www.w3schools.com/css/css3_object-fit.asp

@iangoodman,

do you want the divs to change color when scrolled too like the other page? il have to use some javascript to do that if ya want, heres the normal one without anyway just fork it back.

thanks so much for your help on this. I’m looking now and this is very much what I was going for. I’m tryin got back track your code and see the type of things you changed in order to get it to work.

i see you grouped “mailing list” and “title” in the same div and implemented the same flexbox directions for both. while keeping them separate from the Nav bar.

I also noticed that you didn’t use the object-fit direction that you mentioned so I guess I was just making extra mistakes with my layout code for no good reason. I think it got messy once I began copy and pasting stuff from google.

While asking for your help to make things fade as I scroll seems incredibly exciting and enticing, if you could just briefly describe some of the changes you made and give me some tips for things to look out for, that would be equally appreciated.

Thank you so much for your help, really.

1 Like

hey @iangoodman,

I have just changed some of the tag names so makes a bit more sense, main and section tags.

Wrapping the sections in <main class="main"></main> is not needed and does not change anything on the page but it just makes things more easier to read and understand and keep it more tidy, all your sections will go inside the main section, and your footer will go at the bottom, and header/nav at the top, iv set both sections to height to 100vh so they fit all web page height.

structure…

<header>
  <nav>
    
  </nav>
</header>

<main>
  <section>
    
  </section> 
  <section>
    
  </section>
  <section>
    
  </section>
  <section>
    
  </section>
</main>

<footer>
  
</footer>

I didnt use it because i didn’t need to it works fine without it, i usually use if when i use an image that’s inside a div like cards or thumbnails so you can fit it properly, like if i want the image to be the same aspect ratio as the div i would use object-fit: cover; which will cut off part of the image to fit the box.

For your nav i just gave your links a padding and the used justify-content: flex-end; to push them to the right, doing it with padding gives them a bigger click box so they are easier for people to click, but this way it wont be responsive so you will have to change some stuff in media queries for tablet and mobile screens.

If your gonna copy code from websites its best to try and understand what its doing before you copy it and i wouldn’t copy loads of different ones and peace them together it never works out well especially while your still learning its just gonna get confusing.

hey man, do you know why i can’t click on my input form for the mailing list?

Thank you!

@iangoodman, its because it goes behind the nav, if you give your nav a background color you will see what i mean, you can use z-index to move things forwards and backwards as long as the has a position.