Tips for ensuring text on an image dynamically resizes based on the browser's dimensions

Question

Tips for ensuring text on an image dynamically resizes based on the browser's dimensions

Is there a way to keep text centered over an image when resizing the browser window to ensure responsiveness? I've tried positioning the text as an absolute element, but it keeps overflowing the boundaries of the image. How can I prevent this?

.banner {
  display: block;
  width: 100%;
}

.banner-img {
  display: block;
  width: 100%;
}

.banner-text {
  position: absolute;
  top: 30%;
  left: 25%;
  font-size: 70px;
  color: aliceblue;
  font-family: 'Merriweather', serif;
  text-align: center;
  width: auto;
}

<div class="banner">
  <img class="banner-img" alt="banner image" src="images/banner.jpg">
  <div class="banner-text">Hello, Welcome To My Portfolio!
    <p>I'm Nicholas!</p>
  </div>
</div>

html css

Answer 1

Answer №1

Give this a shot. It will center your text both horizontally and vertically. Plus, for responsive web design, opt for relative units like em or rem instead of pixels.

Check out this link for further clarification https://www.w3schools.com/howto/howto_css_image_text.asp

.banner {
  position: relative;
  width: 100%;
}

.banner-img {
  width: 100%;
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: aliceblue;
  font-family: 'Merriweather', serif;
  text-align: center;
}

<div class="banner">
  <img class="banner-img" alt="banner image" src="https://images.unsplash.com/photo-1605580556856-db8fae94b658?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
  <div class="banner-text">Hello, Welcome To My Portfolio!
    <p>I'm Nicholas!</p>
  </div>
</div>

Answer 2

Give this a shot. It will center your text both horizontally and vertically. Plus, for responsive web design, opt for relative units like em or rem instead of pixels.

Check out this link for further clarification https://www.w3schools.com/howto/howto_css_image_text.asp

.banner {
  position: relative;
  width: 100%;
}

.banner-img {
  width: 100%;
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: aliceblue;
  font-family: 'Merriweather', serif;
  text-align: center;
}

<div class="banner">
  <img class="banner-img" alt="banner image" src="https://images.unsplash.com/photo-1605580556856-db8fae94b658?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
  <div class="banner-text">Hello, Welcome To My Portfolio!
    <p>I'm Nicholas!</p>
  </div>
</div>

Answer 3

Answer №2

If you're struggling with a design issue, I've shared some CSS code that might help:

.banner {
  display: block;
  width: 100%;
  position: relative;
    min-height: 700px;
}

.banner-img {
  display: block;
  width: 100%;
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  font-size: 70px;
  color: aliceblue;
  font-family: 'Merriweather', serif;
  text-align: center;
}

@media only screen and (max-width: 850px) {
    .banner-text {
        font-size: 35px;
    }
}

Here are some key points to consider:

When using "position:absolute," it's best to have a parent element with "position:relative"

For setting the width of text elements, adjust the "font-size" rather than the "width" property

Understand how to use @media rules in CSS for responsive design, enabling property changes at different screen sizes

Adjusting the top and left properties can help center text; utilizing "transform:translate" is crucial for precise centering. Feel free to tweak these values for your desired layout.

Answer 4

If you're struggling with a design issue, I've shared some CSS code that might help:

.banner {
  display: block;
  width: 100%;
  position: relative;
    min-height: 700px;
}

.banner-img {
  display: block;
  width: 100%;
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  font-size: 70px;
  color: aliceblue;
  font-family: 'Merriweather', serif;
  text-align: center;
}

@media only screen and (max-width: 850px) {
    .banner-text {
        font-size: 35px;
    }
}

Here are some key points to consider:

When using "position:absolute," it's best to have a parent element with "position:relative"

For setting the width of text elements, adjust the "font-size" rather than the "width" property

Understand how to use @media rules in CSS for responsive design, enabling property changes at different screen sizes

Adjusting the top and left properties can help center text; utilizing "transform:translate" is crucial for precise centering. Feel free to tweak these values for your desired layout.

Answer 5

Answer №3

Utilize font-size:clamp() and the grid property to effortlessly center content without worrying about its position:

The function clamp(MIN, VAL, MAX) is interpreted as max(MIN, min(VAL, MAX))

header {
  display: grid;
  align-items: center;
  font-size: clamp(30px, 70px, 6vw);
  color: aliceblue;
  font-family: 'Merriweather', serif;
  text-shadow: 0 0 1px #333;/* for improved visibility */
}

header h1 {
  font-size: inherit
}

header img,
header div {
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  text-align: center;
}

<header>
  <img src="https://picsum.photos/id/103/1200/800">
  <div>
    <h1>Hello, Welcome To My Portfolio!</h1>
    <p>I'm Nicholas!</p>
  </div>
</header>

Answer 6

Utilize font-size:clamp() and the grid property to effortlessly center content without worrying about its position:

The function clamp(MIN, VAL, MAX) is interpreted as max(MIN, min(VAL, MAX))

header {
  display: grid;
  align-items: center;
  font-size: clamp(30px, 70px, 6vw);
  color: aliceblue;
  font-family: 'Merriweather', serif;
  text-shadow: 0 0 1px #333;/* for improved visibility */
}

header h1 {
  font-size: inherit
}

header img,
header div {
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  text-align: center;
}

<header>
  <img src="https://picsum.photos/id/103/1200/800">
  <div>
    <h1>Hello, Welcome To My Portfolio!</h1>
    <p>I'm Nicholas!</p>
  </div>
</header>

Answer 7

Answer №4

To ensure your text remains readable on varying screen sizes, it is important to use relative values for font-size. This allows the font size to decrease proportionally as the screen size decreases. Additionally, adding position: relative to the parent element, in this case .banner, ensures that when you apply position: absolute to .banner-text, it is contained within its parent element. See the code snippet below.

.banner {
  position: relative;
  display: block;
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
}

.banner-img {
  display: block;
  width: 100%;
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.4em;
  color: aliceblue;
  font-family: 'Merriweather', serif;
  text-align: center;
  width: auto;
}

@media screen and (max-width: 600px) {
  .banner-text {
    font-size: 1.7em;
  }
}

<div class="banner">
  <img class="banner-img" alt="banner image" src="https://static.vecteezy.com/system/resources/previews/000/582/542/non_2x/vector-abstract-template-black-frame-layout-metallic-red-light-on-dark-background-modern-luxury-futuristic-technology-concept.jpg">
  <div class="banner-text">Hello, Welcome To My Portfolio!
    <p>I'm Nicholas!</p>
  </div>
</div>

For smaller screens, a media query has been added to adjust the font size accordingly.

Answer 8

To ensure your text remains readable on varying screen sizes, it is important to use relative values for font-size. This allows the font size to decrease proportionally as the screen size decreases. Additionally, adding position: relative to the parent element, in this case .banner, ensures that when you apply position: absolute to .banner-text, it is contained within its parent element. See the code snippet below.

.banner {
  position: relative;
  display: block;
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
}

.banner-img {
  display: block;
  width: 100%;
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.4em;
  color: aliceblue;
  font-family: 'Merriweather', serif;
  text-align: center;
  width: auto;
}

@media screen and (max-width: 600px) {
  .banner-text {
    font-size: 1.7em;
  }
}

<div class="banner">
  <img class="banner-img" alt="banner image" src="https://static.vecteezy.com/system/resources/previews/000/582/542/non_2x/vector-abstract-template-black-frame-layout-metallic-red-light-on-dark-background-modern-luxury-futuristic-technology-concept.jpg">
  <div class="banner-text">Hello, Welcome To My Portfolio!
    <p>I'm Nicholas!</p>
  </div>
</div>

For smaller screens, a media query has been added to adjust the font size accordingly.

Tips for ensuring text on an image dynamically resizes based on the browser's dimensions

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for getting the setInterval function to work with a progress bar even when a tab is not in focus

Upon calling the method, an undesirable page refresh occurs

Expanding the link directory

Navigating an indefinite amount of state variables in React.js: A comprehensive guide

Incorporating multiple CSS style sheets within a single HTML document

Interacting with API using Ajax and jQuery

The feature "text-underline-position: under" is not functioning properly in Android Chrome

Steps to reverting CSS attributes back to their default values for a specified element (or blocking inheritance)

Trouble embedding iframes in local files?

Why does Javascript Tic-Tac-Toe delay notifying the user until the entire board is full?

Retrieving HTML array values using jQuery

Can the styling and variables of Bootstrap4 be altered dynamically?

Convert the first child of the element with the id "images" into a string using document.getElementById("images").children

Is it possible to remove tsconfig.spec.json from an Angular project?

Shrink Font-Awesome icon sizes using a Node.js and Express.js web application

Every div must have at least one checkbox checked

Utilizing BeautifulSoup to Extract Links

Javascript and CSS combo for creating a stylish fade effect

Is there a way to ensure that the column widths in the Huxtable RTF output align perfectly with the widths of the HTML

Is it possible to create a pure CSS responsive square that is positioned to the top right of a div element of any size?