Help for the Portfolio Page

Hello campers,
I am doing the portfolio page project and it is still in a really early stage of development. But I have a problem holding me back. I will appreciate if you have a few spare minutes to help me out.

This is the page https://codepen.io/lordviet/pen/RMOwpE

So in line 14 of the code,

, the height statement is there in order for the background image to have the size it does. But a problem occurs, if I want to add text or another background image or image it has a huge white gap that is the actual problem. How can I keep the size of the background image but remove the white gap so that whatever I put is just below it?

Thank you for your time

Hello, could u explain more?

First, thank you for your time and interest. So, I want a portfolio page that has a few background images, one after the other with some text over them. However in defining the properties of the first background image I made the height too much - 1000px (this can be seen in line 14 of the html code), so that the image looks nice. This causes the problem that if I try to add another image below this one (for background) it has a white space in-between because of that height. You can see where the text from h3 is displayed. If I put an image below, the result is pretty much the same. Any tips on either how to solve it or to avoid this kind of problems if I start over will really help me. Thank you once again.

use => [ background-size: cover; ]
instead of [ background-size: contain;

this is in the .home class and remove inline css

1 Like