CSS - Invalid Property Value (background-image)-CodePudding

The "Invalid Property Value" error shows up when I try to set the background-image property in CSS (I'm using laravel, and blade directives). In the inspector it even shows the proper image to be displayed, but with the error. Here's the code:

@foreach($objects as $object)
<div  style="margin: 2%;">
  <button id="game" style="width:100%; background-image: {{asset("img/games/".$object->gameImage)}}; background-size:auto; "> <!-- welp. -->
    <h2><a href="/pagina/{{$object['id']}}" style="text-align:center;"> {{$object['name']}} </a></h2>
  </button>
</div>
@endforeach

also, the objects it's referring to is a dynamic array, made so it can be applied to all entries of that type (object's).

CodePudding user response：

you are using double quote inside the double quote. Please use single quote for inside strings

The corrected code as below:

@foreach($objects as $object)
    <div  style="margin: 2%;">
      <button id="game" style="width:100%; background-image: url({{asset('img/games/'.$object->gameImage)}}); background-size:auto; "> <!-- welp. -->
        <h2><a href="/pagina/{{$object['id']}}" style="text-align:center;"> {{$object['name']}} </a></h2>
      </button>
    </div>
    @endforeach

CodePudding user response：

Try to change background-color: 'image-path' to background-color: url('image-path').

 @foreach($objects as $object)
    <div  style="margin: 2%;">
      <button id="game" style="width:100%; background-image: url({{asset("img/games/".$object->gameImage)}}); background-size:auto; "> <!-- welp. -->
        <h2><a href="/pagina/{{$object['id']}}" style="text-align:center;"> {{$object['name']}} </a></h2>
      </button>
    </div>
    @endforeach