Html css

Give Background Image Padding

Posted by Weston Ganger on July 08, 2014

If you want to have a background image with size of cover or contain then sometimes you dont want the image to go right to the edge of your div

What you can do is apply a transparent border to your div like so:

The HTML:


<div class="myDiv"></div>

The CSS:


.myDiv{
  background:url('myBackgroundImage.png') center center no-repeat;
  background-size:cover;
  border: 10px solid transparent;
}

Posted in HTML / CSS and Tagged with css 


Need help on your next project or application?

I specialize in Ruby-on-Rails, AngularJS, Javascript, Bootstrap, and Hybrid Mobile Apps with Cordova & Ionic.

Contact Me

Recommended Posts