How to Set The Background-Position to an Absolute Distance, Starting from Right

How to set the background-position to an absolute distance, starting from right?

Use the previously mentioned rule along with a top and right margin:

background: url(images/img06.gif) no-repeat top right;
margin-top: 10px;
margin-right: 10px;

Background images only appear within padding, not margins. If adding the margin isn't an option you may have to resort to another div, although I'd recommend you only use that as a last resort to try and keep your markup as lean and sementic as possible.

How can I position a background-image an absolute distance from the right of its container?

Depending on your situation and what browsers you want to support, this works (tested on IE7-8, Firefox):

background: url(...) no-repeat right 50%; border-right: 4px solid transparent;

Of course, if you are already putting a border on the right, this will not help you at all.

Added on edit: If the above doesn't work because your are using the border, and you don't care about IE7 (not sure we are quite at that point yet), and your "icon" width is known, then you could do:

.yourContainer {
  position: relative;
}

.yourContainer:after {
  content: ' '; 
  display: block; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  right: 4px; 
  width: 10px; //icon width
  z-index: -1; //makes it act sort of like a background
  background: url(...) no-repeat right 50%;
}

Offset a background image from the right using CSS

I found this CSS3 feature helpful:

/* to position the element 10px from the right */
background-position: right 10px top;

As far as I know this is not supported in IE8. In latest Chrome/Firefox it works fine.

See Can I use for details on the supported browsers.

Used source: http://tanalin.com/en/blog/2011/09/css3-background-position/

Update:

This feature is now supported in all major browsers, including mobile browsers.

How to move a background image to the right side (when there is already another background image)?

Add position:relative to the heading and right:0 to the :after psuedo-element. Since the :after is position:absolute it will dock to the position relative parent.

There's other ways you could do this with one element, by using multiple background images for example. But this should do the trick.

/* Using example images, since I don't know how to add patterns into jsfiddle without having to download them */

.h1_content {
  background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg) no-repeat;  /* pattern for the header, left magnifying glass */ 
  background-size: 4%;
  background-color: #00a8f3;
  color: white;
  position: relative;
}

.h1_content::after {
  content: "";
  background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
  background-position: right;  /* Doesn't go right? */
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  background-size: cover;
  width: 50px;
  height: 50px;
}

<article class="text_bottom">
        <section class="section_test">
          <h1 class="h1_content">Topic here</h1>
          <p>Random text here</p>
        </section>
        </article>

How to set an exact background position based on element's position?

Here is the solution base on offset instead of position (and I simplified the code):

$.fn.filteredImg= function() {        var $this = $(this);
    $this.each(function(index, card) {        var $card   = $(card);        var $effect = $card.children(".filtered-effect");        var $parent = $(card).parents(".parent").first();        var img     = $parent.data("img");        var cardPos = $card.offset();        $parent.css({             backgroundImage: "url(" + img + ")",            backgroundRepeat: "no-repeat"        });        $effect.css({            backgroundImage: "url(" + img + ")",            backgroundPosition: -cardPos.left + "px " + -cardPos.top + "px"        });    })    
}   
$(".card-filtered-img").filteredImg();

.card-filtered-img {  width: 80%;  min-height: 500px;  margin-left: 77px;  margin-top: 17px;  position: relative; }  .card-filtered-img > * {    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;   }  .card-filtered-img .filtered-effect {    z-index: 99;   }  .card-filtered-img .card-content {    background: rgba(34, 34, 34, 0.35);    z-index: 100;   }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="parent" data-img="http://www.planwallpaper.com/static/images/colorful-wallpaper2.jpg">  <div class="container">    <div class="row">        <div class="col-md-12">            <div class="card-filtered-img">              <div class="filtered-effect"></div>              <div class="card-content"></div>            </div>        </div>    </div>    <div class="row">        <div class="col-md-12">            <div class="card-filtered-img">              <div class="filtered-effect"></div>              <div class="card-content"></div>            </div>        </div>    </div></div>

CSS background-position top right corner

Something like this

background-image: url(http://i.stack.imgur.com/cW9aK.png);
background-repeat: no-repeat;
background-size: 48px 48px;
background-position: right 10px top 10px;

JSfiddle Demo

MDN Reference

background-position:<position> where:

<position> is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.

So:

background-position: right 10px top 10px;

puts the image at the top / right but 10px away from the right edge and 10px from the top edge

background position for background color

You can not offset a background color. Only background images have a position.

---

Related Topics