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
11
votes
5 answers

Gmail HTML email background

I'm working on an HTML email. The problem I get is that GMAIL doesn't use the "background-position" i give it. I have a table with 100% width that has a background that has to be centered. Most clients do this perfectly but Gmail doesn't. Is there a…
jwktje
  • 175
  • 1
  • 2
  • 6
11
votes
1 answer

CSS sprite image + background-repeat a part of it

Can I repeat a part of an image [which it's in a CSS sprite image] in the background ?! like for example : background-position : -13px top ; background-repeat : repeat-y ; because I got the whole sprite image repeated ...
Waseem
  • 111
  • 1
  • 4
11
votes
5 answers

CSS3 background-position issue with Safari only

The following code renders well in IE9, FireFox, Chrome, but not in Safari: .search-choice { position: relative; background-clip : padding-box; background-image: url('../Design/icon_chosen_close.gif'); background-repeat: no-repeat; …
Vlad
  • 217
  • 1
  • 4
  • 14
10
votes
2 answers

SVG sprite icon background position appears off in newer version of Chrome

I am using a background-image SVG sprite, and everything looks great on my versions of Safari, mobile Safari, Chrome, Firefox, Opera, IE, etc. However, the background positions aren't displaying correctly for a few of my co-workers who have a newer…
mistykristie
  • 567
  • 3
  • 13
9
votes
5 answers

jquery animate background-position firefox

I got this background image slider thing working in chrome and safari, but it doesnt do anything in firefox. any help? $(function(){ var image= ".main-content"; var button_left= "#button_left"; var button_right= "#button_right"; var…
Ohnegott
  • 313
  • 2
  • 4
  • 10
9
votes
3 answers

How does CSS computation for background percentages work?

I'm currently playing around with CSS gradients and position, I kind of manage to do what I want but with lucky guesses but I'd like to understand how this actually all works. For instance, here's the French flag (merci): .serge_testDraw { …
Serge Profafilecebook
  • 1,165
  • 1
  • 14
  • 32
9
votes
1 answer

How to make background position fixed and centered?

I have my site set up in 'page-sections' for a vertical scroll. the first page-section is 100% width and height, as are the other sections, but has a background image that scrolls and stretches to the width of the browser. I am trying to maintain…
user2684452
  • 701
  • 2
  • 14
  • 31
7
votes
1 answer

Background center with transform 3D and filter blur on Firefox

inb4: Sorry for the horribly oversized images that takes super long to load, click on the links and read the question after if you dont like to wait! So I'm making this prototype of a site where I make a fake 3D effect with 2d images moving with the…
7
votes
3 answers

CSS Put image at top of page

I need to have an image at the top-center of a web page in css. Now, Im just using the background-image: in css but this puts it at the middle of the page. Here's my code: body { background-image: url("theimageurlgoeshere"); //The image is 842 x…
nosedive25
  • 2,477
  • 5
  • 30
  • 45
7
votes
1 answer

CSS background-position

Little question here, i have a sprite image that contain icons with normal and hover effects.. And this is the css i have for now.. .wi{ background-image:url(images/icons/small/wi.png); background-repeat:no-repeat; display:block; …
Fr0z3n
  • 1,569
  • 1
  • 18
  • 39
6
votes
1 answer

CSS: Difficulty with background-position different corner offsets

I'm having some troubles making buttons using multiple backgrounds. I know I can use :before and :after but I'd like to figure this out if possible. Here is the Jsfiddle http://jsfiddle.net/syren/qerUT/1/ In that, I've shown what I ultimately want…
Syren
  • 1,961
  • 2
  • 15
  • 19
6
votes
2 answers

How do I change a background position with css3 animation?

Lets say I have a div element, with a background in position: 0%; how would I change the position to e.g position: 100%; but with keyframes on hover I can't seem to use keyframes properly, it never works and I have all the latest browsers. Thanks.
fenerlitk
  • 5,414
  • 9
  • 29
  • 39
6
votes
1 answer

Make CSS Shimmer Effect Work an already loaded Image

I have the following shimmer effect working very well when used on a p element but it doesn't work on any div nor an img. So, what modifications should I make to make sure the shimmer effect plays on any element. The snippet is below .shimmer { …
ololo
  • 1,326
  • 2
  • 14
  • 47
6
votes
3 answers

Changing only y pos of background image via Jquery

I want to change button's background image y position with hover function. Is there a simple way of keeping xpos or should I get position first, split it and use again with $.css() again. I should change all 3 span's background position if somebody…
aiternal
  • 1,080
  • 3
  • 16
  • 33
6
votes
1 answer

CSS make background-image use font character

I'd like to use a font character (e.g. from font-awesome) as a background-image of an input element.
1
2
3
25 26