Skip to content

Instantly share code, notes, and snippets.

@kayode-adechinan

kayode-adechinan/tailwind-bg-img-overlay.html

Created November 2, 2022 00:52
Show Gist options
  • Save kayode-adechinan/d8c78b97bea100fbdcdf417a0a703b22 to your computer and use it in GitHub Desktop.
Save kayode-adechinan/d8c78b97bea100fbdcdf417a0a703b22 to your computer and use it in GitHub Desktop.
Download ZIP
tailwind background + image cover + overlay
Raw
tailwind-bg-img-overlay.html
<div className="absolute top-0 h-full w-full bg-cover bg-center" style={{ backgroundImage: "url(\"https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80\")" }}><span id="blackOverlay" className="absolute h-full w-full bg-black opacity-75" /></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment