1

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;
}
0

1 Answer 1

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;
Sign up to request clarification or add additional context in comments.

2 Comments

Now the picture isn't repeating, but padding changes only the width of the button....
Edited my answer please have a look

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.