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
0
votes
2 answers

Background-position not working

I have a weird issue using background-position.. Simply it's not working ! Here's my code :

Follow Us

0
votes
3 answers

jQuery Background image position

I'm stuck as to how I can move a background image out of it's container. I have a container with a 960 width, centered. I then have a banner within the container and I need an image on another layer behind the banner, but with a margin-left: -100px,…
Karl
  • 5,435
  • 11
  • 44
  • 70
0
votes
1 answer

background-position change in increments with jQuery

I'm trying to workout an efficient way to cycle though in 25% increments the background image of an element, but when it gets to 100% it would go back to 0% on the next increment. I can do something like this: var currentPos =…
james
  • 1,031
  • 1
  • 15
  • 31
0
votes
1 answer

Background-position ignored by Chrome

I'm having a problem with positioning two background images in Chrome. In FF and IE the images are right where I want them to be, but in Chrome they both just sit in the top left corner. So Chrome ignores the background-position property. When I…
0
votes
0 answers

Change background position with jquery on scroll

Trying to change body background position with scroll position. the background image have these settings: background: #fff url(images/bg.png) center 100% no-repeat; background-attachment:fixed; I have footer at that page with the height of…
Y K
  • 81
  • 1
  • 7
0
votes
1 answer

JQuery background-position animation infinitely

So what I have is a big image that I'm trying to animate continuously while someone is on the page What I do now is: $('.photobanner').animate({ backgroundPosition:"(-10000px 0px)" }, 80000, 'linear'); and this works .. but it seems it…
mhyassin
  • 134
  • 1
  • 1
  • 16
0
votes
2 answers

Background Image in Div on Right Border in IE6

Help I try desperately to place a background image on the right border in a DIV in Internet Explorer 6. No success so far. This is my CSS: .test { width: 100px; border-right: red thin solid; border-top: red thin solid; border-left:…
0
votes
2 answers

Animating "background-position" in an Interval using random values of a predefined array

I want to randomly animate the body's background-position in an interval. There are a few predefined background-position values (x, y) stored in an array. Here's the script so far: $(document).ready(function() { var xyz = new Array(); xyz[1]…
James Cazzetta
  • 3,122
  • 6
  • 32
  • 54
0
votes
4 answers

Positioning a background image from the right rather than left

Is it possible to specify that you want a background image (non-repeating) to sit, say, 5px away from the RIGHT edge? I know it's possible to do this with CSS, but it defaults to the LEFT edge. I'd like the background image to always sit 5px away…
Francesca
  • 26,842
  • 28
  • 90
  • 153
0
votes
1 answer

How to apply the same Background-image in different desktop devices

how can i apply the same Backgrond image position for my image in different desktop devices? This is the page where there is the background image : http://tommywebdesigner.com/Vision%20General.html Here my code: #vision { background-attachment:…
Koala7
  • 1,340
  • 7
  • 41
  • 83
0
votes
1 answer

Background image/position rendering differently on iPad

I have a div which has one of two background positions for a sprite background image depending on the class set for the div in a php script. The CSS, which is below, works fine on standard browsers, but on the iPad I am not seeing the same. …
Nick
  • 4,304
  • 15
  • 69
  • 108
0
votes
1 answer

extension of the backgroundposition in the function animate() dosen't work in IE7 or IE8

This code is extension created by Alexander Farkas http://bit.ly/bZzOC8 It is usefull for could used two values on the function animate() as in this example: $('div').animate({ backgroundPosition:'(0 -5500)' },330); Unfortunately this extension…
0
votes
2 answers

Positioning a background image in a div to start at a certain point

I am trying to add a background image to a div that will extend the height of a page. My issue is that at the top of this div is a logo with a transparent background. I dont want the background image of the div to appear below the logo image. Is…
Deep Rooted
  • 245
  • 3
  • 4
  • 19
0
votes
0 answers

jquery background-position-y to be triggered when has a relative class

Considering that in firefox the position-y doesn't work I need to write a bit of code in jquery to be able to set the background-position-y when hasClass 'no-event'. what I am doing wrong? CSS #products-events .nav li.no-event…
DD77
  • 1,367
  • 2
  • 13
  • 25
0
votes
2 answers

Using :hover on one div to affect the background-position of another div

I have a stack of divs all on top of one another which are set to position:absolute, all contained in a container div. What I would like to do is change the background-position of #feature_1_shade when the user hovers over #feature_1_hitbox. I have…
jaspn
  • 393
  • 1
  • 3
  • 4