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

Html – How to make text inside hero image responsive?

I’m trying to build a responsive website using Bootstrap, which is totally new to me. I want to make a hero image with a text inside positioned right in the middle. As my background image resizes, my text just stays positioned at the same place and doesn’t adjust to a smaller viewport. So i end up with something like this:
website example

Here is what I’ve attempted:
HTML:

    <header class="header-container">
        <!-- background img -->
        <div class="bg-image d-flex justify-content-center align-items-center">
            <div class="text-center">
                <h1 class="h1-hero h-font">where great ideas come to life</h1>
                <p class="p-hero text-font">Passionate creative studio helping startups grow their
                    business!
                </p>

            </div>
        </div>
    </header>

CSS:

.header-container {
    padding: 48px 50px 0px;
    max-width: 100%;
}

.bg-image {
    background-image: url('../img/hero.png');
    background-size: 100%;
    height: 100vh;
    background-repeat: no-repeat;
}

.h1-hero {
    font-size: var(--font-size-h1);
    font-weight: 500;
    line-height: 106px;
    letter-spacing: 4.5px;
    text-transform: uppercase;
    color: white;
}

.p-hero {
    font-family: var(--font-family-text);
    font-size: 20px;
    color: white;
    opacity: 80%;
    font-weight: 300;
    line-height: 23px;
    letter-spacing: 1.3px;
    padding-top: 12px;
}
Tags:

3

Answers


  1. 0

    Something you could attempt is adding a flexbox display to your text-center div. This would align the h1 and p tags without having to rely on line-height.

    You can also try accounting for smaller viewport sizes using media queries. I added an example of one which changes the font size at a breakpoint of 600px.

    I also changed the background size of the image from 100% to cover to better display the size of the background image and the container the text is within.

    .header-container {
  padding: 48px 50px 0px;
  max-width: 100%;
}

.bg-image {
  background-image: url('https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg');
  background-size: cover;
  height: 100vh;
  background-repeat: no-repeat;
}

.h1-hero {
  font-size: var(--font-size-h1);
  font-weight: 500;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  color: white;
}

.p-hero {
  font-family: var(--font-family-text);
  font-size: 20px;
  color: white;
  opacity: 80%;
  font-weight: 300;
  letter-spacing: 1.3px;
  padding-top: 12px;
}

.text-center {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column nowrap;
}

@media all (min-width: 600px) {
  .h1-hero {
    font-size: 3rem;
  }
  .p-hero {
    font-size: 10px;
  }
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<header class="header-container">
  <!-- background img -->
  <div class="bg-image d-flex justify-content-center align-items-center">
    <div class="text-center">
      <h1 class="h1-hero h-font">where great ideas come to life</h1>
      <p class="p-hero text-font">Passionate creative studio helping startups grow their business!</p>
    </div>
  </div>
</header>
    Login or Signup to reply.
  2. 0

    You can centre the text using a combination of flexbox and relative and absolute positioning:

    <div class="bg-black position-relative text-white">
    <div class="position-absolute top-0 end-0 bottom-0 start-0">
        <!-- Put background image on this element -->
    </div>
    <div class="align-items-center d-flex flex-column justify-content-center position-absolute top-0 end-0 bottom-0 start-0">
        <h1 class="h1-hero h-font">where great ideas come to life</h1>
        <p class="p-hero text-font">Passionate creative studio helping startups grow their business!</p>
    <div>
</div>
    Login or Signup to reply.
  3. 0

    some modifications made

    1. For the bg-image class, the background-size:100% did not let the image fill up the container, so when resizing, the background image was not resizing, giving the illusion that the text was no longer centered.

    2.To make the text responsive, use container sizing units, viewport units or clamp. Read more here about Viewport units and about clamp

    well done on learning bootstrap.

      .bg-image {
     --height: 500px;
     background-image: url("--img");
     background-repeat: no-repeat;
     background-size: cover;
     block-size: var(--height);
  }

    .h1-hero {
      font-size: 6cqi;
      font-weight: 500;
      text-transform: uppercase;
      color: white;
    }

    .p-hero {
      font-size: 2cqi;
      color: white;
      opacity: 80%;
      letter-spacing: 1.3px;
      margin-top: 12px;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search