How to place background image and text inline in Bulma CSS?

Question

I am creating a portfolio page. I am using Bulma. The thing I want is to place the background image and text inline.

Here's the code:

<section class="hero is-halfheight upload-descr" style = "height: 37em">
        <div class="hero-body">     
            <div class="container">
                <div class="clearfix"></div>
                <hr class = "rm-descr-bar" style = "float: left;"></hr>
                <div class="clearfix"></div>
                <h1 class = "title">
                    Loren Ipsum
                </h1>
                <div class="content rm-has-medium-size">
                    <p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true">Lorem ipsum dolor sit amet, consectetur adipiscing<br />elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />Ut enim ad minim veniam, quis nostrud exercitation<br />ullamco laboris nisi ut aliquip ex ea<br />ea commodo consequat. Duis aute irure dolor.</p>
                </div>
            </div>
        </div>
</section>

The thing I want is background image shifted at right in <div class = "container">. However it gets cropped. I messed up with height and width of the container. This affected the text inside the container i.e. it was not vertically centered anymore. Please help.

I want to achieve this:

I tried:

<section class="hero is-halfheight upload-descr section" style = "height: 37em">
        <div class="hero-body container" style = "background: url('/img/pic.png') no-repeat right; background-size: contain;">     
            <div class="container">
                <div class="clearfix"></div>
                <hr class = "rm-descr-bar" style = "float: left;"></hr>
                <div class="clearfix"></div>
                <h1 class = "title">
                    Loren Ipsum
                </h1>
                <div class="content rm-has-medium-size">
                    <p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true">Lorem ipsum dolor sit amet, consectetur adipiscing<br />elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />Ut enim ad minim veniam, quis nostrud exercitation<br />ullamco laboris nisi ut aliquip ex ea<br />ea commodo consequat. Duis aute irure dolor.</p>
                </div>
            </div>
        </div>
</section>

I achieved the thing I wanted after trying above code. However, on decreasing viewport size, background image and text appears on above other maybe they got vertical and horizontal centered. Please help me. How can I place background image and text next to each other without any bugs?

Here's the bug:

Answer 1

Idea

• Left side text and right side the image
• Give all the same background color

Example

(The image ratio is about 4:3. Change CSS according to your needs.)

.mySection {
  background-color: #F93122;
  color: white;
  border: 1px solid white;
}

.myHero {
  padding: 50px 0 50px 75px;
}

.myHero .hr {
  display: inline-block;
  width: 100px;
  height: 15px;
  background: white;
  border-radius: 20px;
  margin-bottom: 15px;
}

.myHero h1 {
  font-size: 50px
}

@media(max-width: 768px) {
  .myHero {
    padding: 50px !important;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<section class="mySection">
  <div class="columns is-vcentered">
    <div class="column is-5-tablet is-5-desktop">
      <div class="myHero">
        <div class="hr"></div>
        <h1>Loren Ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta a et ipsa voluptates in velit rem minus nihil, blanditiis nisi, quidem tempore quos qui quas. Blanditiis hic dolorem fugiat? Blanditiis!</p>
      </div>
    </div>
    <div class="column is-7-tablet is-7-desktop">
      <figure class="image is4by3">
        <img src="http://i64.tinypic.com/29gedzq.png">
      </figure>
    </div>
  </div>
</section>

Hint

Bulma#image