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

How to stop text overflowing background image – Html

Text overflowing background image

How can I prevent the text from overflowing the background image when the page width is decreased, as shown?

I would like the text to always remain relative to the background image.

Here is my HTML code:

  <section class="sec2">
    <h1 class="h1two">A 44-letter alphabet.</h1>
    <h1 class="h1three">A phonetically consistent language.</h1>
    <h1 class="h1four">A determined teacher you can count on.</h1>
  </section>

Here is my CSS code:

h1 {
  position: relative;
  font-family: "LiberationSansRegular";
  font-style: normal;
  font-weight: 600;
  font-size: 55px;
}

.h1two {
  top: 15%;
}

.h1three {
  top: 30%;
}

.h1four {
  top: 45%;
}

.sec2 {
  height: 30vw;
  background-image: url(pictures/output-onlinepngtools.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  word-break: keep-all;
}
Tags:

2

Answers


  1. 0

    You need to change the size depending on the screen size:

    Documentation: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Login or Signup to reply.
  2. 0

    Remove the default margin from the h1 tags.

    Then add line-height: calc(30vw / 3); this will keep the text fit to the image height up until any line breaks into 2 lines.

    You may want to add the line-height in the @media query

    Try the following code bellow:

    h1 {
  position: relative;
  font-family: "LiberationSansRegular";
  font-style: normal;
  font-weight: 600;
  font-size: 55px;
}

.sec2 {
  height: 30vw;
  background-image: url(pictures/output-onlinepngtools.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  word-break: keep-all;
}

.sec2 h1 {
  margin: 0;
  line-height: calc(30vw / 3);
}
    <section class="sec2">
  <h1>A 44-letter alphabet.</h1>
  <h1>A phonetically consistent language.</h1>
  <h1>A determined teacher you can count on.</h1>
</section>

    Result

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search