background-position

I'm programming a little WP theme and need a little help with the new CSS3 background-size property. I have a DIV which contains an image as background. The image itself is set bigger than the div to present a little cut-out of the original image: .imageContainer { background-size:154% 102%; background-position-x:-28%; background-position-y:0.28%; } So far everything is fine. But invoking the background-position property gets tricky if the size is ≥ 100%. I put together a little JS/CSS Playground for testing: If the image is ≤ 99% wide, less background-position-x means the image goes left. If

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 hover's any of them. So bt_first:hover not seems usable. Here is my usage. I wrote #should stay same# to place that I don't want to change value of xpos: $('.bt_first,.bt_sec,.bt_third').hover(function(){ $('.bt_first,.bt_sec,.bt_third').css({'background-position':'#should stay same# -150px'}) },function(){ $('.bt_first,.bt_sec,.bt_third').css({

This question already has an answer here: Using percentage values with background-position on a linear gradient 1 answer 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 using a simple background-position: 50% doesn't work either. http://jsfiddle.net/uLaa9fnu/2/ html { height: 100%; width: 100%; } body { margin: 0px; height: 100%; width: 100%; overflow: hidden; } .bg-image { height: 600px; width:

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 google. Example: Straight background-image Flipped background-image when it repeat-y And then flipped again to straight There is a method to obtain that position? I'll accept the solution in JScript (and library of it) only if there isn't a solution with pure css. Thank you all! This cannot be done using standard CSS3 since there are no CSS3 properties to

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 change the background position (won't play the animation)... there are no errors, just doesn't change the background position. Firefox doesn't support backgroundPositionX, but it does support background position So we can do something like this: psy.style.backgroundPosition = x+'px 0'; This sets the background position, X first, then Y. Working

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; background-position: center top; overflow: auto; padding: 0px; margin: 0px; font-family: "Arial"; } #header { width: 1030px; height: 215px; margin-left: auto; margin-right: auto; margin-top: 85px; background-image: url('images/header.png'); } #main-content { width: 1000px; height: auto; margin-left: auto; margin-right: auto; padding-left: 15px; padding

I'd like to change the background position of a CSS-class while hovering a li-element. HTML: <div id="carousel"> <ul id="submenu"> <li>Apple</li> <li>Orange</li> </ul> </div> CSS: #carousel { float: left; width: 960px; height: 360px; background: url(../images/carousel.png); } Any suggestions on how to do this? rebellion Here you go: $(document).ready(function(){ $('#submenu li').hover(function(){ $('#carousel').css('background-position', '10px 10px'); }, function(){ $('#carousel').css('background-position', ''); }); }); Marius Iordache You guys are complicating things. You can simple do this

This question already has an answer here: Using percentage values with background-position on a linear gradient 1 answer 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 { width: 10rem; height: 10rem; border: 0.2rem solid black; background-image: linear-gradient(to right, blue 0%, blue 100%) , linear-gradient(to right, white 0%, white 100%) , linear-gradient(to right, red 0%, red 100%) ; background-size: