CODEWITHSUNDEEP
htmlcss
user3550879
user3550879

Reputation: 3469

padding not working on border-ed div

I am trying to put a circle border around a div with a background image. I want the background image to be as big as can be with a 10px padding between it and the border. This image transitions (scaled down) to 50px when user scrolls and the border is removed so it needs to remain 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 for the padding. Not sure how to fix it. ALSO, I don't want the background image clipped

Upvotes: 4

Views: 1203

Answers (3)

Rounin
Rounin

Reputation: 29463

As far as I know, it's not possible to have an unclipped background: take account of padding:.

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

  1. Declare box-sizing: border-box;
  2. Have a border: stand in for padding:; and then
  3. Have a box-shadow: stand in for border:.

See 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>

Upvotes: 1

Persijn
Persijn

Reputation: 14990

Here is a border added to the .brand class with an relative positioned .brand where the :after pseudo class is positioned absolute.
this is to create an cricle that goes outside the shape.

.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>

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115099

The background of an element applies to any padding...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>

Alternative: Use a wide border and a box-shadow for the outer "border".

* {
  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>

Upvotes: 5

Related Questions