Stack Overflow
Stack Overflow

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
1 answer

change backgroundPosition based on current backgroundPosition

I had a very helpful answer last week on how to build this script, which works great except one small problem. It's easiest to explain with visual aid http://avalon.eaw.com/#finishes this uses the backgroundPosition property to animate the color…
kristina childs
  • 2,190
  • 1
  • 20
  • 19
0
votes
2 answers

Modifying CSS background-position by increment via javascript

Whereas I have plenty of experience with PHP coding, I am pretty new to using javascript so I hope this question doesn't come off as stupid. My goal here is to create a button that when pressed causes the background-position in a defined DIV object…
user1443628
  • 23
  • 3
0
votes
1 answer

-webkit-transform with two background layers?

I have an animation for a div with two semi-transparent backgrounds: /* The animated background DIV. */ @-webkit-keyframes wind /*Keyframes*/ { 0% { background-position: 0px 0px, 0px 0px; } 100% { …
noober
  • 4,819
  • 12
  • 49
  • 85
0
votes
1 answer

jquery animate background position in firefox with easing function

I have an animation problem with Firefox. Second answer to a question jquery animate background-position firefox is solving it, but only for a narrow animation. I want to apply easing on each axis like this (which is working in IE and…
zigomir
  • 985
  • 2
  • 15
  • 30
0
votes
3 answers

CSS background positioning with sprites

I'm making a sliding door button through sprites and there's one part that is giving me some trouble. Is there any way to set the anchor point AND the background-url image position: So something like this: background-position: 0 -47px top right;
user852367
  • 1,000
  • 1
  • 9
  • 15
0
votes
3 answers

toggle background-position TWICE

I would like de-select the button by clicking the same button TWICE. Once I click on Female or Male, the script changes the background-position and inserts the data into the gender input correctly, but I would like to return the same button to its…
Erik
  • 5,701
  • 27
  • 70
  • 119
-1
votes
2 answers

The location of an background image appears not centered when publishing my Website

I have indicated a background image and centered it in its container with: background-size:cover; background-position-x:50%; background-position-y:center; I use the "Responsive Design Mode" tool to check how the image looks, and it occupies the…
AveFenix
  • 1
  • 1
-1
votes
1 answer

Background-position not working on an img class

I have an img in a container that is half of the containers height. The img is too big, so I'm using the object-fit property, however it's cutting the img off at the top. I'm using the following CSS and no matter what value I enter in the…
Herro2689
  • 79
  • 10
-1
votes
2 answers

How to set margins to two div inside another div?

I want to set different margins to two divs, inside another div. The first div should appear top of the second div.
This should be appar top of the second div. …
slkhan
  • 101
  • 1
  • 9
-1
votes
1 answer

How to use background-position and background-size in CSS but also anchor an image at a certain point

I have a layout that looks like this, from using background-position: center and background-size: cover: The original image is from here: I would like for the first example to look more like this: To do this I am imagining putting an anchor point…
Lokasa Mawati
  • 441
  • 5
  • 15
-1
votes
1 answer

LESS extend & background-position property

I can't figure out, why background-position property isn't working in my LESS code sample. Trying to use this property while overwriting default buttons style class for button's hover. @green: #01eac6; @blue: #0273dc; @ocean: #01eac6; @white:…
Toms Tumshais
  • 333
  • 1
  • 5
  • 15
-1
votes
1 answer

background-position in android doesn't show

I have the following css: .flag { background-image: url('http://192.168.1.88/david/images/flag_set/flag_set/europa_flag_set.jpg'); width: calc(4 * 5.93px); height: calc(4 * 3.99px); background-size: calc(4 * 35.08px) calc(4 *…
davidmr
  • 125
  • 1
  • 11
-1
votes
2 answers

css background-position - png images not displayed as positioned in css

for some reason the background-position is not working I am trying to set up a variety of planet divs filled with pngs so I can then do some other coding but the images are all appearing stacked atop eachother and some of them are cut up across the…
Heath Ward
  • 19
  • 2
-1
votes
1 answer

my div are positioning different in different browser

Am making changes on a home page. i have background images and links to the image as buttons. However when creating divs for each image i found out that the best way was to add div for each image as that will allow me to position the images side by…
al123
  • 561
  • 9
  • 25
-1
votes
3 answers

Change div style upon click

I've got a div say
. What I want is to increase background-position 50% more each time I click on it, i.e.
, then
sdvnksv
  • 9,350
  • 18
  • 56
  • 108
1 2 3
…
25
26