How to implement:

With tailwind installed in your project (tutorial), implement these tailwind classes in your parent div where it will reflect the background.

export default function Background() {
  return (
        <div
          className="relative flex flex-col h-screen bg-black before:absolute before:inset-0 before:w-full before:bg-black before:opacity-60"
           style={{backgroundImage: `url(https://readymadeui.com/dark-bg-image.webp); `}}
         >
       
            {your page / component}
        </div>
  );
}

View background:

Mobile and Desktop:

Note

If this background has served you in any way, consider following me on github or supporting me to continue working at BacksEasy.