Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How-to set background-position-x?

Tags:

css

opera

How Do i set background-position-x on Opera?

div#logocontainer{
    width: auto;
    height: auto;
    text-align: center;
    line-height: 200px;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../img/WatermarkMP.png);
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
    padding: 10px;
}

I have the following CSS rule, it will display correctly on Chrome and Safari, desktop and mobile versions. But it will not work on Opera, that does not seem to support the background-position-x: 50%; background-position-y: 50%; rules. Do I have to script this so that it's compatible with Opera? How do I work around this to support opera also?

It also does not seem to round jQuery Mobile corners...

like image 605
Astronaut Avatar asked Jun 12 '12 12:06

Astronaut


People also ask

What is background-position X?

The background-position-x CSS property sets the initial horizontal position for each background image. The position is relative to the position layer set by background-origin .

What is the default position of a background image?

The background-position property sets the starting position of a background image. Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

How do I center the background color in CSS?

You can use a combination of position keywords: center , top , bottom , left and right . background-position: center center; The background image will be positioned in the center of the element.

How do I change the background on my bottom picture?

background-position takes two arguments, an x-value and an y-value so to position it at the bottom, you would use: background-position: center bottom; .


1 Answers

You have to set background-position: 50% 50%. Those -x and -y properties are only supported in Internet Explorer and Webkit browsers.

like image 122
duri Avatar answered Nov 15 '22 19:11

duri