CODEWITHSUNDEEP
htmlcsslaraveleloquentlaravel-blade
procoder3000
procoder3000

Reputation: 49

simple inline css in blade not working properly

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">

Upvotes: 1

Views: 485

Answers (2)

Vinay Jain
Vinay Jain

Reputation: 882

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">

Upvotes: 1

Paos
Paos

Reputation: 673

You can try this:

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

Upvotes: 1

Related Questions