CODEWITHSUNDEEP
css
user3192829
user3192829

Reputation: 33

Is there a better way to align this background image with the text above it?

I'm trying to align a background image (gray circles on the right) to the text above it using multiple media queries but I'm not having much success. I could make a bunch more media queries but I just wondered if there was a smarter, more automated way to do this.

Here's the page: https://veritywebsvs.com/wmjw/ I need to get the gray circles on the right to be centered with the text above it as stated before already.

Here's the CSS I'm using to try to center the circle:

#hero .fl-node-60bfc0dd0afeb > .fl-row-content-wrap {
    background-image: url(circles-2-gray-trans.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-attachment: scroll;
    background-size: cover;
    border-width: 0;
    background-clip: border-box;
    min-height: 650px;
}
#hero > .fl-row-content-wrap {
    background-size: 60vw;
}

@media (min-width: 1920px) {
    #hero > .fl-row-content-wrap {
        background-position: 95% center;
    }
}
@media (min-width: 1100px) and (max-width: 1919px) {
    #hero > .fl-row-content-wrap {
        background-position: 110% center;
    }
}
@media (min-width: 992px) and (max-width: 1099px) {
    #hero > .fl-row-content-wrap {
        background-position: 120% center;
        background-size: 75vw;
    }
}
@media (max-width: 991px) {
    #hero > .fl-row-content-wrap {
        background-position: 130% center;
        background-size: 80vw;
    }
}

Upvotes: 0

Views: 80

Answers (1)

kiran
kiran

Reputation: 693

Instead of using background image and trying to get the image to right position, use <img> and position it wherever you want with help of negative margins if you use position: relative, or you can use top, bottom, right, left positioning if you use position: absolute. along with that use z-index to layer the image properly.

Add a div and img like i have added here, it will solve your immediate issue of positioning.

https://www.w3schools.com/css/css_positioning.asp

.for-bg {
  width: 1080px;
  margin-top: -1050px;
  max-width: revert;
  right: 150px;
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin-right: -300px;
  margin-bottom: -630px;
}
<div class="fl-module fl-module-rich-text fl-node-60c015378acf7" data-node="60c015378acf7">
  <div class="fl-module-content fl-node-content">
    <div class="fl-rich-text">
      <p>WMJW has been serving clients<br>
        <span style="color: #ca9130;">for ___ years</span><br> and ________.</p>
    </div>
  </div>
</div>
<div><img src="https://veritywebsvs.com/wmjw/wp-content/uploads/2021/06/circles-2-gray-trans.svg" class="for-bg"></div>

Upvotes: 1

Related Questions