CODEWITHSUNDEEP
javascripthtmlcssbackgroundjsfiddle
Moussa Harajli
Moussa Harajli

Reputation: 1516

DIV Background Positioning With Padding

I have a check mark that I want to put next to text in a button but when i do Background:left center; it works but i would like to add padding and stuff like that to it, is there any way I can do it with the code provided at JSFiddle? I would like to center the check mark and space it out a bit.

.Button {
    padding:10px;
    border:1px solid #000;
    width:auto;
    color:#CCC
}

.Button:hover {
    color:#FFF;
    cursor:pointer;
}

.Check{
    background:url('http://67.184.73.19/Munet/Assets/Pictures/OffTick.png') no-repeat;
}

.Check:hover {
    background:url('http://67.184.73.19/Munet/Assets/Pictures/Tick.png') no-repeat;
}

HTML:

<div class="Button Check" style="background-color:rgb(69,72,77);">Test</div>

Upvotes: 1

Views: 101

Answers (2)

bensmithbwd
bensmithbwd

Reputation: 343

This is the code to your fiddle updated with the tick in place:

.Button {
  padding:10px 10px 10px 20px;
  border:1px solid #000;
  width:auto;
  color:#CCC
}

.Button:hover {
  color:#FFF;
  cursor:pointer;
}

.Check{
  background:url('http://67.184.73.19/Munet/Assets/Pictures/OffTick.png') no-repeat;
  background-position: 5px 15px;
  OR: background-position: 5px center;
}

.Check:hover {
  background:url('http://67.184.73.19/Munet/Assets/Pictures/Tick.png') no-repeat;
  background-position: 5px 15px;
  OR: background-position: 5px center;
}

Update:

Also make sure as per GordonsBeard's answer that you learn WHY this worked: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position&preval=10px%20200px

Upvotes: 1

GordonsBeard
GordonsBeard

Reputation: 646

You can use the background-poisition tag.

background-position: <spacefromleft> <spacefromtop>;

Or you can declare it within the same background declaration.

https://developer.mozilla.org/en-US/docs/CSS/background-position

.Check{
    background:url('OffTick.png') no-repeat 10px center;
}

.Check:hover {
    background:url('Tick.png') no-repeat 10px center;
}

If you'd like to have the Text match up with the background, then just make sure to supply correct padding on your .Button (ie: have larger padding on the left side than you have on the remaining three other sides).

Upvotes: 0

Related Questions