CODEWITHSUNDEEP
csslaravel
prgrm
prgrm

Reputation: 3833

Linking a CSS image URL in laravel

I want to add a background-image with a laravel URL. I can do this by just including the web path itself but I would like to use Laravel URL.

Here is how I do it now:

.mystyle{
background-image: url("www.myproject.com/assets/img/background.png")
}

Here is how I want it:

.mystyle{
background-image: url("{{ URL::asset('assets/img/background.png }}") 
}

Any clues?

Upvotes: 20

Views: 89140

Answers (12)

Manishankar Rai
Manishankar Rai

Reputation: 1

                    style='background-image: linear-gradient(180deg, rgba(16, 12, 8, 0.4) 0%, rgba(16, 12, 8, 0.4) 100%), url("{{ url('public/front/img/home1/home1-banner-img3.png') }}");'>

see code '' "" and `` sequence then it solve

Upvotes: -1

Vitaliy Maslyanko
Vitaliy Maslyanko

Reputation: 1

 
class ImageUrlController extends Controller
{
    public function __invoke($path_file)//: object
    {
        if(Storage::exists('/public/images/'.$path_file)){
            $image_path=response()->file(Storage::path('/public/images/'.$path_file));
        }else {
            $image_path=response()->file(Storage::path('/public/images/default.jpg'));
        }

        return $image_path;
    }
}

in more detail Laravel image url

Upvotes: 0

Ketan Niruke
Ketan Niruke

Reputation: 19

This is correct answer - background-image: url('../img/background.png'); As assest will not be work. its 100% work. must try.

Upvotes: 0

ahsanul
ahsanul

Reputation: 1

in the backgroundi-image add

background-image: url({{asset('assets/img/background.png')}})"

hope after doing this you find the output

Upvotes: 0

Hadayat Niazi
Hadayat Niazi

Reputation: 2480

if you are using new version of Laravel then follow below.

public/img/test.png if your image exists in the public root dir of the application then you don't need to specify public, you need to put ../ to go one step back and find the image.

background-image: url('../img/test.png');

Upvotes: 4

Grzegorz Mikina
Grzegorz Mikina

Reputation: 79

The way that works for me: url("../images/formIcons/seeingEye96.png");

Upvotes: 1

Ayman Gaber
Ayman Gaber

Reputation: 31

The best way . Transfer the contents of the css file to blade php file. Then use

background-image: url({{asset('assets/img/background.png')}})"

Upvotes: 3

M Mamoon Khan
M Mamoon Khan

Reputation: 179

If assets is a folder in your public directory then you can write like that

style="background-image: url({{asset('assets/img/background.png')}})"

Upvotes: 4

Kenzo
Kenzo

Reputation: 89

This absolutely work

.mystyle {
     background-image: url("../assets/img/background.png") 
 }

Upvotes: 8

Pratik Khadka
Pratik Khadka

Reputation: 958

I have used inline css for a class and this is what actually worked in my case 

  style=" background-image: url('{{asset('images/cover.jpg')}}');"

Upvotes: 13

Onix
Onix

Reputation: 2179

You can even use it like this:

.mystyle{
    background-image: url("/assets/img/background.png") 
}

Upvotes: 24

Alexey Mezenin
Alexey Mezenin

Reputation: 163788

Put your image into public/assets/img directory and use the asset() helper:

.mystyle{
    background-image: url("{{ asset('assets/img/background.png') }}") 
}

Upvotes: 19

Related Questions