Is there a way to position a background image a certain number of pixels from the right of its element?
For example, to position something a certain number of pixels (say, 10) from the left, this is how I'd do it:
#myElement {
background-position: 10px 0;
}
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.
!! Outdated answer, since CSS3 brought this feature
Is there a way to position a background image a certain number of pixels from the right of its element?
Nope.
Popular workarounds include
setting a margin-right on the element instead
adding transparent pixels to the image itself and positioning it top right
or calculating the position using jQuery after the element's width is known.
The easiest solution is to use percentages. This isn't exactly the answer you were looking for since you asked for pixel-precision, but if you just need something to have a little padding between the right edge and the image, giving something a position of 99% usually works well enough.
Code:
/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
background: url("/images/source.jpg") 99% center no-repeat;
}
Outdated answer: It is now implemented in major browsers, see the
other answers to this question.
CSS3 has modified the specification of background-position so that it will work with different origin point. Unfortunately, I can't find any evidence that it is implemented yet in any major browsers.
http://www.w3.org/TR/css3-background/#the-background-position
See example 12.
background-position: right 3em bottom 10px;
As proposed here, this is a pretty cross browser solution that works perfectly:
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
I used it since the CSS3 feature of specifying offsets proposed in the answer marked as solving the question is not supported in browsers so well yet. E.g.
The most appropriate answer is the new four-value syntax for background-position, but until all browsers support it your best approach is a combination of earlier responses in the following order:
background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */
A simple but dirty trick is to simply add the offset you want to the image you are using as background. it's not maintainable, but it gets the job done.
This will work on most modern browsers...apart from IE (browser support). Even though that page lists >= IE9 as supported, my tests didn't agree with that.
You can use the calc() css3 property like so;
.class_name {
background-position: calc(100% - 10px) 50%;
}
For me this is the cleanest and most logical way to achieve a margin to the right. I also use a fallback of using border-right: 10px solid transparent; for IE.
Ok If I understand what your asking you would do this;
You have your DIV container called #main-container and .my-element that is within it. Use this to get you started;
#main-container {
position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
position:absolute;
top:0;
right:10px;
}
/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
float:right;
margin-right:10px;
}
By the way, it better practice to use classes if you referencing a lower level element within a page (I assume you are hence my name change above.
background-position: calc(100% - 8px);
The CSS3 specification allowing different origins for background-position is now supported in Firefox 14 but still not in Chrome 21 (apparently IE9 partly supports them, but I've not tested it myself)
In addition to the Chrome issue that #MattyF referenced there's a more succinct summary here:
http://code.google.com/p/chromium/issues/detail?id=95085
If you have proportioned elements, you could use:
.valid {
background-position: 98% center;
}
.half .valid {
background-position: 96% center;
}
In this example, .valid would be the class with the picture and .half would be a row with half the size of the standard one.
Dirty, but works as a charm and it's reasonably manageable.
If you would like to use this for adding arrows/other icons to a button for example then you could use css pseudo-elements?
If it's really a background-image for the whole button, I tend to incorporate the spacing into the image, and just use
background-position: right 0;
But if I have to add for example a designed arrow to a button, I tend to have this html:
Read more
And tend to do the following with CSS:
.read-more{
position: relative;
padding: 6px 15px 6px 35px;//to create space on the right
font-size: 13px;
font-family: Arial;
}
.read-more:after{
content: '';
display: block;
width: 10px;
height: 15px;
background-image: url('../images/btn-white-arrow-right.png');
position: absolute;
right: 12px;
top: 10px;
}
By using the :after selector, I add a element using CSS just to contain this small icon. You could do the same by just adding a span or <i> element inside the a-element. But I think this is a cleaner way of adding icons to buttons and it is cross-browser supported.
you can check out the fiddle here:
http://codepen.io/anon/pen/PNzYzZ
use center right as the position then add a transparent border to offset it?
If you have a fixed width element and know the width of your background image, you can simply set the background-position to : the element's width - the image's width - the gap you want on the right.
For example : with a 100px-wide element and a 300px-wide image, to get a gap of 10px on the right, you set it to 100-300-10=-210px :
#myElement {
background:url(my_image.jpg) no-repeat -210px top;
width:100px;
}
And you get the rightmost 80 pixels of your image on the left of your element, and a gap of 20px on the right.
I know it can sound stupid but sometimes it saves the time... I use that much in a vertical manner (gap at bottom) for navigation links with text below image.
Not sure it applies to your case though.
my problem was I needed the background image to stay the same distance from the right border when the window is resized i.e. for tablet / mobile etc
My fix is to use a percenatge like so:
background-position: 98% 6px;
and it sticks in place.
yes! well to position a background image as though 0px from the right-hand side of the browser instead of the left - i use:
background-position: 100% 0px;
How do I fill a div with vertical or horizontal lines? I did this last year, can't find the code and have no idea what to search for other than "fill div with lines" which yields no related results.
Here's a pic to show what I mean:
I really would prefer to do this with pure CSS, if possible.
You should try using a CSS linear-gradient that is oriented horizontally and repeats along the same axis:
div {
background-image: linear-gradient(to left, #c8d9ff 50%, transparent 50%);
background-size: 4px 100%;
}
We only need to specify the middle colour stop (at 50%), because with the 0% and 100% stops ignored the browser's rendering engine will automatically extrapolate the colours on each end from the two middle colour stops. This is the equivalent of the longer (and unnecessary) code:
div {
background-image: linear-gradient(to left, #c8d9ff 0%, #c8d9ff 50%, transparent 50%, transparent 100%);
background-size: 4px 100%;
}
Notes:
You might want to add vendor prefixes for this, since the latest linear-gradient specification might not be supported across all browsers, depending on your user demographic.
You might want to specify a solid background-color for older browsers to fall back to.
See proof-of-concept example here: JSFiddle
Hey you need just lines?? or a small divs inside div?
For horizontal line, you can use following tag.
<hr/>
you could do it with a repeating linear gradient.
https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient
This is one possible solution (jsfiddle: http://jsfiddle.net/nmL78/):
HTML:
<div class="stripe"></div>
CSS:
.stripe{
background-color: blue;
width:100%;
height: 50px;
top:50px;
position: absolute;
}
Adjust the CSS at will...
I have a menu bar, and I am trying to attach two images to it
This is what I did-
background:url('images/bgs/bg_container_top_left.png') no-repeat top left ,url('images/bgs/bg_container_top_center.png') no-repeat top right;
How can I assign different properties to different images attached here?
Like if I want to give margin to first image
margin-left:-10px;
and to second image
margin-left:-5px;
if you want to position the images than change theses propertites
example:
background:url('images/bgs/bg_container_top_left.png') no-repeat top -10px ,url('images/bgs/bg_container_top_center.png') no-repeat top -5px;
or use background-position: 0px 0px 0px 10px;.
Try this
div{background: url('http://blog.agilebits.com/wp-content/uploads/2012/05/time-machine-icon.png') -5px top no-repeat, url('http://aux3.iconpedia.net/uploads/69290979.png') -10px top no-repeat ; }
DEMO
CSS3 allows for multiple background images to be used. The format used is what you have shown in your first part.
background: url('images/bgs/bg_container_top_left.png') left top no-repeat,
url('images/bgs/bg_container_top_center.png') right top no-repeat;
Rather than using margin, which I have a suspicion may not work (you can test it yourself if you like), I would suggest using the background-position property (https://developer.mozilla.org/en/docs/CSS/background-position) to adjust the starting position for each background. If the actual margin for each element is different, you may want to think of creating separate elements for each background. You could try using this code:
margin-left: -10px, -5px;
This follows the same format (listing background property value 1 first, and value 2 second), but I'm not sure if this is supported.
.cornerBox {
background: url(../img/main-part.png) repeat-x top left ;
width: 400px;
height:100px;
border-radius: 80px;
padding: 0 0;
behavior: url(PIE/PIE.htc);
}
In IE8 between background images parts is spacing 1px, how to remove this space, image width is 28px I want repeat-x
I had created a jsfiddle example with your code, but used some other image. Tested it in IE8 and found there is no issues.
So I believe the problem may be with your main-part.png. The image may have a white border or something. Double check your image.
EDIT:
No issues with your image also. CLICK ctrl+0 on IE to make sure you are viewing in 100%
I had similar problem with two divs with background images next to each other. I solved it by assigning:
background-size: cover
Which stretched your image to cover the entire div
I am making a web site and I have trouble with background-position property. Here is my css code:
body
{
background-color: Black;
background-image: url(images/background_ui.png);
background-repeat: no-repeat;
background-position: top,center;
background-attachment: scroll;
}
As you can see it is top, center. It's ok in chrome but in ie 8 the background doesnt go center horizontally. By the way, do you know any tags to write browser specified css code?
Thanks.
I don't think that comma is correct.., it should be: background position: top center. Generally speaking, CSS compound rules like background-position or background do not have their values separated with commas. Instead, they get separated with one or more spaces. Your CSS from above, for instance can become like this:
background: black url(images/background_ui.png) no-repeat scroll top center;
Your syntax might not be right.
The position should be either top or center. The fact it works on chrome and not in IE is because by default chromse seems to center it.
I think this might help you:
{
background-position-x: 50%;
background-position-y: 0%;
}
EDIT: Ioannis Karadimas is also right. Losing the comma is going to give you your desired effect. Though i'd still use the xy placement to avoid having cross browser surprises.