Hello all,
I have been actually tasked to code an HTML email newsletter I am stuck at a particular design part and would need some help with it. My question is, is it possible to have an image over a background divided into two color segments. So that image and the color both remain changeable for future editing purposes?. Please see attached pics for reference.
Normally I would have done that using position absolute and z-index but this probably won’t work in email dev. Is there anyone with experience who can please guide me about it, if its workable or not, or using the design slicing with the background (image) is the only solution. Would be very helpful!
Thank you all in advance!
That’s the email they want? Or just the image?
Nope. You need to be using Tables and you can’t pass an image over two TDs.
You have two options. You can slice the image and put each one its own TD. But you run the risk of the DREADED WHITE LINE running through the image in Outlook and possibly Gmail.
The next option and more full proof is put that image in its own TD with a white background and zero out the padding inline.
I really wouldn’t slice the image. it just causes way too many issues.
If you haven’t done this before, I would suggest a few things.
Look at Cerberus - https://tedgoas.github.io/Cerberus/
Ted works really hard at keeping these patterns up to date and these tempates will have the hacks you need to make your email work well.
Join #emailgeeks on Slack. It’s free and on the code channel we can take a look at your code and help you through the issues. https://email.geeks.chat/
Are you checking the design in Litmus or EOA?
Thank you so much @Tirjasdyn for taking time to reply 
Actually, I am not sharing the real design (because the design is not my property), but what I want to achieve is something exactly like the attached images. It’s just a part of a long design.
Yes, this is what I did, I cut out this segment from PSD file and used that in a td as a full image. Without setting any background color etc. I think this is the only possible solution lol 
.
What I was trying to achieve was to place the image of mobile with the transparent background (like this image [https://i.ibb.co/R9Fr7T5/sample.png](http://image png)) over css colored background divided into two segments (like blue and white). So that it remain easy for editing like if to change image with another one. Email development is tough for sure haha. For testing I would be using litmus.
I would sure check that out:grinning:. and thank you for the link to channel I would join it right away!