N
Novu6mo ago
Aman

Can someone help me in applying background image in a custom html template

This is what my template looks like




2 Replies
Ask Inkeep
Ask Inkeep6mo ago
Hi @Aman, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question. ----------------------------- While I generate an answer, here are some sources that might be helpful: * How to send notifications with Next.js and MJML * SendGrid * Content Management * Sendinblue ----------------------------- Answer Certainly! To apply a background image in a custom HTML template, you can use the background-image CSS property within a style tag or inline styles. Here’s a simple example on how you can set a background image for the entire body of your HTML:
<!DOCTYPE html>
<html>
<head>
<title>Background Image Example</title>
<style>
body {
background-image: url('your-image-url.jpg');
background-size: cover; /* Cover the entire page */
background-repeat: no-repeat; /* Do not repeat the image */
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Background Image Example</title>
<style>
body {
background-image: url('your-image-url.jpg');
background-size: cover; /* Cover the entire page */
background-repeat: no-repeat; /* Do not repeat the image */
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Replace 'your-image-url.jpg' with the URL of your image. This will set the image as a background for the entire webpage. If you need the background image applied to a specific element only, you can modify the CSS selector from body to the desired HTML element's class or ID. For more complex scenarios like responsive backgrounds or specific positioning, you might want to explore additional CSS properties like background-position or media queries.
Pawan Jain
Pawan Jain6mo ago
@Aman are you looking to use background image for whole email content?
Want results from more Discord servers?
Add your server