Hi,
Our corporate design dictates that we often place a semi-transparent text box (or ooverlapping semi-transparent text boxes) in an image similar to this example: https://www.w3schools.com/howto/howto_css_image_text_blocks.asp It requires CSS but I’m have a hard time to make it work in the Design Editor of Eloqua.
As I understand, you need to insert the HTML snippet in the custom code content block and add the necessary CSS in the style tab. But what exactly needs to go where to make it work?
Let’s use the previously mentioned example to illustrate:
---------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
font-family: Arial;
}
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<h2>Image Text Blocks</h2>
<p>How to place text blocks over an image:</p>
<div class="container">
<img src="img_nature_wide.jpg" alt="Nature" style="width:100%;">
<div class="text-block">
<h4>Nature</h4>
<p>What a beautiful sunrise</p>
</div>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------
Can somebody help me, please?
Best Bas