How to make background image and table responsive?

Question

I have done a simple HTML template where i have 4 background images and some text and tables on the background images. I want to know how can i make the background image, table, text responsive. For example currently the table when view on mobile view, it goes out the view horizontally, i the table to drop down, same as the text, for the background image it doesnt have to be the full image responsive. Here is my code

<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.hero-image1 {
  background-image: url("https://cdn.shopify.com/s/files/1/0301/0065/files/rain_background_spring_gis_2048_2048x2048.jpg?6289901723855561721");
  background-color: #cccccc;
  height: 1060px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text1 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-image2 {
  background-image: url("https://cdn.shopify.com/s/files/1/0301/0065/files/rain_background_spring_gis_2048_2048x2048.jpg?6289901723855561721");
  background-color: #cccccc;
  height: 1060px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text2 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-image3 {
  background-image: url("https://cdn.shopify.com/s/files/1/0301/0065/files/rain_background_spring_gis_2048_2048x2048.jpg?6289901723855561721");
  background-color: #cccccc;
  height: 1100px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text3 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-image4 {
  background-image: url("https://cdn.shopify.com/s/files/1/0301/0065/files/rain_background_spring_gis_2048_2048x2048.jpg?6289901723855561721");
  background-color: #cccccc;
  height: 490px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text4 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-image5 {
  background-image: url("");
  background-color: #353937;
  height: 450px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text5 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

#rcorners1 {
  /*border-radius: 25px;*/
  border-top-right-radius: 25px;
  border-top-left-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 15px;  
}
#rcorners2 {
  /*border-radius: 25px;*/
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  background: #555555;
  padding: 20px; 
  width: 200px;
  height: 40px;  
}

#rcorners3 {
  /*border-radius: 25px;*/
  border-top-right-radius: 25px;
  border-top-left-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 120px;
  height: 22px;  
}
#rcorners4 {
  /*border-radius: 25px;*/
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  background: #555555;
  padding: 20px; 
  width: 120px;
  height: 100px;  
}
</style>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="hero-image1">
  <div class="hero-text1">
    <br/><br/><br/><br/><br/><br/>
    <img src="icons/[2019-12-05-07-56-32]___Asset-1@4x.png" width="200px">
    <br/><br/>
    <h1 style="font-size:60px">XXX</h1>
    <br/><br/>
    <h2 style="font-size:50px">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h2>
    <!-- <button>Hire me</button> -->
  </div>
</div>

<div class="hero-image2">
  <div class="hero-text2">
    <img src="icons/[2019-12-05-07-56-32]___Asset-2@4x.png" width="200px">
    <h1 style="font-size:60px">XXX</h1>
    <h2 style="font-size:50px">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h2>
    <br/>
    <!-- <button>Hire me</button> -->
      <table style="width:100%">
        <tr align="center">
          <th><img src="icons/[2019-12-05-07-56-34]___Asset-4@4x.png" width="100px"></th>
          <th><img src="icons/[2019-12-05-07-56-35]___Asset-5@4x.png" width="100px"></th> 
          <th><img src="icons/[2019-12-05-07-56-35]___Asset-6@4x.png" width="100px"></th>
        </tr>
        <tr align="center">
          <td><p style="margin: 0px !important" id="rcorners1">XXXXX</p><p style="margin: 0px !important" id="rcorners2">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
          <td><p style="margin: 0px !important" id="rcorners1">XXXXX</p><p style="margin: 0px !important" id="rcorners2">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
          <td><p style="margin: 0px !important" id="rcorners1">XXXXX</p><p style="margin: 0px !important" id="rcorners2">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
        </tr>
      </table>
  </div>
</div>

<div class="hero-image3">
  <div class="hero-text3">
    <br/><br/><br/><br/><br/><br/><br/>
    <img src="icons/[2019-12-05-07-56-33]___Asset-3@4x.png" width="200px">
    <h1 style="font-size:60px">XXX</h1>
    <h2 style="font-size:50px">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h2>
    <br/>
    <!-- <button>Hire me</button> -->
      <table style="width:100%">
        <tr align="center">
          <th><img src="icons/[2019-12-05-07-56-35]___Asset-7@4x.png" width="100px"></th>
          <th><img src="icons/[2019-12-05-07-56-36]___Asset-8@4x.png" width="100px"></th> 
          <th><img src="icons/[2019-12-05-07-56-36]___Asset-9@4x.png" width="100px"></th>
          <th><img src="icons/[2019-12-05-07-56-36]___Asset-10@4x.png" width="100px"></th> 
          <th><img src="icons/[2019-12-05-07-56-37]___Asset-11@4x.png" width="100px"></th>
        </tr>
        <tr align="center">
          <td><p style="margin: 0px !important" id="rcorners3">XXXX</p><p style="margin: 0px !important" id="rcorners4">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
          <td><p style="margin: 0px !important" id="rcorners3">XXXX</p><p style="margin: 0px !important" id="rcorners4">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
          <td><p style="margin: 0px !important" id="rcorners3">XXXX</p><p style="margin: 0px !important" id="rcorners4">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
          <td><p style="margin: 0px !important" id="rcorners3">XXXXX</p><p style="margin: 0px !important" id="rcorners4">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
          <td><p style="margin: 0px !important" id="rcorners3">XXXXX</p><p style="margin: 0px !important" id="rcorners4">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
        </tr>
      </table>
  </div>
</div>

<div class="hero-image4">
  <div class="hero-text4">
    <!-- <h1 style="font-size:50px">I am Jane Doe</h1>
    <h3>And I'm a Photographer</h3>
    <button>Hire me</button> -->
  </div>
</div>

<div class="hero-image5">
  <div class="hero-text5">
    <h1 style="font-size:50px">XXX</h1>
    <h2>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h2>
    <br/>
    <!-- <button>Hire me</button> -->
      <table style="width:100%">
        <tr>
          <th><img src="icons/[2019-12-05-07-56-37]___Asset-12@4x.png" width="100px"></th>
          <th><img src="icons/[2019-12-05-07-56-37]___Asset-13@4x.png" width="100px"></th> 
          <th><img src="icons/[2019-12-05-07-56-38]___Asset-14@4x.png" width="100px"></th>
        </tr>
        <tr>
          <td><p><b>XXXXX</b></p></td>
          <td><p><b>XXXXX</b></p></td>
          <td><p><b>XXXXX</b></p></td>
        </tr>
      </table>
  </div>
</div>

</body>
</html>

score 0 · Answer 1 · answered Dec 10 '19 at 06:29

0

You can use overflow-x: auto; (to prevent it from it going out the view ) and -webkit-overflow-scrolling:touch; (to make it responsive).

Please use % or em to set the width & height.

answered Dec 10 '19 at 06:29

Nova

364
1
15

Can you explain further where should i use `overflow-x: auto;` ?and I have using %, it completely removes the background image – Rajveer Singh Dec 10 '19 at 07:23
Have you tried 'em'? style='overflow-x:auto' should be used wherever the img/ table/ text that are too wide for a mobile screen – Nova Dec 10 '19 at 07:28

score 0 · Answer 2 · answered Dec 10 '19 at 06:36

0

Use height and width in % for backgrounds and tables also.

like background-size: 100% 100%;

Remove height: 1060px; make it in %.

answered Dec 10 '19 at 06:36

Suraj Parise

330
3
18

Also, consider auto for width and height. See the difference between auto and % here https://stackoverflow.com/questions/15943009/difference-between-css-height-100-vs-height-auto – Alan M Dec 10 '19 at 07:02
i have tried using auto and %, it completely removed the background image – Rajveer Singh Dec 10 '19 at 07:20

How to make background image and table responsive?

2 Answers2