Question 199516 in Html Question posted in
Some basic documentation can be found here.

Html – How to center hero image on mobile phone

I’m building a simple "Coming soon" page and trying to figure out how to position my hero image in the center. Currently it looks fine on desktop but on mobile the text nicely centered but the hero image is not. You can check it out for yourself here: https://quintillion.ai/

I would like to have it such that the image is always positioned in the center and if need be it would just show a black background above and below the image.

Here is my html and css code:

body {
  background-image: url("https://picsum.photos/1000/1000");
  background-repeat: no-repeat;
  background-color: black;
  background-position: center;
  background-position-y: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  min-height:100%;
  margin: 0;
  padding: 0;
}
.overlay {
  box-shadow: inset 0 0px 0 1000px rgba(0, 0, 0, 0.6);
  padding: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;  
  justify-content: center; /* Added */
  align-items: center; /* Added */
}

.text {
  font-family: Arial, sans-serif;
  background-color: rgba(0, 0, 0, 0.0);
  color: #ffffff;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-left: 60px;
}

h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

p {
  font-size: 18px;
  margin-bottom: 20px;
}
<div class="overlay">
  <div class="text">
    <h1>Quintillion AI</h1>
    <h2>Coming soon</h2>
    <p>
      We are currently in stealth mode, building AI Assistants for the future of work.
      <br>Please check back soon for updates.
    </p>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Solution

    You didn’t add display: flex and flex-direction: column to .text class.

    .text {
  display: flex; /* here */
  flex-direction: column; /* here */
  justify-content: center;
  align-items: center;
}

    and add CSS in <p> tag

    p {
  text-align: center; /* here */
}

    Example

    body {
  background-image: url("https://picsum.photos/1000/1000");
  background-repeat: no-repeat;
  background-color: black;
  background-position: center;
  background-position-y: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  min-height:100%;
  margin: 0;
  padding: 0;
}
.overlay {
  box-shadow: inset 0 0px 0 1000px rgba(0, 0, 0, 0.6);
  padding: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;  
  justify-content: center; /* Added */
  align-items: center; /* Added */
}

.text {
  font-family: Arial, sans-serif;
  background-color: rgba(0, 0, 0, 0.0);
  color: #ffffff;
  display: flex; /* here */
  flex-direction: column; /* here */
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-left: 60px;
}

h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

p {
  text-align: center; /* here */
  font-size: 18px;
  margin-bottom: 20px;
}
    <div class="overlay">
  <div class="text">
    <h1>Quintillion AI</h1>
    <h2>Coming soon</h2>
    <p>
      We are currently in stealth mode, building AI Assistants for the future of work.
      <br>Please check back soon for updates.
    </p>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    To make a background-image cover the entire space use background-size: cover;. Here’s a shorthand for your code:

    body {
  background: #000 url("https://picsum.photos/1000/1000") no-repeat center / cover;
  /* remove the other background-* properties ... */
  /* other styles ... */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search