html5 button with image

Question

I want to put some buttons onto the logo picture. I set first button and try to position it on the top right corner of the logo picture... Picture has width 100% and picture should be 100x100, but when do padding, the image is multiplying....

 <header>
    <button id="about" onclick="location.href='#';"> </button>
    <img id="logo" src="Content/images/logo.jpg" /> <br/>
</header>

#about {
position: absolute;
background-image: url('Content/images/about.png');
height: 100px;
width: 100px;
}

painotpi · Accepted Answer · 2013-06-18 04:33:52Z

2

You'll need to add this property to #about,

background-repeat: no-repeat;

Padding will change the width of the button and won't affect image positioning, if you want to move the background image, try this,

background-position: x y;

Here x and y are the coordinates of the image.

Furthermore, you could re-factor and use the background short-hand for better readability,

background: url('Content/images/about.png') x y no-repeat;

edited Jun 18, 2013 at 4:33

answered Jun 17, 2013 at 19:03

painotpi

7,0122 gold badges40 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

argh Over a year ago

Now the picture isn't repeating, but padding changes only the width of the button....

painotpi Over a year ago

Edited my answer please have a look

Collectives™ on Stack Overflow

html5 button with image

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related