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

Html – Black background on text in hero image

I tried creating a hero image with text, but the background is visible behind the text. My text is white and the site is black

#hero-header{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("friends-cover2.jpg");
    background-position: center;
    background-size: cover;   
    background-repeat: no-repeat;
    height:66vh;
    margin-top: 25vh;
    position: relative;
    grid-area: hea;
}

.hero-header-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;  
    background-color: transparent;
}
<header id="hero-header">
   <div class='hero-header-text'>
      <h1>WELCOME</h1>
      <h3>welcome to the ultimatime FRIENDS fan page, where you will find an episode guide                 and trivia about the show.</h3>
      <button>Read more.</button>
  </div>
</header>

I have tried several things but can somehow not make it work.

Tags:

2

Answers


  1. 0

    To hide the background image behind the text, add a background-color property to the .hero-header-text class and set it to a solid color, such as white. Here’s the updated CSS:

    .hero-header-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;  
    background-color: white;  <!-- Add this line -->
}

    Ensure that the button element is also positioned correctly and has a background color that blends with the text background. Here’s an updated code snippet for the button:

    <button class="hero-button">Read more.</button>

    .hero-button {
    background-color: white;  <!-- Add this line -->
    color: black;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

    Make sure that the hero-button class is applied to the button element in your HTML code.

    I hope this helps!

    Login or Signup to reply.
  2. 0

    Assalam Alaikum 🙂
    Menimcha bu siz so’ragan narsa bo’lsa kerak

    .hero-header-text {
    text-align: center;
    padding: 10px 0;
    font-family: monospace;
}
h1 {
  font-size: 140px;
  background: linear-gradient(to right, rgba(67, 124, 205, .5), rgba(69, 214, 202, .2)),
               url('https://img.freepik.com/free-photo/cyclist-sunny-day-bike-adventure-travel-photo_1150-7513.jpg?w=1060&t=st=1704383295~exp=1704383895~hmac=c1c62a208b3c44fe44008c325e54207215395656a976fcdff078d5e3a36557a7');
  background-size: contain;
  background-position: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
    <header id="hero-header">
   <div class='hero-header-text'>
      <h1>WELCOME</h1>
      <h3>welcome to the ultimatime FRIENDS fan page, where you will find an episode guide                 and trivia about the show.</h3>
      <button>Read more.</button>
  </div>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search