Menu icon Foundation
Background image on row

Hello.
I am newbie in foundation.
I got some problem about background image on row.
Here is some code:

<div class="row">
  <div class="large-12 columns">
    <p>
      <img src="<%= image_path('back.png') %>">
    </p>

    <div style="position: absolute; left: 220px; top: 180px">
      <img src="<%= image_path('smtg.png') %>">
    </div>

    <div style="position: absolute; right: 40px; bottom: 0px;">
      <a href="#" class="try-button">Try</a>
    </div>
  </div>
</div>
            

         

This code is fine.
It makes row with left and right margin not equal 0 (so content with image looks like centered).
Little bit more code:

<div class="row" style="background-image: url(<%= image_path('back_another.png') %>)">
  <div class="large-4 columns text-center" style="font-family: 'PT Serif', serif;">
    <h2>Text</h2>
    <div class="row"><h4>Text</h4></div>
    <div class="row">Text</div>
    <div class="row"><h4>Text</h4></div>
    <div class="row">Text</div>
    <div class="row"><h4>Text</h4></div>
    <div class="row">Text</div>
  </div>
  <div class="large-4 columns text-center" style="vertical-align: center;">
    <img src="<%= image_path('smth.png') %>">
  </div>
  <div class="large-4 columns text-center" style="font-family: 'PT Serif', serif;">
    <h2>Text</h2>
    <div class="row"><h4>Text</h4></div>
    <div class="row">Text</div>
    <div class="row"><h4>Text</h4></div>
    <div class="row">Text</div>
    <div class="row"><h4>Text</h4></div>
    <div class="row">Text</div>
  </div>
</div>
            

         

This code also makes row with content.
But backgorund image margin-left is 0 so backgorund image is stretched to all row width and starts to repeat, unlike first code (in first code we got left and rigth margin ).

So two rows together looks like this:

Untitled

How to make backgorund image correctly?

Thank you.

rowbackground-imageFoundation 5

Hello.
I am newbie in foundation.
I got some problem about background image on row.
Here is some code:

<div class="row">
  <div class="large-12 columns">
    <p>
      <img src="<%= image_path('back.png') %>">
    </p>

    <div style="position: absolute; left: 220px; top: 180px">
      <img src="<%= image_path('smtg.png') %>">
    </div>

    <div style="position: absolute; right: 40px; bottom: 0px;">
      <a href="#" class="try-button">Try</a>
    </div>
  </div>
</div>
            

         

This code is fine.
It makes row with left and right margin not equal 0 (so content with image looks like centered).
Little bit more code:

<div class="row" style="background-image: url(<%= image_path('back_another.png') %>)">
  <div class="large-4 columns text-center" style="font-family: 'PT Serif', serif;">
    <h2>Text</h2>
    <div class="row"><h4>Text</h4></div>
    <div class="row">Text</div>
    <div class="row"><h4>Text</h4></div>
    <div class="row">Text</div>
    <div class="row"><h4>Text</h4></div>
    <div class="row">Text</div>
  </div>
  <div class="large-4 columns text-center" style="vertical-align: center;">
    <img src="<%= image_path('smth.png') %>">
  </div>
  <div class="large-4 columns text-center" style="font-family: 'PT Serif', serif;">
    <h2>Text</h2>
    <div class="row"><h4>Text</h4></div>
    <div class="row">Text</div>
    <div class="row"><h4>Text</h4></div>
    <div class="row">Text</div>
    <div class="row"><h4>Text</h4></div>
    <div class="row">Text</div>
  </div>
</div>
            

         

This code also makes row with content.
But backgorund image margin-left is 0 so backgorund image is stretched to all row width and starts to repeat, unlike first code (in first code we got left and rigth margin ).

So two rows together looks like this:

Untitled

How to make backgorund image correctly?

Thank you.


Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Hey Sergey!

You will need this CSS.

.yourClass {
  background: url("your/url/Image.png") no-repeat center;
}

The full shorthand syntax would be:

.yourClass  {
  background: color url repeat position-x position-y;
}

UPDATE:

In your first case you will need this CSS as well:

background-size: contain;

Wing-Hou Chan over 5 years ago

Hey Sergey!

You will need this CSS.

.yourClass {
  background: url("your/url/Image.png") no-repeat center;
}

The full shorthand syntax would be:

.yourClass  {
  background: color url repeat position-x position-y;
}

UPDATE:

In your first case you will need this CSS as well:

background-size: contain;

Sergey Boytsov over 5 years ago

Thank for answer. But this code not working with first case

Wing-Hou Chan over 5 years ago

In your first case you will need this CSS as well:

background-size: contain;