Menu icon Foundation
Problem with margin on DIV with background image.

I am havins some problems with a background image. The image starts all the way to the left while there should be a margin between the edge of the ROW and the edge of the DIV with the background. See image and code.

The page is currently on http://www.guitartabsexplorer.com/foundation/php/_framside.php

Problem

....

<div class="wrapper">

....

    <div class="row">
    	<div class="small-12 medium-7 columns searchdiv topmargin">
            Content like forms, links and heading here
            This is where the problem is
        </div>
    	<div class="small-12 medium-5 columns topmargin">
		    Images
		</div>
	</div>

....

    
</div>
            

SCC app.css

.searchdiv
    { 
 	background-image: url(http://www.guitartabsexplorer.com/foundation/images/back-search.jpg);
	}
    
@media only screen 
and (min-width : 1024px)
    { 
    .searchdiv
	    {
        height:226px;
        }
    }

.topmargin
    { 
	margin-top: 0.9375rem;
	}
    

background Imagebackgrounddivmargin

I am havins some problems with a background image. The image starts all the way to the left while there should be a margin between the edge of the ROW and the edge of the DIV with the background. See image and code.

The page is currently on http://www.guitartabsexplorer.com/foundation/php/_framside.php

Problem

....

<div class="wrapper">

....

    <div class="row">
    	<div class="small-12 medium-7 columns searchdiv topmargin">
            Content like forms, links and heading here
            This is where the problem is
        </div>
    	<div class="small-12 medium-5 columns topmargin">
		    Images
		</div>
	</div>

....

    
</div>
            

SCC app.css

.searchdiv
    { 
 	background-image: url(http://www.guitartabsexplorer.com/foundation/images/back-search.jpg);
	}
    
@media only screen 
and (min-width : 1024px)
    { 
    .searchdiv
	    {
        height:226px;
        }
    }

.topmargin
    { 
	margin-top: 0.9375rem;
	}
    
Rafi Benkual about 4 years ago

You'll have better luck with another div for the background image inside the columns. You can add margin all around it and get the results you want.