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.
Random Code Snippet Queries: Laravel
- How to print form data in laravel
- Php artisan make model, factory, migration and controller in single command
- Get latest record by created at in Laravel
- How to insert multiple rows in mysql using loop in laravel?
- How to add unique records in pivot columns of Laravel pivot table
- SQLSTATE[42000]: Syntax error or access violation: 1091 Can't DROP 'posts_user_id_foreign'; check that column/key exists
- Array to string conversion laravel Controller
- Update if exist else insert new record in laravel
- How to display user profile after login in laravel
- Get Array of IDs from Eloquent Collection
- Count all and get 10 records after where condition in laravel
- Laravel route redirect not working
- Multiple Level eager loading in Laravel
- How to add a key value pair to existing array in laravel
- Define variable and use in Laravel controller method
- How to increment column value of table in Laravel
- Route group with URI prefix using middleware and route name prefixes
- Redirect from www to non www in laravel using htaccess
- How to decrypt laravel password
- How to check column value of a record is null or not in laravel
- How to add is_activated column in database using laravel migration
- Trying to get property 'title' of non-object
- Laravel 5.4 save data to database
- How to display pivot table column value in laravel
- How to check record exist or not in relationship table