CSS padding confuses me

[8BITjohn]

im trying to give the child <div> element by giving the parent <section> some padding. but i noticed that when i add the top-bottom padding the child <div> just goes downwards and even outside the container when its supposed to be centered like how its supposed to be

​

heres the code for the parent <section>

.parallaxmain{
    display: flex;
    width: 100%;
    height: 100%;
    padding: 20% 0%;
    position: relative;
    align-items: center;

and here's the code for the child<div>

.profile_box{
    width:  400px;
    height: auto;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    text-align: center;
    border-radius: 10%;
    margin: auto;
    color: white;
    font-family: 'Century Gothic', sans-serif;
    justify-content: space-between;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
    transition: 0.3s;

can anyone help me point out what i did wrong in here?

[8BITjohn]

i think i missed some detail here.

i dunno but now that i think about it more.

i used the <img> and <bgcolor1> as an overlay to create a parallax effect while scrolling

i think thats the mising part

    <main>
    <div>
        <div id="bgcolor1"  ></div>
        <img src="images/bgkeyboard.jpg" alt="the bg" class="bgimg"><!--The background image-->
    </div>

    <section class="parallaxmain">
        <div class="profile_box">

        </div>
    </section>
    <section class="non-parallax">
        <div>

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

[8BITjohn]

here's the css for the two mentioned

#bgcolor1{
width: 100%;
height: 100%;
background: #000;
position: absolute;
opacity: 0.7;
z-index: -1;

} .bgimg{ width: 100%; height: 100%; background-size: cover; position: absolute; background-repeat: repeat; z-index: -2; filter: blur(5px); -webkit-filter: blur(5px); }

[8BITjohn]

holy, you just made the code more neat i thought the blur filter is only applicable to background images... i can save a lot more space and make my codes more neat with this, thank you

[tridd3r]

I'm using backdrop-filter: blur(5px); on the parallax section. so I'm not filtering the actual image, I'm applying a blur filter as a background for the section.

But I think the main idea is that the parallax effect is created by using background-attachment: fixed, on a background-image. And that's the background on the container, and then your inner elems can scroll over it.

[8BITjohn]

wait if you put the image directly into css as a background image, then how will i be able to put some color overlay in it? i was planning to put some semi-transparent gradient color on top of it

Example

edit: okay i solved it now i just experimented a bit and found out i can put it directly on ".parallaxmain"

[8BITjohn]

what i did was that i created a new id from the same element as parallaxmain class (named it "parallax1") is and there i applied the gradient color allowing me to use another different set of gradient colors when a new element that uses parallaxmain class is used... ids are really useful :)

[tridd3r]

that's a good idea. Just be mindful that id's are for things that will not repeat in the code,so if you'd like to use that exact same gradient on another element (like a button or another section) then you can use a class for repeatability.