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
6
votes
2 answers

Can I position my CSS background to "bottom minus x pixels"?

I need to position my background at the bottom of the screen. But on mobile device resolution I want to display it 100px lower than that, like "bottom minus 100px". Is it possible to achieve such a thing in CSS?
drake035
  • 3,955
  • 41
  • 119
  • 229
6
votes
3 answers

background gradient with solid color

I have to do the following: The top of the div is an image of a gradient, then in the bottom it continues as a solid color. Can I do this with simple CSS? I know the following is invalid. {background: url(img/right_column_bg_top.png) no-repeat…
marcias
  • 236
  • 4
  • 13
6
votes
3 answers

CSS negative right background position

I know I can set a negative left position on a background image like this: #element { background: url(image.png) -20px 0 no-repeat; } That'll position the background image 20px to the left of the left edge of #element, regardless of #element's…
daGUY
  • 27,055
  • 29
  • 75
  • 119
6
votes
2 answers

jquery background change one axis only

I think my last question overwhelmed everybody so I will simplify I am attempting to change the background-position of the x-axis only. By default if only one value is defined, the other defaults to 50%, so this function: function colorChangePiano()…
kristina childs
  • 2,190
  • 1
  • 20
  • 19
5
votes
6 answers

IE6 background-position(?) issue

I apply to stackoverflow as my last resort. I got this ie6 bug while using the image at the background of the link. It seems that ie6 scrolls the background. How can I avoid it? At some width it shows like this:alt text…
5
votes
1 answer

jQuery calculate image background-position top position?

I set my images centred in CSS: background-position: center center; But I want to know its top-position now after it is set to centre, how can I calculate that with jQuery or just plain javaScript? .parallax3 { position: relative; …
Run
  • 54,938
  • 169
  • 450
  • 748
5
votes
2 answers

Why does CSS3 right aligned background image appear in the wrong place?

I am using CSS3 background-position to position a background image 3% from the right edge of the container. However it appears in a different position compared to if i have an equivalent container that is 97% wide with the background image right…
deshg
  • 1,233
  • 4
  • 27
  • 45
5
votes
4 answers

CSS3 - Fade between 'background-position' of a sprite image

I want to fade between 'background-position' of a sprite image only with CSS. I found a lot o tutorials but I didn't found something simple like this: CSS3 - Fade between…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/image" class="post-tag grid--cell" title="show questions tagged 'image'" rel="tag">image</a> <a href="../../questions/tagged/sprite" class="post-tag grid--cell" title="show questions tagged 'sprite'" rel="tag">sprite</a> <a href="../../questions/tagged/fade" class="post-tag grid--cell" title="show questions tagged 'fade'" rel="tag">fade</a> <a href="../../questions/tagged/background-position" class="post-tag grid--cell" title="show questions tagged 'background-position'" rel="tag">background-position</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 09 '13 at 10:47">asked Apr 09 '13 at 10:47</time> <a href="../../users/1274699/cbuzatu" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1274699.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="CBuzatu" /> </a> <div class="s-user-card--info"> <a href="../../users/1274699/cbuzatu" class="s-user-card--link">CBuzatu</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">745</li> <li class="s-award-bling s-award-bling__gold" title="5 gold badges">5</li> <li class="s-award-bling s-award-bling__silver" title="16 silver badges">16</li> <li class="s-award-bling s-award-bling__bronze" title="29 bronze badges">29</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-9657480"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>4</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>3</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/9657480/css-background-position-repeat-not-working" class="question-hyperlink">CSS: Background-position + repeat = not working</a></h3> <div class="excerpt">Anybody encounter this kind of problem with CSS before? I have a header that's set to 100% width, with an image on the left side (500px wide). I have a background-image which I'd like to fill in for the remaining space horizontally, but not where…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/background-position" class="post-tag grid--cell" title="show questions tagged 'background-position'" rel="tag">background-position</a> <a href="../../questions/tagged/background-repeat" class="post-tag grid--cell" title="show questions tagged 'background-repeat'" rel="tag">background-repeat</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Mar 11 '12 at 18:07">asked Mar 11 '12 at 18:07</time> <a href="../../users/1262658/rabu" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1262658.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Rabu" /> </a> <div class="s-user-card--info"> <a href="../../users/1262658/rabu" class="s-user-card--link">Rabu</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">43</li> <li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li> <li class="s-award-bling s-award-bling__bronze" title="4 bronze badges">4</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-57908851"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>4</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/57908851/javascript-get-background-position-in-pixels" class="question-hyperlink">JavaScript: Get background-position in pixels</a></h3> <div class="excerpt">I am working on a JavaScript animation library and ran into a problem: All values are usually returned in pixels using this default function: window.getComputedStyle(element).getPropertyValue(property); However, when getting the value for…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/animation" class="post-tag grid--cell" title="show questions tagged 'animation'" rel="tag">animation</a> <a href="../../questions/tagged/background-position" class="post-tag grid--cell" title="show questions tagged 'background-position'" rel="tag">background-position</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Sep 12 '19 at 14:23">asked Sep 12 '19 at 14:23</time> <a href="../../users/3289949/ood" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3289949.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Ood" /> </a> <div class="s-user-card--info"> <a href="../../users/3289949/ood" class="s-user-card--link">Ood</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,445</li> <li class="s-award-bling s-award-bling__gold" title="4 gold badges">4</li> <li class="s-award-bling s-award-bling__silver" title="23 silver badges">23</li> <li class="s-award-bling s-award-bling__bronze" title="43 bronze badges">43</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-4244492"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>4</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>3</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/4244492/dynamically-change-css-backgroundposition-left-and-top-via-jquery" class="question-hyperlink">Dynamically change css backgroundPosition left AND top via Jquery</a></h3> <div class="excerpt">I'm a new programmer and English is not my mother language, so please forgive me in advance for both programming and English mistakes. Here is what I want to do: I have a div tag that contains an image and a table (outside this div tag). Via jquery…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/background-position" class="post-tag grid--cell" title="show questions tagged 'background-position'" rel="tag">background-position</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Nov 22 '10 at 10:34">asked Nov 22 '10 at 10:34</time> <a href="../../users/508410/arha" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/508410.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Arha" /> </a> <div class="s-user-card--info"> <a href="../../users/508410/arha" class="s-user-card--link">Arha</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">65</li> <li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li> <li class="s-award-bling s-award-bling__bronze" title="5 bronze badges">5</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-40505376"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>4</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/40505376/facebook-api-cover-images-offsets-in-background-position-attributes" class="question-hyperlink">Facebook API cover images offsets in background-position attributes</a></h3> <div class="excerpt">!!! If anyone can answer this now, I will wait for the bounty period to end, and up it to 150 before awarding it. (Scouts honour!) !!! I have looked around but can't find an answer to this question: I am getting event cover images from fb api, and…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/facebook" class="post-tag grid--cell" title="show questions tagged 'facebook'" rel="tag">facebook</a> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/facebook-graph-api" class="post-tag grid--cell" title="show questions tagged 'facebook-graph-api'" rel="tag">facebook-graph-api</a> <a href="../../questions/tagged/background-image" class="post-tag grid--cell" title="show questions tagged 'background-image'" rel="tag">background-image</a> <a href="../../questions/tagged/background-position" class="post-tag grid--cell" title="show questions tagged 'background-position'" rel="tag">background-position</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Nov 09 '16 at 11:01">asked Nov 09 '16 at 11:01</time> <a href="../../users/3749769/asimovwasright" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3749769.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="asimovwasright" /> </a> <div class="s-user-card--info"> <a href="../../users/3749769/asimovwasright" class="s-user-card--link">asimovwasright</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">838</li> <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li> <li class="s-award-bling s-award-bling__silver" title="11 silver badge">11</li> <li class="s-award-bling s-award-bling__bronze" title="28 bronze badge">28</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-35888871"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>4</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/35888871/pre-define-css-background-image-center-center-position-and-cover-background-si" class="question-hyperlink">Pre-define CSS background image center center position and cover background size</a></h3> <div class="excerpt">I am struggling to shorten down my CSS code for background image position (center center) and background size (cover). Whenever I use the following code, it works fine, obviously: HTML: <div class="banner-divider"…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/background-image" class="post-tag grid--cell" title="show questions tagged 'background-image'" rel="tag">background-image</a> <a href="../../questions/tagged/background-position" class="post-tag grid--cell" title="show questions tagged 'background-position'" rel="tag">background-position</a> <a href="../../questions/tagged/background-size" class="post-tag grid--cell" title="show questions tagged 'background-size'" rel="tag">background-size</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Mar 09 '16 at 10:24">asked Mar 09 '16 at 10:24</time> <a href="../../users/2941374/rainerbrunotte" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2941374.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="rainerbrunotte" /> </a> <div class="s-user-card--info"> <a href="../../users/2941374/rainerbrunotte" class="s-user-card--link">rainerbrunotte</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">907</li> <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li> <li class="s-award-bling s-award-bling__silver" title="17 silver badge">17</li> <li class="s-award-bling s-award-bling__bronze" title="37 bronze badge">37</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-22875647"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>4</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/22875647/using-css3-animations-breaks-fixed-background-positioning-of-all-elements-in-p" class="question-hyperlink">Using CSS3 animations breaks fixed background positioning of all elements in page</a></h3> <div class="excerpt">I was just working on a web page featuring elements with fixed background positioning, and it worked great until I applied css animations to a (completely different & irrelevant) element. I tried removing / re-applying the animations to make sure it…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/google-chrome" class="post-tag grid--cell" title="show questions tagged 'google-chrome'" rel="tag">google-chrome</a> <a href="../../questions/tagged/css-position" class="post-tag grid--cell" title="show questions tagged 'css-position'" rel="tag">css-position</a> <a href="../../questions/tagged/css-animations" class="post-tag grid--cell" title="show questions tagged 'css-animations'" rel="tag">css-animations</a> <a href="../../questions/tagged/background-position" class="post-tag grid--cell" title="show questions tagged 'background-position'" rel="tag">background-position</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card__deleted"> <time class="s-user-card--time" datetime="asked Apr 05 '14 at 01:47">asked Apr 05 '14 at 01:47</time> <div class="s-avatar s-avatar__32 s-user-card--avatar"> </div> <div class="s-user-card--info">user2700923</div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-2262267"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>4</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/2262267/jquery-div-hover-function-not-working-in-firefox" class="question-hyperlink">jQuery div hover function not working in Firefox</a></h3> <div class="excerpt">http://cambridgeuplighting.com/testimonials This code works in Safari, IE7, and IE8, but not in FF 3.5.7. The code changes the background of the little background icon when you hover over a div. jQuery(function( $ ){ …</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/hover" class="post-tag grid--cell" title="show questions tagged 'hover'" rel="tag">hover</a> <a href="../../questions/tagged/firefox3.5" class="post-tag grid--cell" title="show questions tagged 'firefox3.5'" rel="tag">firefox3.5</a> <a href="../../questions/tagged/background-position" class="post-tag grid--cell" title="show questions tagged 'background-position'" rel="tag">background-position</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Feb 14 '10 at 18:42">asked Feb 14 '10 at 18:42</time> <a href="../../users/220761/handiworknyc-com" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/220761.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="HandiworkNYC.com" /> </a> <div class="s-user-card--info"> <a href="../../users/220761/handiworknyc-com" class="s-user-card--link">HandiworkNYC.com</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">10,914</li> <li class="s-award-bling s-award-bling__gold" title="25 gold badges">25</li> <li class="s-award-bling s-award-bling__silver" title="92 silver badges">92</li> <li class="s-award-bling s-award-bling__bronze" title="154 bronze badges">154</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="s-pagination pager fr"> <a class="s-pagination--item" href="../../questions/tagged/background-position_page=2" rel="prev" title="Go to page 2">Prev </a> <a class="s-pagination--item" href="../../questions/tagged/background-position_page=1" rel="" title="Go to page 1">1</a> <a class="s-pagination--item" href="../../questions/tagged/background-position_page=2" rel="" title="Go to page 2">2</a> <div class="s-pagination--item is-selected">3</div> <div class="s-pagination--item s-pagination--item__clear">…</div> <a class="s-pagination--item" href="../../questions/tagged/background-position_page=25" rel="" title="Go to page 25">25</a> <a class="s-pagination--item" href="../../questions/tagged/background-position_page=26" rel="" title="Go to page 26">26</a> <a class="s-pagination--item" href="../../questions/tagged/background-position_page=4" rel="next" title="Go to page 4"> Next</a> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>