Give Background Image Padding

Posted by Weston Ganger

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;
}

Article Topic:Software Development - HTML / CSS

Date:July 08, 2014

Recommended Posts