Responsive header with side images and solid-color center, HTML CSS |
Responsive header with side images and solid-color center, HTML CSS |
jennbear |
Mar 10 2020, 08:15 PM
Post
#1
|
Group: Members Posts: 1 Joined: 10-March 20 Member No.: 27,224 |
I'm looking for help... I'm a designer and not much into coding but I've been working on coding some MailChimp templates for a client lately. I'm looking to make a section of the template where my client can input text that will lay over a solid-color bar but have images on the sides that appear to be part of the bar. Sorry, I'm horrible at describing this!
I Photoshopped some images of what I'm looking for: This is what I currently have, desktop view: https://imgur.com/n7wG3f0 Looking to make it like this: https://imgur.com/vSKDw2i Mobile view, currently: https://imgur.com/X0ylv3Q Looking to make it like: https://imgur.com/x84IDQc Here are the side images: LEFT https://imgur.com/oZc7Z83 RIGHT https://imgur.com/DmZtntV Hex code for center: #e26c4c I swear I learned it in school ages ago but can't remember how to do it for the life of me. Any help will be greatly appreciated! Thank you kindly! |
pandy |
Mar 11 2020, 06:48 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
You could use two background images. But that may very well be to advanced for HTML email. I don't really know.
https://css-tricks.com/css-basics-using-mul...le-backgrounds/ An old style approach that maybe is more email friendly would be to use two containers to hold one background image each. Assuming the bar is already a DIV, apply one background to it and position that background to one side. Wrap the DIV in an outer DIV and position its background to the other side. The solid color should be used with the outer DIV and the inner DIV should be transparent. Things like width and margin should be used with the outer DIV. Padding with the inner. |
Lo-Fi Version | Time is now: 26th April 2024 - 12:56 PM |