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;
Related
I'm really struggling with a layout issue in (all versions of) IE. The site I'm working on works fine in Chrome and Firefox, but the layout of the banner is completely wrong in IE, where it appears a few hundred pixels lower than it should. I'm not sure if this is an issue with negative margins or what, and there's not much testing I can do since I'm using a Mac and only have static screenshots to go by.
I'd really appreciate any feedback on this. I've attached an image of what the IE screenshot looks like, and what it should look like. The link to the site is: http://www.osullivans-pubs.com/draft
EDIT: I'm unsure what code to include really since I can't identify the problem but I'm guessing it has something to do with this element:
#back {
overflow: hidden;
min-height: 700px;
margin-top: -235px;
padding-top: 80px;
background-position: center -44px;
text-align: center;
position: relative;
}
EDIT: I'm attaching an image of the site zoomed out, to give an idea of why negative margins are necessary. It's pretty hard to explain, but it's to do with the diagonal backgrounds and the fact that I need these backgrounds to reach about 1600px (for larger screens, and I can't repeat them, they're diagonal). I wish there were some way to get IE to recognise the negative margins, I've tried the zoom: 1, position: relative technique, but still nothing. Even in IE10.
Using negative margins is a bad idea for primary development and should only be used when there is no other solution.
Personally, I consider negative margins a hack.
Position relative will make an element respond relative to its parent, but if you've moved your element outside of its parent with negative margins you can only expect weird results.
In my experience, IE tries to 2nd guess what you want, whereas Mozilla is more wysisyg. so cross browser compatibility will always be a hinderance to you.
If you want your element to always appear in the same place [ relative to pixel position 0,0 (top left)] then use an absolute positionning on the element and specify top and left. this way you can ignore the parent element.
#back {
overflow: hidden;
min-height: 700px;
background-position: center -44px;
text-align: center;
position:absolute; top:30px; left:20px; margin:0px; padding:0px;
background-color:red;
}
This gets tricky when you want things to reposition themselves based on browser resizing; So be sure to test the absolute positioning in different situations, full screen, resized, min res, wide screen, screen rotation (if using handheld devices).
Turn off padding and margins completely, while positionning with margin:0px; padding:0px;
and change the background color to something to aide you in seeing edges of your element.
hence why ive added a reg BG on the example above.
Once the element is rougly in the right place (+/- 1 pixel) then you can tweak the margins and paddings.
View this jsFiddle in a WebKit-based browser like Chrome or Safari and then compare it to what you see when you view it in a non-webkit based browser like Firefox or Internet Explorer.
You will see that they're obviously not the same. Below is Chrome on the left and Firefox on the right:
The reason for this is that the fallowing small CSS markup is interpreted differently by WebKit compared to how every other browser interprets it:
span.upArrow.menu{
margin: 36.1% 0 0 12.5%;
}
More exactly: WebKit interprets 36.1% not as 36.1% of the page width but rather 36.1% of the element width or height.
The reason for using percentages in the first place is because the site scales up and down depending on the scale of the screen. This piece of code is for the menu. So the site as it is now looks fine if you use the default browser on an Android or iPhone. But there's a huge ugly triangle in the middle of the content on a Windows phone or if the user uses Opera or Firefox.
So my question then becomes. Is there any way to work around this bug in WebKit?
If it's possible one could write separate markup for webkit and non-webkit browsers. But perhaps even better would be to find a solution which works in both cases.
Take a look at this fork.
I've changed the approach slightly, setting the menu items to position: relative and positioning your arrows rather than adding a margin to achieve the layout.
Here's the updated CSS (remove the additional div and span from the selectors, they aren't necessary):
.menuButton{
display: inline-block;
width: 32%;
padding: 2% 0;
position: relative;
}
.upArrow.menu{
bottom: 0;
left: 50%;
margin-left: -15px;
}
The negative margin matches the border width of your arrow, ensuring it will always be in the exact centre whatever else happens with your layout.
That is happening because, arrow span doesn't have proper position. make that span position as absolute and the menuButton as position:relative.
div.menuButton{
display: inline-block;
width: 32%;
padding: 2% 0;
position:relative;
}
span.upArrow.menu{
position:absolute;
bottom:0; left:45%
}
DEMO
I have drafted up a brief example of what I have so far, and what I'm trying to achieve.
See my demo here
In my jsfiddle you will see a wrapping div named "content-wrap". Within this div I want an image that can stretch to window size and content.
I have done background image stretching before: See example here
But this is a bit more complicated because it is for a specific region within the site.
I have tried having a play so far with my existing code from the link above and I think I may need to take a different approach. As when you scroll down the images doesn't stay in position it moves with the scroll bar (as it should).
Any ideas?
If you don't mind using CSS3's background-size property, then the following additions to your #content-wrap { CSS statements will achieve a responsive background image that will expand to fit the size of the container.
#content-wrap {
height: 1000px;
background: #ccc;
color: #fff;
/* Added CSS */
display: block;
max-width: 100%;
clear: both;
background: transparent url("http://placekitten.com/900/900") top right no-repeat;
background-size: cover;
}
Here is an updated version of your jsfiddle with my added CSS and some lovely placekittens:
http://jsfiddle.net/kztGj/22/
The downsides to this are of course that it will not work in Internet Explorer < 9, Firefox 3.6, or any browser that doesn't support CSS3. But then your asking for a responsive image, and as such you'll be hard pushed to find an elegant solution that supports older browsers.
For more information on the background-size property and its uses, I recommend checking out this article, its quite informative.
In your image, add a css like this
.custom-image {
width:100%;
}
and your html
<div>
<img src="" class="custom-image" />
</div>
I'm having trouble figuring out why border-radius is gone from my #screen element when using chrome but not firefox or ie9?
I have all the different prefixes for each browser plus the standard border-radius:
www.cenquizqui.com
The upper content box that holds the pictures, called #screen
a copy paste of screen's css:
#screen {background: none repeat scroll 0 0 #EEEEEE;
display: block;
height: 300px;
position: relative;
width: 960px;
overflow:hidden;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;}
Is it because chrome does not handle the 'trimming' of the images properly? I thought it was only a problem when you had the actual tags inside the rounded corner container, not when the img is called as background-image through css.
Regards
G.Campos
Here's a workaround that will fix the current chrome bug:
.element-that-holds-pictures {
perspective: 1px; /* any non-zero value will work */
}
This won't affect the display at all (unlike the opacity:0.99 workaround - which is great workaround, too, by the way).
Webkit cannot handle border-radius cropping for children and grand-children+. It's just that bad. If you want border cropping, it has to be directly on the div the image is placed on without going any deeper down the hierarchy.
There is a much simpler solution.
Just add overflow:hidden to the container that has the border-radius and holds the child elements. This prevents the children 'flowing' over the container.. Thus fixing the problem and showing the border-radius
Try the following css to the child elements of the element with border-radius set:
opacity:0.99;
It solves the problem and doesn't change the opacity much.
This worked perfectly for me.
It looks like you need to apply the border radius to the li element:
#slides li {
display: block;
float: left;
height: 300px;
width: 960px;
position: relative;
border-radius: 10px;
}
It very much does have a border radius:
(I just added a border with Chrome's dev toolbar.)
The border radius doesn't restrict its contents to within the resulting area—the space outside the corners are still occupiable by the element's contents.
My recommendation would be to overlay an image that had the corners cut out like that (and then use a map or whatever you feel comfortable with to still enable the left/right arrows).
I am having a CSS class with the following code. I am trying to put a DIV at a distance of 140px from the top of webpage and to put it in the middle (equal distance from left and right). It is displaying correctly in Firefox and Google Chrome but not displaying correctly in Internet Explorer 8. Can anyone tell me what is the problem with this code? Also can anyone give me some link with browser compatibility guide?
div.main
{
padding: 0px;
width: 980px;
/*height:1350px;*/
/*border: 1px solid red;*/
margin: 0 auto; /*helps in getting the DIV to be in middle i.e. equal distance from left and right*/
overflow: hidden;
margin-top:140px;
}
I find QuirksMode most helpful for browser compatibility info, plus it has some other great info.
The problem, however, depends on more than just the CSS. In order to answer your question, we'll need to see some HTML and the rest of the CSS you've got. And a description of what's incorrect with IE's rendering. Without seeing that, my first suggestion is to make sure you're using a strict DOCTYPE.
Note that centering the DIV will only center it in the containing block (probably BODY), which, wichout an explicit width, will only be as wide as the content and not the full width of the window.
margin-top:140px; is "the problem". To reach your aim use:
padding-top instead of margin-top;
if you cann't - make a wrapper div and apply padding-top to it;
or apply position: relative/absolute; top: 140px; to the div. It is suitable
sometimes.