Search by Queries/Bugs/Errors

How to add background image to div using Tailwindcss, Vite in Laravel Environment

Created at 31-Jan-2024 , By samar

You can easily add background image to div using Tailwindcss, Vite in Laravel Environment. You have to first install Laravel and create a images directory in public directory and upload the image in images directory and use the below code snippet to add the background image.

Step 1 : First create the Laravel project.

Step 2 : Create the images directory in pubic directory and upload the image in it.

Step 3 : Create a view file and copy/paste below code in it.

Change the filename as per your requirment.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body class="antialiased">
        <div class="p-[20px]" style="background-image: url('./images/banner.png')">
            <p class="text-white font-bold"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam minima recusandae, exercitationem aut omnis labore libero itaque aperiam qui voluptate eos odio magnam dolorum alias accusantium porro et asperiores totam. </p>
        </div>


        <div class="p-[20px] bg-[url('./images/banner.png')]">
            <p class="text-white font-bold"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam minima recusandae, exercitationem aut omnis labore libero itaque aperiam qui voluptate eos odio magnam dolorum alias accusantium porro et asperiores totam. </p>
        </div>
    </body>
</html>

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.

Bootstrap C C++ Cmd CodeIgniter Css Drupal Git Html Java Javascript Jquery Laravel Mongodb Nodejs Php Python React Sql Typescript Vuejs Wordpress

How to add background image to div using Tailwindcss, Vite in Laravel Environment

Step 1 : First create the Laravel project.

Step 2 : Create the images directory in pubic directory and upload the image in it.

Step 3 : Create a view file and copy/paste below code in it.

Random Code Snippet Queries: Laravel

Latest Code Snippets