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

javafx background image position outside of hbox

The problem occurs when -fx_background-position:0 -40 is set either by a loaded style.css or in code via an action handler. In my example the background image is set on an hbox width one cell. When adjusting position the background image, the image…
0
votes
1 answer

Background positioning with jquery doesn't work in IE7

My script is supposed to dynamically change the background-position when clicking on a button (adding or substracting 1 percent from the current value). Works fine in Fx and Chrome, and ie8 too (i believe), though not in ie7. Here's my…
0
votes
1 answer

CSS background-position 100% (right) not working as expected

I have a simple div with width less than 100%, with a background image having background-position 100% 0. Instead of the bg image sticking to the right side of the div, it is getting cut off, and seems to think its actual right position is the edge…
Bob Meador
  • 155
  • 4
  • 8
0
votes
2 answers

CSS - how to set up background: position for 2 images beneath it for hover effect?

I have two images in one - width is 16px, height is 24px (so each images is 16x12 px). I would like to display first the upper image - I am doing it this way: background: url('image.png') left 0px top 12px no-repeat; This works well. But now when…
user984621
  • 46,344
  • 73
  • 224
  • 412
0
votes
2 answers

on mouse enter slide from left to right background position with jQuery

I have a button for which I want to slide his background from #000 to #ccc. My problem is how to do that slide transition of button background on hover or mouseenter. It is possible to do this with jQuery? Very important , I don' want to use…
BurebistaRuler
  • 6,209
  • 11
  • 48
  • 66
0
votes
1 answer

background-position not displaying correctly on mobile phones

.icon { background: #F0F0F0 url('../images/assets/user.png') no-repeat center left 10px; background-size: 24px 24px; -webkit-background-size: 24px 24px; } The above CSS works fine in all of the major browsers, but when I view it on…
Dave Cameron
  • 159
  • 1
  • 3
  • 16
0
votes
4 answers

CSS: background-position: ???;

Hopefully these diagrams explain what I'm after. The red signifying the background and the grey the webpage. Wrong Right How do I achive this? I've tried background-position: bottom right; but it's just all wrong.
Ben Shelock
  • 20,154
  • 26
  • 92
  • 125
0
votes
2 answers

IE 7 - Bug on css class inheritance

The Problem I created the keyboard with 2 kinds of keyboards (alphanumeric, numeric) but when I test my script there appears to be an inheritance bug with CSS in IE 7. I used the class .backspace to segregate the two types of keys but they still…
0
votes
1 answer

CSS Header Image "Stacked"

I been having this problem with my website for a little while, so I been working on a header using pictures and its all up and good, it changes pictures when I hover over it but then after finishing putting "Home" "News" "Login" "Register" and…
0
votes
2 answers

Centering a background image with a gradient inline

My current css is background: -moz-linear-gradient(top, rgba(47,163,216,0.85) 0%, rgba(47,163,216,0.85) 100%), url(http://i.imgur.com/HS5coix.jpg); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom,…
0
votes
1 answer

inline div background not showing up

I'm trying to use two divs, one with a non repeating background in the left corner to serve as a 'curved border' image, and the second div, within that one, with a background that is offset by the width of the first div's image so that it seems to…
Alex C
  • 177
  • 1
  • 11
0
votes
1 answer

Why CSS Background position changes on sprite height change?

Something interesting happens in my website. It is in active development and I keep adding and adding stuff to the website's sprite PNG file. Sometimes I add so many icons and blocks that I NEED to change the height of the image, but when I do this,…
Sk1ppeR
  • 387
  • 5
  • 16
0
votes
2 answers

background-image have incorrect position in firefox but in chrome is rightly

i have a problem with my background-image shadow in my content container. In Chrome is the background position rightly but in firefox wrong. Here my Testsite: http://www.behringer-mauch.de/Tischler_Hehmann/index.php I hope someone have idea.
Dave-88
  • 217
  • 2
  • 5
  • 17
0
votes
3 answers

Sprite not working (background not adjusting and link is non-existant?)

This is so frustrating because at one point it was working and now it isn't. I have social networking buttons at the bottom of a site i am using. I am using a background image so when the user hovers over a button it changes from the black and white…
0
votes
1 answer

In Rails / bootstrap, why isn't the background image stretching properly?

I am using bootstrap and rails. I am trying to have a background image take up the entire background and stretch when the browser is larger. This is working for the most part, except when the browser is smaller the bottom of the image goes up and…