Nomis Posted December 12, 2023 Share Posted December 12, 2023 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 Link to comment
tuanphan Posted December 13, 2023 Share Posted December 13, 2023 Recently I solved 2 cases, similar your case. My approach is design a svg or png shape file, then we will use CSS code to add it under header 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!) Link to comment
Nomis Posted December 13, 2023 Author Share Posted December 13, 2023 @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! Link to comment
clauyashah Posted December 13, 2023 Share Posted December 13, 2023 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> Link to comment
tuanphan Posted December 14, 2023 Share Posted December 14, 2023 I don't see it. Can you take a screenshot? (Or you can create a page on your site, add image there, then I will check & get image url to test code) 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!) Link to comment
Nomis Posted December 16, 2023 Author Share Posted December 16, 2023 @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? Link to comment
tuanphan Posted December 17, 2023 Share Posted December 17, 2023 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!) Link to comment
Nomis Posted December 17, 2023 Author Share Posted December 17, 2023 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? Link to comment
Nomis Posted December 17, 2023 Author Share Posted December 17, 2023 @tuanphan It appears that the graphic is behind the header but not yet in the correct position (see screenshot). Link to comment
tuanphan Posted December 18, 2023 Share Posted December 18, 2023 It shows fine to me. Try checking in preview mode 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!) Link to comment
Nomis Posted December 19, 2023 Author Share Posted December 19, 2023 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? Link to comment
tuanphan Posted December 20, 2023 Share Posted December 20, 2023 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; } Nomis 1 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!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment