simple inline css in blade not working properly

user_19753398 0
Viewed 40

so this is the CSS:

.header-inner {
    background: url(../images/inner_bg.png), linear-gradient(108deg, #001a30, rgba(0, 0, 0, 0)) no-repeat;
}

i want to inline it to make the background a dynamic value with the blade syntax later on, this is what i did but its not showing the image properly:

<div class="header-inner hi-about-us mb-0" style="background: url({{ asset('test-images/inner_bg.png') }}) linear-gradient(108deg, #001a30, rgba(0, 0, 0, 0)) no-repeat">
laravel-blade eloquent laravel css html
2 Answers

You can try this:

style="background: url('{{ asset('test-images/inner_bg.png') }}')
user_195087120

The correct code should be like this:

<div class="header-inner hi-about-us mb-0" style="background: url('{{ asset('test-images/inner_bg.png') }}') linear-gradient(108deg, #001a30, rgba(0, 0, 0, 0)) no-repeat">

The URL should be inside single quotes.

You can also try this:

@php
$bgUrl = asset('test-images/inner_bg.png');
@endphp

<div class="header-inner hi-about-us mb-0" style="background: url('{{ $bgUrl }}') linear-gradient(108deg, #001a30, rgba(0, 0, 0, 0)) no-repeat">
user_179955630
Related