Take a look at the following scenario:
Normally you would include the background image and set this to 'right center'. Is there anyway however to have this but have the speech bubbles come from a sprite (contains multiple different images) where the element has an unknown width?
I was contemplating using the :after pseudo-element however I need to provide IE7 support.
I wanted to avoid extra HTML markup, thus I'm curious if a CSS only scenario exists.
Anyone have any thoughts on this?
Thanks
You could use a css pseudo element such as :before or :after. Just size and position your pseudo element where you want it. The content property is important, else it wont show up.
#divid:after {
width: 10px;
height: 10px;
margin: -10px 0 0 -10px;
position: absolute;
background: url('sprite.png') -20px -15px no-repeat;
content: ' ';
}
I have a ul-menu that exists out of images with different widths for every li. I use a sprite for the mouseovers and bg. The sprite contains all the possible images for the menu. When I hover I want the background image to slide 160px up on every li, and somehow inherit the horizontal background position (I understand that inherit inherits from a parent, not from the element you call :hover on).
How can I slide the background position up, and keep the horizontal position the same. Sample code below. I tried a lot of things, including the inherit option in the example below and I know there is a CSS3 option called background-position-y but thats not crossbrowser...
#menubar ul li.item-101{
width:183px;
background-position: 0 0;
}
#menubar ul li.item-102{
width:163px;
background-position: -183px 0;
}
#menubar ul li.item-103{
width:204px;
background-position: -346px 0;
}
#menubar ul li.item-104{
width:117px;
background-position: -550px 0;
}
#menubar ul li.item-105{
width:173px;
background-position: -667px 0;
}
#menubar ul li:hover{
background-position: inherit -160px;
}
This is currently not possible by just using CSS (In most used browsers). You have to use background-position: YOURVALUE -160px; on every hover.
Maybe we will one day live in a world where this ís possible.
Possible solutions: jQuery can do this for you, but thats probably more work then just brainless copy pasting your individual :hovers , or you can use background-position-y but thats just for a few browsers so not really an option either
I wouldn't hold your breath for background-position-y as it isn't even a part of the CSS3 spec. (The issue is here http://www.w3.org/Style/CSS/Tracker/issues/9). Certain browsers like Chrome have gone ahead and implemented it anyways, but at least Firefox and Opera have yet to follow, if they even will.
Unless you want to resort to javascript, there isn't really any way of doing this in CSS as things currently stand.
Image Rollover, no JavaScript, no Link, pure CSS, code validate and Browser compatible.
Hello all, I have been working 24hours strait to come up with this fairly easy solution. I want to know if everything is all right and if there are ways to improve. It's quite elegant, here we go:
I have only one image "Logo" but it will show as 2 different logo each with a rollover effect.
I use a sprite (only 1 image containing my 4 logos) and I just change it's position.
Here I insert my image in a div with
<div id="logo-rollover-1" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Then I insert in another div the same image but with a different id
<div id="logo-rollover-2" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Now my CSS:
.logo-rollover {
background: #ffd42a url('path-to-your-image');
width: 230px;
float: left;
height: 130px;
overflow: hidden;
position: relative;
}
.logo-rollover img { width: 460px; height: 260px; }
.logo-rollover :hover { opacity: 0; filter:alpha(opacity=0); }
#logo-rollover-1 { background-position: 0px -130px; }
#logo-rollover-2 { background-position: -230px -130px; }
#logo-rollover-2 img { right: 230px; position: relative; display: block; }
Explanations: when someone hover an image it becomes transparent and show the background witch is the same image but with a different position. opacity: 0 for Firefox, Google and filter:alpha(opacity=0) for Explorer. position: relative on the .logo-rollover class is for compatibility of hidden overflow with IE6 & IE7. display:block; is added to the id img for the Opera browser.
No Hack: When there is no link, there is no need for href="#" or "javascript:void(0)"
Advantages: instead of requesting 4 (or more) images, there is only 1 image (the total size of 1 image sprite is smaller then the total size of 4). the rollover is instant as the image is already downloaded. No hack, no false link, code validate. Add a title to the image. The only browser not rolling over is IE6 but the site is not broken, the logo show correctly. There is a hack for activating hover for IE6 but I didn't bother as IE6 is dead.
Tip: use the same path for your image everywhere.
I mean the "path-to-your-image" needs to be the same for all call. Because of browser caching.
Is this the best elegant way? Can this code be improve? I hope it will help someone because it was a real pain to develop thank to others user here I found some tricks here and there and came up with this.
Comment appreciated.
Why not completely removing inner <img> and create logo using CSS background?
<a id="logo">Logo</a>
#logo { width:100px; height:60px; background:url(path/to/logo.png) 0 0;
overflow:hidden; text-indent:-1000px; display:block; }
#logo:hover { background-position:0 -60px; }
Explanation:
<a> is the only element that supports :hover pseudo selector on IE6. If you want native solution for hover logo you must use this tag. Some people sometimes wrap other elements ex: <a><div></div></a> to give div hover property by accessing it from CSS using a:hover div { }
overflow:hidden; and text-indent:-1000px; hide text from inside the div. It is a good practise to leave text inside for accessibility reasons.
background sets the background color of your div, initialy alligned to 0, 0
background-position does the actual trick and shifts the image - it is moving it within the 'viewport' div making different part of the image visible.
nice description! I see one small improvement: put the background und no-repeat definition in your .logo-rollover class to have less css code (you have to write it only once instead of twice)
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;
I have been struggling to find out why this rollover is not behaving as it should in IE8.
Go here: http://baked-beans.tv in IE8, you'll see that the rollover only works on the lower half of the thumbnails.
Btw, this is not activated by an <a> tag but by a :hover for the <div>.
What I can't figure out is why it works on only the lower half of the div, below the image, but not on the image (the image is not z-indexed so thats not the issue)
As soon as I change the background-color to anything else besides transparent, it works 100%. So this just blows my mind... why the bottom half, but not the top half, and only when I set bg-color to transparent?! Gotta love Internet Explorer.
This works as it should on every other browser (the entire square acts as a rollover)
Here's the CSS:
.cat_rollout {
position: absolute;
float:left;
top:0;
left:0;
min-height:274px;
min-width:274px;
font-size: 0;
background-color: transparent;
}
.cat_rollout:hover {
background-image: url(images/rollover.png);
min-width:254px;
min-height:242px;
padding-left: 20px;
color: white;
font-size: 21px;
font-weight: normal;
line-height: 24px;
padding-top: 34px;
}
Try faking a background image or setting it to a blank.gif instead of making it transparent.
background:url(blank.gif);
See http://work.arounds.org/issue/22/positioned-anchor-not-clickable-ie6/
The problem is that for some time (a week? two weeks?) IE has changed the way it interprets background-color. It seems that you cannot say, that the color is transparent, rather the whole background. So you should change background-color: transparent into background: transparent. Very nasty.
The same problem has been witnessed, where hovering on a transparent element's blank area doesn't make css rules related to hover take effects. The problem is fixed with giving the element the following style.
background-color: rgba(0, 0, 0, 0.001);
You could also try changing the hover selector to :
.thumb_container:hover .cat_rollout {...}
so that the parent containment div is the element reacting to the hover.
You can use an 1x1 transparent gif as a datauri if you'd rather.
background-image:url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
Up to you which one you'd prefer, this works and is an alternative to the selected answer.