'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;
}
htmlcss


Solution 1:[1]

You could try:

background-position: right top;

If you need a margin add it to the image.

Solution 2:[2]

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

Solution 3:[3]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 germanfr
Solution 2 Muthu Kumar
Solution 3 Jay Parekh

Related Questions