aligning text properly when having background image in div-CodePudding

I've got a small problem regarding background-image and some content. Right now, I've got a specific div that contains a background-image. I've got another one with content. They seperate the page into 2 sections. But when I'm sizing my image, it pushes the text all the way to the right. I'd like to have the image (it's smaller on small screens, but grows bigger when screen sizes increases) be independent from my content, so that I can center the text until the image is about to touch it, then make it so that the image is more on the left and the text more to the right. My HTML looks like this:

<div className={styles.indexMain}>
    <div className={styles.imageWrapper}>
      <div className={styles.heroImage}></div>
    </div>

    <div className={styles.ctaContent}>
      <h1 className={styles.ctaTitle}>
        Lorem Ipsum
        <span> Lorem</span> Lorem Ipsum.
      </h1>

      <p className={styles.ctaSubtitle}>
        Lorem ipsum some call to action paragraph
      </p>
      <Link to="/contact" className={styles.ctaButton}>
        Contact us
      </Link>
    </div>
  </div>

MY CSS currently looks like this:

    .indexMain {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
  margin-top: 5rem;
}

.imageWrapper {
  flex-direction: column;
  display: flex;
  justify-content: flex-end;
}

.heroImage {
  background-image: url(../images/heroBackgroundMain.png);
  min-height: 100vh;
  min-width: 50vw;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom left;
  opacity: 0.9;
  margin-top: 5rem;
  z-index: -1;
  margin: 0 auto;
}
.ctaContent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 auto;
  margin-left: -2rem;
}
.ctaTitle {
  font-weight: 500;
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}

.ctaSubtitle {
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 2rem;
  text-align: jusitfy;
 
}

.ctaButton {
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  background-color: #f07818;
  transition: all 300ms ease-in-out;
  font-size: 0.9rem;
}

.ctaButton:hover,
.ctaButton:focus {
  background-color: #78c0a8;
}


.ctaTitle span {
  color: #78c0a8;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
}

I hope it makes sense. I've been stuck on this for far too long, and I can't seem to figure out why :(

CodePudding user response：

You have two sections, the left section is your background image and the right section is the text. For bigger screens, your text isn't centered in the section to the right, because you move it to the left with minus margin. Remove margin-left: -2rem; from .ctaContent to fix it.

If you want the image behind the text, you can for example move the code for the background image to .indexMain. The content doesn't get affected by the image this way.

.indexMain {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
  margin-top: 5rem;
  //background image
  background-image: url(https://placekitten.com/600/600);
  min-height: 100vh;
  min-width: 50vw;
  background-size: contain;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom left;
}

CodePudding user response：

In this case, CSS media query plays a vital role in changing size, and shape, enabling or disabling the view of content, etc. You can read about responsive web design media queries on the w3schools website. This is very well explained there.

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