How do I edit the background image height without stretching?-CodePudding

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 >
        <table  align="center">
            <tr>
                <td>
                    <table width="100%" style="border-spacing: 0;">
                        <tr>
                            <td  style="background-color: white; padding: 60px; text-align: center;">
                                <img  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 >

                    <p >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
                        " >Click here to Start</a>
                    <p style="line-height: 3;" >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" >http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-
                                Bl/5bn1vdLmXO68WPcydpyM7J</a>
                    </p>
                    <p >Thank you! <br>Fan Council</p>

            </tr>
            <tr>
                <td>
                    <table width="100%" style="border-spacing: 0;">
                        <img  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>

CodePudding user response：

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

CodePudding user response：

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 >
    <table  align="center">
      <!-- navbar -->
      <tr>
        <td>
          <table width="100%" style="border-spacing: 0;">
            <tr>
              <td  style="background-color: white; padding: 60px; text-align: center;">
                <!-- navbar image FAN COUNCIL -->
                <img  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 >
          <!-- hello ... think! -->
          <p >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" >Click here to Start</a>
          <!-- if you ... browser: -->
          <p style="line-height: 3;" >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" >http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J</a>
          <!-- thank you -->
          <p >Thank you!<br>Fan Council</p>
        </td>
      </tr>

      <!-- here where there is the background -->
      <tr>
        <td>
          <table width="100%" style="border-spacing: 0;">
            <img  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>