Simple Header with Image Background

[alaczek]

<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull"><!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2022/07/header-mountains.jpeg","id":5598,"dimRatio":0,"minHeight":680,"contentPosition":"center center","isDark":false,"align":"full"} -->
<div class="wp-block-cover alignfull is-light" style="min-height:680px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-5598" alt="" src="https://dotcompatterns.files.wordpress.com/2022/07/header-mountains.jpeg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"layout":{"type":"flex"}} -->
<div class="wp-block-group"><!-- wp:site-logo {"width":60} /-->

<!-- wp:site-title /--></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"480px"} -->
<div style="height:480px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->

https://dotcompatterns.wordpress.com/?p=5590&preview=true

[onuro]

@alaczek did you try a color photo before this one? Just wondering how it would play.

[iamtakashi]

I don't mind the image. I think it works well — the image helps to show the header is actually on the image as the colour of the sky isn't completely white.

Can we add a logo like #210 ?

[alaczek]

Sadly, we can't add the logo image. The layout doesn't break without it tho, so I think we should still proceed with this one.

[iamtakashi]

👍 👍 👍