Set background image using css

Question

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

.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>

Well then float it, or make the div inline-block, or something like that … IMHO this is stuff you should not be asking here in the first place, but rather go through some tutorials that explain such basics … — misorude
– misorude, Commented Oct 5, 2018 at 8:13
It would be good if you could provide a codepen or a jsfiddle with your implementation. WIll help you get a better answer suited to your needs. — sid
– sid, Commented Oct 5, 2018 at 8:13
<center> can not be used anymore developer.mozilla.org/en-US/docs/Web/HTML/Element/center — Gerard
– Gerard, Commented Oct 5, 2018 at 8:22

Marco Dal Zovo · Accepted Answer · 2018-10-05 08:17:26Z

3

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>

answered Oct 5, 2018 at 8:17

Marco Dal Zovo

3782 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Temani Afif · Accepted Answer · 2018-10-05 10:02:12Z

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

Collectives™ on Stack Overflow

Set background image using css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related