[RESOLVED] CSS background image button size control

**JMRKER** · 08-17-2012 01:48 PM

I'm trying to make a button with a background image.

Trouble is, no matter what I seem to change, I cannot control the size of the button
to see the image. I appears that the image is there, just very small.

Is there something obvious (obviously since it doesn't work) that I am missing?

Code:

<!DOC HTML>
<html>
<head>
<title> CSS image button </title>
<style type="text/css">

  #btn1 {
    height:150px; width:150px;
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/9/92/Easy_button.JPG");
    background-size: 150px 150px; 
    background-repeat: no-repeat;
  }
  #btn2 {
    height:100px; width:100px;
    background-image: url("http://25.media.tumblr.com/tumblr_m8s5qtbyI41qe1z7co1_400.gif");
    background-size: 100px 100px; 
    background-repeat: no-repeat;
  }

  .button {
    padding: 5px;
    border-top: 1px solid #777; border-left: 1px solid #777;
    border-bottom: 2px solid #000; border-right: 2px solid #000;
  }
  .button:hover {
    padding: 5px;
    border-top: 2px solid #000; border-left: 2px solid #000;
    border-bottom: 1px solid #777; border-right: 1px solid #777;
  }
</style>
</head>
<body>

<a href="http://www.google.com/" id="btn1" class="button"> </a>
<a href="http://www.webdeveloper.com/" id="btn2" class="button"> </a>

</body>
</html>

**bionoid** · 08-17-2012 02:21 PM

Try that:

Code:

<!DOCTYPE HTML>
<html>
<head>
<title> CSS image button </title>
<style type="text/css">

  #btn1 {
    height:150px; width:150px;
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/9/92/Easy_button.JPG");
    background-size: 150px 150px;
    background-repeat: no-repeat;
    display: inline-block;
  }
  #btn2 {
    height:100px; width:100px;
    background-image: url("http://25.media.tumblr.com/tumblr_m8s5qtbyI41qe1z7co1_400.gif");
    background-size: 100px 100px;
    background-repeat: no-repeat;
    display: inline-block;
  }

  .button {
    padding: 5px;
    border-top: 1px solid #777; border-left: 1px solid #777;
    border-bottom: 2px solid #000; border-right: 2px solid #000;
  }
  .button:hover {
    padding: 5px;
    border-top: 2px solid #000; border-left: 2px solid #000;
    border-bottom: 1px solid #777; border-right: 1px solid #777;
  }
</style>
</head>
<body>

<a href="http://www.google.com/" id="btn1" class="button"> </a>
<a href="http://www.webdeveloper.com/" id="btn2" class="button"> </a>

</body>
</html>

**JMRKER** · 08-17-2012 02:41 PM

That did it. Thanks a lot.

I would not have thought of a "display:inline-block" in a million years.
Something I was definitely missing.

Thread: [RESOLVED] CSS background image button size control

Thread Tools

Display

[RESOLVED] CSS background image button size control

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions