Questions tagged [background-position]

CSS property that sets the initial position, relative to the background position layer defined by background-origin for each defined background image

CSS property that sets the initial position, relative to the background position layer defined by background-origin for each defined background image.

Examples

.exampleone {
  background-image: url("logo.png");
  background-position: top;
}

.exampletwo {
  background-image: url("logo.png");
  background-position: 25% 75%;
}

References

  1. background-position - W3C Specification
  2. background-position - MDN Link
381 questions
87
votes
3 answers

Is background-position-x (background-position-y) a standard W3C CSS property?

I'm worried about background-position-x and background-position-y. Gecko (Firefox) and Presto (Opera) don't support them, but Webkit (Chrome, Safari) does... Does anyone know (with official references) if this is (or will be) included in the…
Guile
  • 1,473
  • 1
  • 12
  • 20
59
votes
12 answers

jQuery animate background position

I can't seem to get this working. $('#product_family_options_dd').animate({ height: '300px', width: '900px', backgroundPosition: '-20px 0px', }, The height and width animate but not the background.
jimbo
  • 621
  • 1
  • 5
  • 4
41
votes
9 answers

Multiple background images positioning

I've got three background images, all of width 643px. I want them to be set out like so: top image (12px height) no-repeat middle image repeat-y bottom image (12px height) no repeat I can't seem to do it without getting them to overlap (which is a…
Juddling
  • 4,594
  • 8
  • 34
  • 40
38
votes
6 answers

backgroundPositionX not working on Firefox

I have play with youtube's sprite animation but there is a problem. backgroundPositionX won't work under Firefox (but works on Chrome and IE8)... This is the code: https://jsfiddle.net/74RZb/ Extra info: the problem is that under firefox It doesn't…
T1000
  • 2,909
  • 7
  • 36
  • 53
36
votes
5 answers

Change background position with jQuery

I'd like to change the background position of a CSS-class while hovering a li-element. HTML: CSS: #carousel { float: left; width:…
Mats
  • 557
  • 2
  • 5
  • 15
30
votes
2 answers

Using percentage values with background-position on a linear-gradient

Is there any way to make background-position take percentage values? Currently my button only works with an explicit values for width and background-position. body { min-height: 100vh; display: flex; flex-direction: column; …
Mo.
  • 26,306
  • 36
  • 159
  • 225
26
votes
5 answers

Flip vertically a background-image every time it repeat-y

I'm searching for a trick that repeat my background image vertically, but every time the image is repeated I want to flip it vertically. I tried all the things in my mind with repeat-y but I don't found a solution, even searching for it in…
rpasianotto
  • 1,383
  • 1
  • 9
  • 22
18
votes
5 answers

Using Css Sprites and background position

I have a div element, say of width 200px and height 200px. I need a small image to appear on the top right corner of the div. How one would normally do it would be with background: url(/images/imagepath.png) top right; However the problem is, I am…
Maxim Dsouza
  • 1,507
  • 3
  • 19
  • 32
17
votes
7 answers

css background-position not working

I have 3 a tags disguised as "roll over buttons".
Each button is getting its initial…
qwerty
  • 195
  • 1
  • 1
  • 6
17
votes
5 answers

CSS background-position not working in Mobile Safari (iPhone/iPad)

I have an issue with background-position in mobile safari. It works fine on other desktop browsers, but not on iPhone or iPad. body { background-color: #000000; background-image: url('images/background_top.png'); background-repeat: no-repeat; …
Nick
  • 293
  • 2
  • 3
  • 7
17
votes
1 answer

CSS Background Gradient with offset

I applied a gradient as background image to my body. Then I added 255px offset at the top using background-position:0 255px;. It looks quite good except one little issue: of course the gradient does not end at the bottom of the page but 255px…
Julian F. Weinert
  • 7,474
  • 7
  • 59
  • 107
16
votes
3 answers

background-position percentage not working

Everywhere I read says this should be working fine, but for some reason it's not. This was to fix someone else's issue so fixing it doesn't matter to me, I just want to know why. The problem is on .br .bg-image. I know I'm trying to use calc() but…
Jamie Barker
  • 8,145
  • 3
  • 29
  • 64
16
votes
6 answers

background-size with background-position doesn't scale the position?

I've a sprite of 62 images of 91 * 91px, which makes the whole thing 91 * 5642 px. They're displayed in sort of a dynamic grid that grows and shrinks depending on user/pointer movement. Sometimes an element (std 91 * 91 px) zooms in to make it 120 *…
Rudie
  • 52,220
  • 42
  • 131
  • 173
13
votes
11 answers

Fix for background-position in IE

I get this problem in IE7 when running a piece of code that uses jquery and 2 jquery plugins. The code works in FF3 and Chrome. The full error is: Line: 33 Char: 6 Error: bg is null or not an object Code: 0 URL:…
graham.reeds
  • 16,230
  • 17
  • 74
  • 137
12
votes
5 answers

CSS background-position animate right to left

I'm trying to animate a background-image, so that the image appears from right to left. I have used an image which has a greater width than the div-container, where the background is located. On start, the backgrond is the following background:…
Maexwell
  • 161
  • 1
  • 1
  • 5
1
2 3
25 26