How do I edit the background image height without stretching?

Question

I am trying to make the background image the full height of the device screen but, I keep running into a blocker and it only fills the screen above the text. I've been trying to be mindful of the fact that the background image also needs a lowered opacity and adding it to the body affects that?

How do I fix this issue?

{EDIT: I removed the center tag and moved the class of the image to get rid of the max-width. I am still having problems with the height.}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NASCAR Fan Email</title>
    <style>
        body {
            Margin: 0;
            padding: 0;
        }
        
        table {
            border-spacing: 0;
        }
        
        td {
            padding: 0;
        }
        
        img {
            border: 0;
        }
        
        .webkit {
            /* max-width: 900px; */
        }
        
        .outer {
            Margin: 0 auto;
            width: 100%;
            /* max-width: 900px; */
            border-spacing: 0;
            font-family: 'sans-serif';
            color: black;
        }
        
        .fanCouncil {
            border-bottom: 8px solid;
            border-image: linear-gradient(to right, #ffd659 30%, #e4002b 30%, #e4002b 30%, #e4002b 60%, #007ac2 40%, #007ac2 75%) 5;
        }
        
        .fanPhoto {
            opacity: 0.4;
        }
        
        p {
            line-height: 2.2;
            max-width: 1200px;
            font-size: 40px;
        }
        
        a {
            font-size: 40px;
        }
        
        .photoText {
            position: absolute;
            top: 30%;
            left: 25%;
        }
        /* p.entryText {
            position: absolute;
            top: 30%;
            left: 25%;
        }
        
        .clickStart {
            font-weight: bold;
            text-transform: uppercase;
            text-decoration: none;
            position: absolute;
            top: 63%;
            left: 25%;
        }
        
        .unableText {
            position: absolute;
            top: 65%;
            left: 25%;
        }
        
        .thankYou {
            position: absolute;
            top: 87%;
            left: 25%;
        } */
        
        a.copyLink:visited {
            color: rgb(99, 150, 194);
        }
        
        @media screen and (max-width: 600px) {
            .fanHeader,
            .fanPhoto {}
        }
        
        @media screen and (max-width: 600px) {}
    </style>
</head>

<body>

    <div class="webkit">
        <table class="outer" align="center">
            <tr>
                <td>
                    <table width="100%" style="border-spacing: 0;">
                        <tr>
                            <td class="fanCouncil" style="background-color: white; padding: 60px; text-align: center;">
                                <img class="fanHeader" src="https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NFC_Horiz_BlackRGB.png" alt="Fan Email" width="900"> </td>
                        </tr>

                    </table>
                </td>
            </tr>
            <tr>
                <td class="photoText">

                    <p class="entryText">Hello, <br> <br> We’d like to invite you to participate in a short survey about this past weekend’s races. This survey should take less than 5 minutes and will be open through Wednesday, August 25. We want to know what you think!</p>
                    <a href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-
                        Bl/5bn1vdLmXO68WPcydpyM7J
                        " class="clickStart">Click here to Start</a>
                    <p style="line-height: 3;" class="unableText">If you are unable to click the link, please copy and past the full URL below into your browser: <br>
                        <a href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-
                            Bl/5bn1vdLmXO68WPcydpyM7J" class="copyLink">http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-
                                Bl/5bn1vdLmXO68WPcydpyM7J</a>
                    </p>
                    <p class="thankYou">Thank you! <br>Fan Council</p>

            </tr>
            <tr>
                <td>
                    <table width="100%" style="border-spacing: 0;">
                        <img class="fanPhoto" src="https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NASCAR_FanCouncil_DaytonaFanPhoto_1-1.jpg">
                    </table>

                </td>
            </tr>
        </table>
    </div>

</body>

</html>

Firstly, `` isn't a supported tag for HTML5. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center — MattHamer5, Jan 10 '22 at 14:43
Hey @MattHamer5 I removed the center tag and made an edit to the code, do you think you have a solution for the height issue? — Lemon, Jan 10 '22 at 14:57
do you want that background don't move (fixed and centered) but instead scroll the content inside it? so I can help (at least try to help) — Laaouatni Anas, Jan 10 '22 at 14:59
ok. I will try as always it can take me 10 minutes or more, in that time someone can answer before me because here there is an amazing community, developers help developers. (I have some experience with `background` so maybe I can find the bug and help you, I will try... lets do it) — Laaouatni Anas, Jan 10 '22 at 15:02
can I use grid or flex... or is important to use `tr, td` table things? — Laaouatni Anas, Jan 10 '22 at 15:06
@LaaouatniAnas I believe tr/td is fine, this is going to be an email template — Lemon, Jan 10 '22 at 15:13
ah yes @Lemon I know email clients don't support anything like flex or grid... I will try. for now, see the LOTUSMS answer not that correct for email clients for still useful for your future projects — Laaouatni Anas, Jan 10 '22 at 15:18
solved I found a way to solve this without using flex or grid — Laaouatni Anas, Jan 10 '22 at 15:40

score 0 · Answer 1 · answered Jan 10 '22 at 15:11

I understand this may not be a "fix" answer, but it will be helpful information that will lead to the real fix and learning what is wrong helps you understand things conceptually and avoid future mistakes

You have a lot of issues here that prevent you from doing what you want to do. To begin with, you are using table as your architectural elements. Use div. Only use table when you actually mean to show something a tabular form, like an actual table/grid. You are trying to achieve a responsive behavior with an element that is not inherently responsive. The table HTML element is not responsive and has a lot of constrains on cell space and borders.

Also, center is not a valid and semantic HTML element. The browser will not recognize it even if you try to use. webkit class as I see you are trying to do. You are basically trying to recreate the div.

And lastly, any time you do responsive design your width should never be restricted to any defined unit of measure (px, em, rem, etc). It should be elastic (%, vh, or vw)

Refactor your HTML or at the very least wrap all your table content inside a div and then give that div the background picture as a CSS property value

.wrapper {
    background-image: url("https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NASCAR_FanCouncil_DaytonaFanPhoto_1-1.jpg");
    background-origin: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    height: 100vh; // this ensures the flexbox stretches to 100% of the viewport height (vh)
  }

But really, refactor your HTML. It's really bad and buggy. You are using wordpress. They have better templates than this

I revised my code a while ago and removed the center tag, but I'll be taking into consideration the advice on device width & measurements, however, this is going to be used as an email template and I was instructed to use div as little as possible. I'll make sure to specify that next time so the next person to help doesn't fall on deaf ears. — Lemon, Jan 10 '22 at 15:31
Well that little tidbit of info should'v been added. If that's the case, then you dont want the image to be responsive. Email messages are not responsive. The entire effort is irrelevant now. Leave the image as an image and not as a background. You should leave the background white for readability. Many people use the dark theme in their phones and that includes their email app. This image will obfuscate the text — LOTUSMS, Jan 10 '22 at 15:44

Laaouatni Anas · Answer 2 · 2022-01-10T16:39:38.520

this question is challenging because:

we can't use GRID or FLEX.
we need to use a table because for an email template.

so we can't background-image, so I used a normal <img> and style it to use all space, so 100% solved the bug using
object-fit: cover; object-fit is doing the magic here!

object-fit make the image responsive, if the height is too long, is automatically adjust all thing making the image don't be see all the details, but still look good...

and you want to be not scrollable? using position: fixed; we solve also this

I see also that Image will go above the first <tr> (navbar) and make the navbar like color grey, that isn't what we want
so... the solution for this is to put index:-1;

here the code I added

.fanPhoto {
    opacity: 0.4;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    object-fit: cover;
}

documentations:

CSS support

email CSS support: https://www.campaignmonitor.com/css/

object-fit is supported for most email clients especially mobile:

Gmail mobile
Gmail Desktop
IOS 11, 10 Mail
android 4.4.4 Mail
Outlook for Mac (for now really the most of CSS is supported in mac version) but not the outlook web version.

position is supported:

outlook.com TOP and also LEFT
Gmail only LEFT (https://elasticemail.com/supported-css)

z-index supported by all clients!

all complete fixed code

body {
  Margin: 0;
  padding: 0;
}

table {
  border-spacing: 0;
}

td {
  padding: 0;
}

img {
  border: 0;
}

.webkit {
  /* max-width: 900px; */
}

.outer {
  Margin: 0 auto;
  width: 100%;
  /* max-width: 900px; */
  border-spacing: 0;
  font-family: 'sans-serif';
  color: black;
}

.fanCouncil {
  border-bottom: 8px solid;
  border-image: linear-gradient(to right, #ffd659 30%, #e4002b 30%, #e4002b 30%, #e4002b 60%, #007ac2 40%, #007ac2 75%) 5;
}

.fanPhoto {
  opacity: 0.4;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

p {
  line-height: 2.2;
  max-width: 1200px;
  font-size: 40px;
}

a {
  font-size: 40px;
}

.photoText {
  position: absolute;
  top: 30%;
  left: 25%;
}


/* p.entryText {
    position: absolute;
    top: 30%;
    left: 25%;
}

.clickStart {
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    position: absolute;
    top: 63%;
    left: 25%;
}

.unableText {
    position: absolute;
    top: 65%;
    left: 25%;
}

.thankYou {
    position: absolute;
    top: 87%;
    left: 25%;
} */

a.copyLink:visited {
  color: rgb(99, 150, 194);
}

@media screen and (max-width: 600px) {
  .fanHeader,
  .fanPhoto {}
}

@media screen and (max-width: 600px) {}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NASCAR Fan Email</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="webkit">
    <table class="outer" align="center">
      <!-- navbar -->
      <tr>
        <td>
          <table width="100%" style="border-spacing: 0;">
            <tr>
              <td class="fanCouncil" style="background-color: white; padding: 60px; text-align: center;">
                <!-- navbar image FAN COUNCIL -->
                <img class="fanHeader" src="https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NFC_Horiz_BlackRGB.png" alt="Fan Email" width="900">
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <!-- the text below the big navbar -->
      <tr>
        <!-- the text: hello,... -->
        <td class="photoText">
          <!-- hello ... think! -->
          <p class="entryText">Hello, <br> <br> We’d like to invite you to participate in a short survey about this past weekend’s races. This survey should take less than 5 minutes and will be open through Wednesday, August 25. We want to know what you think!</p>
          <!-- 1 link -->
          <a href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J" class="clickStart">Click here to Start</a>
          <!-- if you ... browser: -->
          <p style="line-height: 3;" class="unableText">If you are unable to click the link, please copy and past the full URL below into your browser: <br></p>
          <!-- 2 link full-long-link -->
          <a href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J" class="copyLink">http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J</a>
          <!-- thank you -->
          <p class="thankYou">Thank you!<br>Fan Council</p>
        </td>
      </tr>

      <!-- here where there is the background -->
      <tr>
        <td>
          <table width="100%" style="border-spacing: 0;">
            <img class="fanPhoto" src="https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NASCAR_FanCouncil_DaytonaFanPhoto_1-1.jpg">
          </table>
        </td>
      </tr>
    </table>
  </div>

</body>

</html>

Sorry for the late response, but thank you so much for your help and the resources you cited! Wishing you well — Lemon, Jan 10 '22 at 16:31

How do I edit the background image height without stretching?

2 Answers2