CODEWITHSUNDEEP
htmlcss
Vinay Kapoor
Vinay Kapoor

Reputation: 77

Set background image using css

Here i upload the picture, i want to put my image to the left side of Food and Travel textenter image description here

.block-title h3 {
  color: #151515;
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.9px;
  margin-bottom: 24px;
  margin-top: 50px;
  padding-bottom: 13px;
  position: relative;
  text-align: center;
}
<div class="col-lg-12">
  <p>
    <center><img src="#">
      <div class="block-title">
        <h3>Food & Travel</h3>
      </div>
    </center>
  </p>
</div>

Upvotes: 0

Views: 301

Answers (2)

Anya
Anya

Reputation: 1418

I would change your HTML a little bit:

<div class="col-lg-12">
    <div class="block-title">
        <img class="image" src="https://image.flaticon.com/icons/png/512/45/45260.png">
        <h3 class="title">Food & Travel</h3>
    </div>
</div>

Some observations about your HTML:

  • Since the creation of CSS, it is considered a bad practice to use styling elements inside HTML, like center. HTML should hold only content and CSS styles. center in HTML can be, in most cases, easily replaced by text-align: center in CSS;
  • Avoid giving styles to a tag (as you did with H3). It is always better to give a class for each individual element you want to style. For example, you can give a class to your image and to your header, as I did on the example above.

Float, as mentioned by some users here, is barely a good option. I would not recommend it. I'd go for using Flexbox on the container (block-title). It is the better option and the most accurate.

Your container would be something like

.block-title {
  display: flex;
  justify-content: center;
  align-items: center;
}

... and the magic is done!

Here is an example using flexbox: https://codepen.io/annabranco/pen/mzEXGv

Another option if you are not comfortable with using Flebox yet, it's to give the H3 a display: inline. By default, all header force a line break (they have display: block). If you change it to display: inline you force the other elements to be displayed in the same line as your header. In this case you would need to play around with vertical-align to find the exact spot where your text would be centered to the image.

.title {
    display: inline;
(..)
}

.image {
  vertical-align: -25px; //negative values go up and positive down.
}

Here is an another example, using inline: https://codepen.io/annabranco/pen/yRJvQa

Upvotes: 1

Marco Dal Zovo
Marco Dal Zovo

Reputation: 378

You just need to add that line of CSS

div.block-title { display: inline-block; }
<div class="col-lg-12">
  <p>
    <center><img src="#">
      <div class="block-title">
        <h3>Food & Travel</h3>
      </div>
    </center>
  </p>
</div>

Upvotes: 3

Related Questions