Background Image On Simple Page

hi all , i create custom Simple Page. My question is how to add image as background at the behind of the form ?

8 Replies

Just add it to the div containing $this->form within the view?

hi , thanks for your suggestion . However i dont really understand <x-filament-panels::page.simple> @csrf <x-filament-panels::form wire:submit.prevent="update"> {{ $this->form }} <x-filament-panels::form.actions :actions="$this->getCachedFormActions()" :full-width="$this->hasFullWidthFormActions()" /> </x-filament-panels::form> </x-filament-panels::page.simple> this is my code . can you show me the way how to do it ?

toeknee•3mo ago

This is basic css:

<div style="background-image:url('https://img.com');" class="bg-cover">
  <x-filament-panels::page.simple>
      @csrf
          <x-filament-panels::form wire:submit.prevent="update">
              {{ $this->form }}
  
              <x-filament-panels::form.actions
              :actions="$this->getCachedFormActions()"
              :full-width="$this->hasFullWidthFormActions()"
              />
          </x-filament-panels::form>
  
  </x-filament-panels::page.simple>
</div>

<div style="background-image:url('https://img.com');" class="bg-cover">
  <x-filament-panels::page.simple>
      @csrf
          <x-filament-panels::form wire:submit.prevent="update">
              {{ $this->form }}
  
              <x-filament-panels::form.actions
              :actions="$this->getCachedFormActions()"
              :full-width="$this->hasFullWidthFormActions()"
              />
          </x-filament-panels::form>
  
  </x-filament-panels::page.simple>
</div>

maybe move the div before the panels form too. depending where you want ti.

Expecto PatronumOP•3mo ago

i try to implement based on your way but the background is behind the field form . not behind the form . i did try other css too but seems return the same result

toeknee•3mo ago

That's always going to happen because the form you are using has white backgrounds. Can you provide the form makeup?

Expecto PatronumOP•3mo ago

i dont have form makeup , i using livewire but extend to simplePage .

Expecto PatronumOP•3mo ago

and the view blade is the code i shown above

toeknee•3mo ago

We; om schema you have more code, some of them will be sections looking at that, and in there you need to add a transparent border/background if you are wanting to changet the background of the form etc.

Gaming

Programming

Background Image On Simple Page