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

Repositioning background to make it look like a hand is writing?

So I have this picture: http://www.kyea.org/imageuploads/MC900382613.JPG It's of a hand with a pencil and I'd like to position it on my web page so that it looks like it's writing the content. Is there a way to do this? I've tried messing around…
user2829990
0
votes
2 answers

CSS - multiple background image padding

I have a fiddle here... I have multiple background images set in a
. However, it seems like relative positioning is all that's allowed. Any possibility of padding these images, so they're not in the extreme corners? Simple div padding doesn't…
Millhorn
  • 2,953
  • 7
  • 39
  • 77
0
votes
1 answer

Compass/Sass background-image positioning

When using sprites in Compass/Sass, you get a background-image and a background-position generated. For example: background: url('../images/generated/bg-sa8e38178a4.png') no-repeat; background-position: 0 -120px; This background image is positioned…
Jrn
  • 1,185
  • 1
  • 13
  • 27
0
votes
1 answer

Background position offset from bottom: opposite behaviour in Chrome and Firefox

I found an opposite result in Firefox and Chrome when rendering a gradient background with offset set. Here my css code: html { background:linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(255,255,255,0) 8%); background-position: center…
Luca Detomi
  • 5,564
  • 7
  • 52
  • 77
0
votes
1 answer

Logical explanation for CSS background-position?

For an application with a good lot of icons, I want to make an image sprite. Since I started my 'adventure' in the land of webdesign/ front-end webdev, I've always wondered: what is the logic behind background-position: (left)px…
webketje
  • 10,376
  • 3
  • 25
  • 54
0
votes
2 answers

How do I make my image appear in relation to the size of a user's screen?

I have an image of that has a height of 480px. On my Macbook it looks OK but when I go to my 30 inch monitor obviously there is a huge space in the bottom. What can I do to make sure that the 480px will always be in relation so the size of the…
ariel
  • 2,962
  • 7
  • 27
  • 31
0
votes
1 answer

Issues with toggleclass in jquery

I have a condition , where i have to use toggle class plus delete the class of all other list in a drop down menu , for instance if i select any product from the list , all the other products background position should be 0,0 , also on clicking the…
Mr A
  • 6,448
  • 25
  • 83
  • 137
0
votes
4 answers

3 button state - normal, rollover (on hover), active (on click) with jquery?

I'm using the following code to get my buttons to change to their rollover state when hovered over. $('.button').hover(function(){ $(this).css('background-position', '0 -23px'); }, function(){ $(this).css('background-position', '0 0px'); }); with…
DillonB
  • 179
  • 1
  • 3
  • 12
0
votes
2 answers

jQuery .animate() a single CSS attribute that has multiple values

I'm trying to animating the background-position of an element using jQuery's .animate() method. The background-position attribute is set by defining both the x and y values, like so: background-position: 100px 100px; Webkit now supports a…
KeenanC
  • 33
  • 5
0
votes
1 answer

javascript dom concatenate background-position string / auto update background image?

I seem to have trouble with this line: back_x += 1; back_y += 10; document.getElementById('body_id').style.backgroundPosition = back_x + 'px ' + back_y + 'px'; .css file body { background: #000; …
pandoragami
  • 5,387
  • 15
  • 68
  • 116
0
votes
2 answers

Javascript DOM background position getelementbyid()?

I read here that I can position my div background image using: var yValue = 20; document.getElementById('a1').style.backgroundPosition = '0px ' + yValue + 'px'; But how would I do this for the body background-position using JavaScript, does the…
pandoragami
  • 5,387
  • 15
  • 68
  • 116
0
votes
1 answer

Trouble using background-position with hover

I'm trying to recreate the 'bounce' that tumblr adds to their new post icons on the dashboard. I've been looking around for how to use background-position to create that bounce but haven't had any luck so far. The other questions here have had a…
Don Hogan
  • 611
  • 1
  • 5
  • 7
0
votes
1 answer

jQuery backgroundPosition css sprites not working together?

I have started making a web portfolio for my photos I'm not a web designer it just interests me. Here is the page : http://jsfiddle.net/RhjJZ/1/ in jsfiddle. I made CSS sprites to make background for the links. I want them to change when the…
godzsa
  • 2,105
  • 4
  • 34
  • 56
0
votes
3 answers

Sticky footer and body background image at the bottom of the page

I have HTML5boilerplate and I want to make a template with sticky footer and image as background of body. The background should be always at the end of the page (if page is higher than clientHeight) or at the screen (if page is shorter). My problem…