Resize SVG image on text over it

Question

I would like to place a title over a SVG image and center them in a bootstrap 5 row.

The "Team" title is positioned centered over the image but when I resize the browser or on mobile screen the title and sub-title resize accordingly but the image is not resized and stay in the original size.

I tried several solutions but I cannot have it to work. Can some help me? Thanks.

.title-with-cloud {
  position: relative;
  text-align: center;
}

.title-with-cloud img {
  width: 10vw; /* added by community */
}

.team-title {
  font-size: 5vw;
  font-weight: bold;
  position: absolute;
  bottom: 24px;
  margin-left: 50%;
  margin-right: -50%;
  transform: translate(-50%, 0%);
}

.team-subtitle {
  font-size: 2vw;
  font-weight: 400;
  margin-bottom: 2.5em;
}

<div class="row">
  <div class="col-12 text-center">
    <div class="title-with-cloud">
      <img class="img-fluid" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/caution.svg"></img>
      <h1 class="team-title">Team</h1>
    </div>

    <p class="team-subtitle">Some text...............</p>
  </div>
</div>

Please see [ask], then revise your post to ask a clear, specific question. Your current title doesn't make much sense and doesn't seem to correspond with the rest of your post. — isherwood, Oct 15 '22 at 13:07
Also, please tag your Bootstrap version. It offers many features that may be useful here. — isherwood, Oct 15 '22 at 13:09
It also wasn't clear how your image is resized. I've added some CSS to replicate that. Please revise as needed to show your problem. — isherwood, Oct 15 '22 at 13:23

isherwood · Accepted Answer · 2022-10-15T13:21:57.673

The usual approach to centering absolutely-positioned elements is to start them at 50% left and top and then shift them back half of their size. This keeps the element centered regardless of the parent's size.

Notice that I've substituted Bootstrap classes for some of your CSS. I've also added a container element to eliminate horizontal scroll.

.team-title {
  font-size: 5vw;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.team-subtitle {
  font-size: 2vw;
  font-weight: 400;
  margin-bottom: 2.5em;
}

.title-with-cloud img {
  width: 30vw; /* added by community */
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-12 text-center">
      <div class="title-with-cloud text-center position-relative">
        <img class="img-fluid" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/caution.svg"></img>
        <h1 class="team-title position-absolute">Team</h1>
      </div>

      <p class="team-subtitle">Some text...............</p>
    </div>
  </div>
</div>

Thank you very very much! It works as I wish. One thing I cannot catch... h1.team-title has div.title-with-cloud. Why is not sufficient left: 50%? I cannot catch the translate(50%, -50%). Thank you. — Old-fashioned-dev, Oct 15 '22 at 20:50
Sorry... I cannot understand why is necessary left: 50% AND translate(50%, -50%). Thank you. — Old-fashioned-dev, Oct 17 '22 at 14:37
As my opening sentence states, `left` starts the element at 50% of the parent element's width. `-50%` moves the element back half of its own width. It's a flexible way to center things. — isherwood, Oct 17 '22 at 14:40

Resize SVG image on text over it

1 Answers1