Home » Php » php – add background image in laravel 5

php – add background image in laravel 5

Posted by: admin July 12, 2020 Leave a comment

Questions:

I am trying to add a background image for my website in Laravel 5.

I’ve used this in my css file.

html {
        background-image: url("images/background.jpg");
    }

the image is in the public folder of my Laravel project folder. I tried all the paths but it just doesn’t load.

I keep getting this error:

http://Laravelproject.app:8000/background.jpg 404 (Not Found)

Any help would be appreciated. Thanks.

How to&Answers:

Might be answering a little late but do this and hope it helps someone out there:

background-image:url({{url('images/php_mysql.jpg')}})

Answer:

Works just fine with slash:

html {
    background: url("/images/background.jpg");
}

Answer:

You have to get out of CSS first by adding two dots. Here I am going to show you an example, which I just tested and works fine in Laravel 5.7

  1. Make new class in your CSS and name it login body.

  2. Your css code should look like this.

    .loginbody 
    {
        background-image: url("../images/bg.jpg");
    }
    
  3. Add this class to the body of the page where you want the image.

  4. Save and run.

Note: be careful with your path, where the image exist. In my case the image is in “public/assets/images/bg.jpg”

Answer:

i am still unable to access image via css in Laravel 6

but

this code is work for me

(add image path in blade.php file)

<div id="loading" style="background-image: url('{{ asset('img/big-loader.gif')}}');">

Answer:

I use

background-image: {{asset("/images/background.jpg")}};

and my image is in public/images

Answer:

i use

background-image: url({{ asset('images/job.jpg') }});

Answer:

This works

   background-image: url({{asset('images/bg.jpg')}});

Answer:

since you’re in css, you need to get out of it first using the two dots.
url(“../images/background.jpg”);

Answer:

You can use this css of the specific class/id:

selector{
    background-image: url({{URL('/')}}/public/assets/landing/images/paper.jpg);
}

{{URL('/')}} means the base url of your project locations

Answer:

Try this code snippet, this one works on me :

url({{ URL::asset('images/SampleBackground.jpg')}})