Menu icon Foundation
Re-size background-image

Hi there

i would like the text of this banner to overlay the image but also I don't want the image to adapt to the element size. i want the image height bigger while text over image

the site http://staging.groomingme.edged.co.za/
this is the html




Imagine the best grooming services at your finger tips























Hi there

How can I change the img size of this background image to be bigger than the element content?

this is the site: http://staging.groomingme.edged.co.za/

<div class="background content-container" style="background:url( {{ asset('/img/headbackground.jpg') }} );">
    <div class="row">
        <div class="column large-12 medium-12 small-12">
            <h3><center>Imagine the best <b>grooming</b> services at your finger tips</h3></center>
         <div class="row collapse custom">
         <div class="large-1 end columns">
            <span class="prefix box"><i class="fi-marker"></i></span></input>
        </div>
        
          <div class="large-4 columns">
            <input type="text" placeholder="Search by location" />
          </div>
           <div class="large-1 end columns">
            <span class="prefix box"><i class="fi-shopping-bag"></i></span></input>
        </div>
         <div class="large-4 columns">
          <input type="text" placeholder="Search by grooming service" />
        
        </div>  
           <div class="large-2 end columns">
            <a href="#"><span class="postfix box"><i class="fi-magnifying-glass"></i></span></input></a>
        </div>
    </div>
        </div>
    </div>
</div>
            

         

backgournd background-image background-size

Hi there

i would like the text of this banner to overlay the image but also I don't want the image to adapt to the element size. i want the image height bigger while text over image

the site http://staging.groomingme.edged.co.za/
this is the html




Imagine the best grooming services at your finger tips























Hi there

How can I change the img size of this background image to be bigger than the element content?

this is the site: http://staging.groomingme.edged.co.za/

<div class="background content-container" style="background:url( {{ asset('/img/headbackground.jpg') }} );">
    <div class="row">
        <div class="column large-12 medium-12 small-12">
            <h3><center>Imagine the best <b>grooming</b> services at your finger tips</h3></center>
         <div class="row collapse custom">
         <div class="large-1 end columns">
            <span class="prefix box"><i class="fi-marker"></i></span></input>
        </div>
        
          <div class="large-4 columns">
            <input type="text" placeholder="Search by location" />
          </div>
           <div class="large-1 end columns">
            <span class="prefix box"><i class="fi-shopping-bag"></i></span></input>
        </div>
         <div class="large-4 columns">
          <input type="text" placeholder="Search by grooming service" />
        
        </div>  
           <div class="large-2 end columns">
            <a href="#"><span class="postfix box"><i class="fi-magnifying-glass"></i></span></input></a>
        </div>
    </div>
        </div>
    </div>
</div>
            

         
Andy Wallace almost 4 years ago

You'll have to apply a height to your background content-container div, or apply sufficient padding to either that div or the inner 'row':

<div class="background content-container" style="height: 300px; background:url(asset('/img/headbackground.jpg'));">

or

<div class="background content-container" style="padding-top: 50px; padding-bottom: 50px; background:url(asset('/img/headbackground.jpg'));">

or

<div class="background content-container" style="background:url(asset('/img/headbackground.jpg'));">
    <div class="row" style="padding-top: 50px; padding-bottom: 50px; ">

Anina over 3 years ago

Thanks this worked!