Padding not working on border div

Question

I am trying to set the border of a circle around a div with a background image. I want the background image to be as large as it can be with a 10px indent between it and the border. This image goes (reduced) to 50 pixels when scrolling the user and removing the border, so he needs to leave a background image that takes up as much space as possible.

CSS

.brand, .brand:visited, .brand:hover {
 display: block;
 position: relative;
 height: 100px; width: 100px;
 margin-top: 25px;
 background: url('img/logo.png') no-repeat center center;
 background-size: 100% auto;
 padding: 10px;
 border: 1px solid #fff;
 border-radius: 50%;
}

Everything works except filling. Not sure how to fix it. ALSO I don't want to crop the background image

Answer 1

The background of the element applies to any addition ... unless the background-clip property is changed.

* {
  box-sizing: border-box;
}
.brand {
  margin: 25px auto;
  position: relative;
  height: 100px;
  width: 100px;
  background: url('http://lorempixel.com/image_output/city-q-c-200-200-7.jpg') no-repeat center center;
  background-size: 100% auto;
  padding: 10px;
  border: 1px solid red;
  border-radius: 50%;
  background-clip: content-box;
}
.brand:hover {
  padding: 5px;
}

<div class="brand"></div>

Run codeHide result

. .

* {
  box-sizing: border-box;
}
.brand {
  margin: 25px auto;
  position: relative;
  height: 100px;
  width: 100px;
  background: url('http://lorempixel.com/image_output/city-q-c-200-200-7.jpg') no-repeat center center;
  background-size: 100% auto;
  box-shadow: 0px 0px 0px 1px red;
  border: 10px solid white;
  border-radius: 50%;
}
.brand:hover {
  border-width: 5px;
}

<div class="brand"></div>

Hide result

Answer 2

, .brand .brand, - :after . , , .

.brand,
.brand:visited,
.brand:hover {
  position: relative;
  height: 100px;
  width: 100px;
  margin-top: 25px;
  margin-left: 25px;
  background: url('http://lorempixel.com/200/200') no-repeat center center;
  background-size: 100% auto;
  border-radius: 50%;
}
.brand:before {
  display: inline-block;
  position: absolute;
  left: -15px;
  top: -15px;
  content: "";
  width: 120px;
  height: 120px;
  border: 5px solid #fff;
  border-radius: 50%;
}
body {
  background-color: #222;
}

<div class="brand"></div>

Hide result

Answer 3

As far as I know, it is impossible to have unclipped background:into account padding:.

So ... this is a bit hacky, but you can:

• Announce box-sizing: border-box;
• Connect border:to padding:; and then
• Connect box-shadow:to border:.

See an example below:

/* Your original styles */
.brand, .brand:visited, .brand:hover {
 display: block;
 position: relative;
 height: 100px; width: 100px;
 margin-top: 25px;
 background: url('img/logo.png') no-repeat center center;
 background-size: 100% auto;
 padding: 10px;
 border: 1px solid #fff;
 border-radius: 50%;
}

/* A few extra styles just to make the background and border visible */
.brand, .brand:visited, .brand:hover {
 background-color: rgb(0,0,0);
 border: 1px solid rgb(255,0,0);
}

/* An alternative using border-box, and box-shadow */
.brand2, .brand2:visited, .brand2:hover {
 display: block;
 position: relative;
 height: 122px; width: 122px;
 margin-top: 25px;
 background: url('img/logo.png') no-repeat center center;
 background-size: 100% auto;
 background-color: rgb(0,0,0);
 border: 10px solid #fff;
 border-radius: 50%;
 box-sizing: border-box;
 box-shadow:1px 1px rgb(255,0,0), 1px -1px rgb(255,0,0), -1px -1px rgb(255,0,0), -1px 1px rgb(255,0,0);
}

/* Lining everything up */
div[class^='brand'] {
float: left;
margin-right:20px;
}

<div class="brand"></div>
<div class="brand2"></div>

Run codeHide result