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 


Want me to help develop your next project or application?

Contact Us

Specializing in Ruby-on-Rails, Javascript, Multi-Platform Electron Desktop Apps and Hybrid Cordova Mobile Apps.

Recommended Posts