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•2mo 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 Patronum•2mo 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•2mo ago

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

Expecto Patronum•2mo ago

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

Expecto Patronum•2mo ago

and the view blade is the code i shown above

toeknee•2mo 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