Why won't my image align to the right? CSS-CodePudding

I am stuck on this simple issue. How the heck do I align my image to the right border of the box? I tried float:right, align-self: end, margin: -4em, I tried most things I found online but nothing. As you can see I put the image through CSS as a background image for a div. I am stuck.

how it should look how it should look like

how it is

  body{
    background-color: hsl(233, 47%, 7%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 6em;
  }
  .all{
    background-color: hsl(244, 38%, 16%);
    width: 80em;
    height: 28em;
    border-radius: 0.725em;
    overflow: hidden;
    display: flex;
  }
  .bella{
    background-image: url(images/image-header-desktop.jpg);
    height: 30em;
    width: 30em;
    background-repeat: no-repeat;
    contain: content;
    display: inline-block;    
    background-position: right;
    align-self: flex-end;
    clear: left;
    float: right;
  }
  .writings{
    font-family: 'Inter';
    display: flex;
    flex-direction: column;
    max-width: 30em ;
    margin: 6em;
  }
  .writings h1{
    font-weight: 700;
    color: white;
  }
  #viola{
    color: hsl(277, 64%, 61%);
  }
  .writings p{
    color: hsla(0, 0%, 100%, 0.75);
    font-weight: 400;
  }
  .figures{
    display: flex;
  }
  .figures h2{
    font-weight: 700;
    color: white;
    font-family: 'Inter';
  }
  .figures h5{
    color: hsla(0, 0%, 100%, 0.6);
    text-transform: uppercase;
    font-family: 'Lexend Deca';
    letter-spacing: 2px;
  }
  .fig1{
    padding-right: 5em;
  }
HTML

<body>
  <div ></div>
    <div >
      <div >
          <h1>Get <span id="viola">insights</span> that help your business grow.</h1>
          <p> Discover the benefits of data analytics and make better decisions regarding revenue, customer 
            experience, and overall efficiency.</p>
          <div >
            <div ><h2>10k </h2><h5> companies</h5></div>
            <div ><h2>1314</h2><h5> templates</h5></div>
            <div ><h2>12M </h2><h5> queries</h5></div>
          </div>
      </div>
      <div ></div>
    </div>
  </div>
</body>
</html>

CodePudding user response：

Remove the float you had set on the div with the background image. This is not needed with flex. Then set your height and width to 100%. I added a dummy image for demonstration purposes. See below.

body {
  background-color: hsl(233, 47%, 7%);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6em;
}

.all {
  background-color: hsl(244, 38%, 16%);
  width: 80em;
  height: 28em;
  border-radius: 0.725em;
  overflow: hidden;
  display: flex;
}

.bella {
  background-image: url(https://dummyimage.com/600x400/000/fff);
  height: 100%;
  width: 100%;
  /* background-repeat: no-repeat; */
  contain: content;
  display: inline-block;
  background-position: right;
  /* align-self: flex-end; */
  /* clear: left; */
  /* float: right; */
}

.writings {
  font-family: 'Inter';
  display: flex;
  flex-direction: column;
  max-width: 30em;
  margin: 6em;
}

.writings h1 {
  font-weight: 700;
  color: white;
}

#viola {
  color: hsl(277, 64%, 61%);
}

.writings p {
  color: hsla(0, 0%, 100%, 0.75);
  font-weight: 400;
}

.figures {
  display: flex;
}

.figures h2 {
  font-weight: 700;
  color: white;
  font-family: 'Inter';
}

.figures h5 {
  color: hsla(0, 0%, 100%, 0.6);
  text-transform: uppercase;
  font-family: 'Lexend Deca';
  letter-spacing: 2px;
}

.fig1 {
  padding-right: 5em;
}

HTML

<body>
  <div ></div>
  <div >
    <div >
      <h1>Get <span id="viola">insights</span> that help your business grow.</h1>
      <p> Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
      <div >
        <div >
          <h2>10k </h2>
          <h5> companies</h5>
        </div>
        <div >
          <h2>1314</h2>
          <h5> templates</h5>
        </div>
        <div >
          <h2>12M </h2>
          <h5> queries</h5>
        </div>
      </div>
    </div>
    <div ></div>
  </div>
  </div>
</body>

CodePudding user response：

First, I would try to set the height to 100%. Then consider to make both sides equally wide, if you want it to look exactly like the "how it should look" version. Additionally, your picture has to have the right nativ width and height so that it is as big as the left side of your div.

CodePudding user response：

the problem is in the image you have to attach an image with fixed sizes and if you do not have a fixed size use: background-position: center center; background-size: cover; in this way the image will be spread all over the space without being repeated. If you have a still image, you only need width: 100%; and height: 100%; , the rest will work automatically.

body {
  background-color: hsl(233, 47%, 7%);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6em;
}
.all {
  background-color: hsl(244, 38%, 16%);
  width: 80em;
  height: 28em;
  border-radius: 0.725em;
  overflow: hidden;
  display: flex;
}
.bella {
  background-image: url(https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg);
  height: 100%;
  background-repeat: no-repeat;
  width: 100%;
  background-position: center center;
  background-size: cover;
}
.writings {
  font-family: "Inter";
  display: flex;
  flex-direction: column;
  max-width: 30em;
  margin: 6em;
}
.writings h1 {
  font-weight: 700;
  color: white;
}
#viola {
  color: hsl(277, 64%, 61%);
}
.writings p {
  color: hsla(0, 0%, 100%, 0.75);
  font-weight: 400;
}
.figures {
  display: flex;
}
.figures h2 {
  font-weight: 700;
  color: white;
  font-family: "Inter";
}
.figures h5 {
  color: hsla(0, 0%, 100%, 0.6);
  text-transform: uppercase;
  font-family: "Lexend Deca";
  letter-spacing: 2px;
}
.fig1 {
  padding-right: 5em;
}

<div ></div>
<div >
  <div >
    <h1>Get <span id="viola">insights</span> that help your business grow.</h1>
    <p> Discover the benefits of data analytics and make better decisions regarding revenue, customer
      experience, and overall efficiency.</p>
    <div >
      <div >
        <h2>10k </h2>
        <h5> companies</h5>
      </div>
      <div >
        <h2>1314</h2>
        <h5> templates</h5>
      </div>
      <div >
        <h2>12M </h2>
        <h5> queries</h5>
      </div>
    </div>
  </div>
  <div ></div>
</div>
</div>