Center logo and cover image

#1

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 ?

#2

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

Screen Shot 2021-01-16 at 4.09.04 am
Screen Shot 2021-01-16 at 4.09.04 am540×682 59.4 KB

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
#3

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.

#4

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

#5

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

#6

Hi @DesignDealer, did you create https://www.designdealer.fr with sparkle? And is this the kind of effect you wanted to achieve? https://wubsites.com/trident-new/

1 Like
#7

@DesignerDealer, your website looks gorgeous!. The menu is sticked to page top. I understand that, but if I scroll up, the menu stays to the top and a separate white background band with full page width moves down beneath the top of the menu! How do you do that trick?

#8

The site looks great but unless I’m totally mistaken the link goes off to a site that has been built in Adobe Muse not Sparkle? I think that @DesignDealer offered the link as an example to see if Sparkle could do similar

So most of those features everyone is asking about and praising in the linked example is an Adobe Muse thing. @Chris has given an example of how the navigation can be achieved in Sparkle though.

#9

@Nathan, @flealife, @greenskin, Yes this is an example to show the Sparkle team what I do with Muse and that I would love to be able to do it again with Sparkle.
For example: www.designdealer.fr or even www.stefaneguilbaud.com

FYI, a developer buddy gave me a ruse to center WHO WORKS.
I declare an image with the ID jeff
Then I paste the code

html, body { position: relative; width: 100%; height: 100%; } * [class * = "ps"] {position: static! important;} * [class * = "ps"] img # jeff { position: absolute; width: 30vw; height: 20vh; top: 50%; left: 50%; margin: -10vh 0 0 -15vw; min-width: none; max-width: none; min-height: none; max-height: none; }

@flealife For the menu, zero idea for the moment in Sparkle.