Center logo and cover image

Hello i try to do that : https://www.designdealer.fr

  1. an image 100% full screen (cover)
  2. a logo svg always center on page

I can’t do it ?

To achieve the same effect with Sparkle…

Background image:

  • Wide box with a height of about 1000px ( this covers most screen heights )
  • Choose ‘Fixed in window’ to keep the background image fixed in position on scroll

SVG logo

  • You can centre the placement of the logo using grids to help you with centre position
  • I would suggest using the image tool for this

Hope this is of help.

1 Like

Hi @DesignDealer, the specific terms you are using suggest you are thinking of specific CSS features.

Sparkle doesn’t currently have the ability to match a section of the layout to the full height of the browser (100vh in css), though if you set a background image on a box to fill mode it corresponds to css cover.

Given that the full height is not available, there is no ambiguity to centering an SVG on a box, you do it visually.

But due to the first point, this does not correspond to the effect you are trying to achieve.

Ah Ok. So what if I have to reproduce this principle for a site under sparkle?

As mentioned Sparkle doesn’t currently have that. It can’t be done.