CODEWITHSUNDEEP
css
J82
J82

Reputation: 8457

Change background-size on button?

I have a larger image, but I want to control the background size using CSS to get it down to 48x78px. How can I do this?

Here is a Fiddle of the below: 

.slick-prev,
.slick-next {
  background-size: 48px 78px;
  background: url("http://i.imgur.com/YiHjEd1.png") no-repeat;
  border: none;
  cursor: pointer;
  display: inline-block;
  font-size: 0px;
  height: 78px;
  line-height: 0px;
  margin-top: -10px;
  outline: none;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 48px;
}
<button type="button" data-role="none" class="slick-prev" style="display: block;">Previous</button>

Upvotes: 2

Views: 152

Answers (1)

misterManSam
misterManSam

Reputation: 24692

The background property allows you to specify background properties in shorthand, including the background-size property. Currently your background-size is being overwritten with the default auto.

Two Methods

  1. Place the background-size after the background property:

    background: url("http://i.imgur.com/YiHjEd1.png") no-repeat;
background-size: 48px 78px;

    This overwrites the default auto value given by the background property.

    Example

    .slick-prev,
.slick-next {
  background: url("http://i.imgur.com/YiHjEd1.png") no-repeat;
  background-size: 48px 78px;
  border: none;
  cursor: pointer;
  display: inline-block;
  font-size: 0px;
  height: 78px;
  line-height: 0px;
  margin-top: -10px;
  outline: none;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 48px;
}
    <button type="button" data-role="none" class="slick-prev" style="display: block;">Previous</button>

or

  1. Place the background-size values in the background property itself:

    background: url("http://i.imgur.com/YiHjEd1.png") 0 / 48px 78px no-repeat;

    The 0 is the same as the default background-position value and needs to be specified. The / indicates that the following lengths are for the background-size. This is nicely explained over here on the MDN.

    Example

    .slick-prev,
.slick-next {
  background: url("http://i.imgur.com/YiHjEd1.png") 0 / 48px 78px no-repeat;
  border: none;
  cursor: pointer;
  display: inline-block;
  font-size: 0px;
  height: 78px;
  line-height: 0px;
  margin-top: -10px;
  outline: none;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 48px;
}
    <button type="button" data-role="none" class="slick-prev" style="display: block;">Previous</button>

Upvotes: 1

Related Questions