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