Question 288954 in Html Question posted in
Some basic documentation can be found here.

Html – Parallax scrolling not showing full size image

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 enter image description here

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

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search