Parallax scrolling not showing full size image

Question

I tried to create a parallax image using css. I have created it, but image not showing full div. I mean background size is not cover. How can I do it full ?

For example, when I apply this, image shows full div.

<link href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css' rel='stylesheet'/>  

<div class="bg-center bg-no-repeat bg-cover w-full h-80" style="background-image: url(https://img.freepik.com/premium-photo/creative-idea-with-brain-light-bulb-illustration-generative-ai_438099-13380.jpg)">
</div>

But when I add bg-fixed (background-position: fixed;), image resizes and not showing full div.

Like That

How can I show full div image with parallax (No JS)

Answer 1

instead using background-size:cover, use background-size: 100% 100%. The image will be distorted but will take 100% of the div.

Answer 2

please change your height class from h-80 to h-100 now your background image shows in full screen.