Jump to content

How can I set up a organically shaped Header?

Recommended Posts

Posted

Hello,
I would like to experiment with how my website looks with an organically shaped header (see the attached screenshot as an example). Is it possible to design the header in a similar way or with a comparable organic shape?

I would greatly appreciate any assistance!

https://www.lebendige-gaerten-hh.de/
Pword: lebendigegaertenhh2023

Bildschirmfoto 2023-12-12 um 14.09.17.png

Posted

@tuanphan, that sounds like a good solution. I've created a PNG (white graphic attached) that will be docked under the header, correct? Where should the graphic be uploaded, and can you assist me with the code? That would be fantastic!

lg_organic_header_graphic_01.png

Posted

Certainly! To create an organically shaped header, you can use a combination of HTML and CSS, leveraging the `border-radius` property and perhaps some additional styling. Here's a simple example to get you started on vscode:

HTML:
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Your Page Title</title>
</head>
<body>

  <header class="organic-header">
    <!-- Your header content goes here -->
    <h1>Your Website Name</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

</body>
</html>

Posted

@tuanphan I have uploaded the graphic (PNG file) that should be part of the header as an example and placed it as closely as possible to the desired location. Can you now assist me with the code?

Bildschirmfoto 2023-12-16 um 12.45.13.png

Posted

Add to Custom CSS

header#header:after {
    content: "";
    background-image: url(https://images.squarespace-cdn.com/content/v1/6475e652b738031c56cb3b98/e990ece7-9fb7-42bb-91dd-791b0cc47ff9/lg_organic_header_graphic_01.png?format=2500w);
    background-size: cover;
    display: block;
    width: 100%;
    height: 150px;
    background-color: transparent;
    position: absolute;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

Thank you @tuanphan! Unfortunately, it doesn't seem to be working. I entered the code in the custom CSS section, but there doesn't appear to be any change from what I can see. Could you please double-check?

Posted

Ah, you are right, it is visible in the preview. However, only part of the image is displayed (see screenshots), even though the browser is set to 100%. The entire graphic is only visible when you zoom out in the browser. How can I change this so that the whole image is always displayed?

Bildschirmfoto 2023-12-19 um 13.26.03.png

Bildschirmfoto 2023-12-19 um 13.22.16.png

Posted

Use new code

header#header:after {
    content: "";
    background-image: url(https://images.squarespace-cdn.com/content/v1/6475e652b738031c56cb3b98/0d789b2c-837c-4be0-84af-fa0d24f516b7/lg_header_organic_04.png?format=2500w);
    background-size: contain;
    display: block;
    width: 100%;
    height: 100px;
    background-color: transparent;
    position: absolute;
    background-repeat: repeat-x;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.