www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] CSS background image button size control

  1. #1
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354

    resolved [RESOLVED] CSS background image button size control

    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>
    Last edited by JMRKER; 08-17-2012 at 01:53 PM.

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    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>
    JavaScript: Learn | Validate | Compact

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles