title: How to place background image and text inline in Bulma CSS?
body: <p>I am creating a portfolio page. I am using Bulma. The thing I want is to place the background image and text inline.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;section class="hero is-halfheight upload-descr" style = "height: 37em"&gt;
          &lt;div class="hero-body"&gt;     
              &lt;div class="container"&gt;
                  &lt;div class="clearfix"&gt;&lt;/div&gt;
                  &lt;hr class = "rm-descr-bar" style = "float: left;"&gt;&lt;/hr&gt;
                  &lt;div class="clearfix"&gt;&lt;/div&gt;
                  &lt;h1 class = "title"&gt;
                      Loren Ipsum
                  &lt;/h1&gt;
                  &lt;div class="content rm-has-medium-size"&gt;
                      &lt;p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing&lt;br /&gt;elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br /&gt;Ut enim ad minim veniam, quis nostrud exercitation&lt;br /&gt;ullamco laboris nisi ut aliquip ex ea&lt;br /&gt;ea commodo consequat. Duis aute irure dolor.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>The thing I want is background image shifted at right in <code>&lt;div class = "container"&gt;</code>. 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.</p>
  
  <p>I want to achieve this:
  <a href="https://i.stack.imgur.com/L2FlH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L2FlH.png" alt="enter image description here"></a></p>
  
  <p>I tried:  </p>
  
  <pre><code>&lt;section class="hero is-halfheight upload-descr section" style = "height: 37em"&gt;
          &lt;div class="hero-body container" style = "background: url('/img/pic.png') no-repeat right; background-size: contain;"&gt;     
              &lt;div class="container"&gt;
                  &lt;div class="clearfix"&gt;&lt;/div&gt;
                  &lt;hr class = "rm-descr-bar" style = "float: left;"&gt;&lt;/hr&gt;
                  &lt;div class="clearfix"&gt;&lt;/div&gt;
                  &lt;h1 class = "title"&gt;
                      Loren Ipsum
                  &lt;/h1&gt;
                  &lt;div class="content rm-has-medium-size"&gt;
                      &lt;p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing&lt;br /&gt;elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br /&gt;Ut enim ad minim veniam, quis nostrud exercitation&lt;br /&gt;ullamco laboris nisi ut aliquip ex ea&lt;br /&gt;ea commodo consequat. Duis aute irure dolor.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>Here's the bug:
  <a href="https://i.stack.imgur.com/EB6cP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EB6cP.png" alt="enter image description here"></a></p>