CODEWITHSUNDEEP
htmlcss
Spencer H
Spencer H

Reputation: 663

CSS background-position top right corner

I want icon background image on a button to appear at the top right corner.

I successfully used background-position: bottom top 100px to move the image to the top, but I have been unsuccessful moving the image to the right.

Is there something similar to background-position: bottom top 100px, right 900px that might help produce the desired results?

#AddNewMeetingButton {
    position: absolute;
    top: 0;
    text-align: center;
    background-image: url(Images/add_icon_48x48.png);
    background-position: bottom top 100px, right 800px;
    background-repeat: no-repeat;
    height: 190px;
    width: 915px;
    background-color: transparent;
    outline: none;
    border: none;
    z-index: 2;
}

Upvotes: 7

Views: 21459

Answers (4)

Muthukumar
Muthukumar

Reputation: 656

Use the shorthand property to set the background properties in one declaration:

background: #ffffff url("img_tree.png") no-repeat right top;

Using this shorthand property you can order as elaborated in detailed below

1.) background-color : 3 type of valid color formating like "red", HEX value #000000, an RGB value like "rgb(255,0,0)"

2.) background-image : url

3.) background-repeat : repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

4.) background-attachment : scroll|fixed|local|initial|inherit;

5.) background-position : the value combination as shown below

left top

left center

left bottom

right top

right center

right bottom

center top

center center

center bottom

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 114991

Something like this

background-image: url(https://i.sstatic.net/cW9aK.png);
background-repeat: no-repeat;
background-size: 48px 48px;
background-position: right 10px top 10px;

JSfiddle Demo

MDN Reference

background-position:<position> where:

<position> is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.

So:

background-position: right 10px top 10px;

puts the image at the top / right but 10px away from the right edge and 10px from the top edge

Upvotes: 19

germanfr
germanfr

Reputation: 562

You could try:

background-position: right top;

If you need a margin add it to the image.

Upvotes: 3

Jay Parekh
Jay Parekh

Reputation: 41

Try:

float:right;

That should do it, otherwise I think you have to set position property to "relative" for the parent element of the button element.

Try the float:right property first.

Upvotes: -2

Related Questions