I am trying to add a dropdown arrow on menu items that have submenus and would like to adjust the position of the image so that it is directly below the menu link and centered. How can I adjust the positioning of the image?
Here is my current CSS:
nav li.hasChild:after {
content: url(../images/layout/dropdownOver.png);
}
This adds the image directly to the right of the menu item but I'm not sure how to reposition it.
Thanks!
I came up with 2 different approaches.
The first is much like yours, using content: url(path_to_image) directly: JS Bin
This is done by adding display: block; in both .menu-item and it's :after, causing a "line-break". text-align: center; take cares of centring the image, since it's display property is set by default to inline.
The other is a little bit different: JS Bin
The concept is the same, but now we're using the arrow image as the background of :after instead of content.
I does generates a little bit more of code, but gives you a ton more flexibility when positioning the pseudo-element.
Use this css instead:
nav li.hasChild:after {
content: url(../images/layout/dropdownOver.png);
display: block;
margin-left: -10px;
}
Or you can use this:
nav li.hasChild {
background-image: url(../images/layout/dropdownOver.png);
background-repeat: no-repeat;
background-position: right;
}
Then in the image you need to put a transparent border around the edge
There a few questions that revolve around my problem, but none of the answers pertain to what I'm trying to do. I'm using a sprite for my site logo by using a class on an anchor tag. Problem is that I have to define the pixel height and width and this prevents the logo from being responsive.
Here's the HTML:
Here's the CSS:
a.logo-sprite {
background: url('image_here.jpg') 0 0;
display: block;
width: 450px;
height: 130px;
}
a.logo-sprite:hover {
background: url('image_here2.jpg') 0 -140px;
}
Any thoughts? Thanks.
That's right. Since sprites, by definition are meant for fixed dimensions only (They are images after all), they cannot be "smoothly" used in fluid/responsive layouts.
They can be used in responsive layouts, as long as you keep making adjustments for each "level" in your media queries.
Okay, I have an idea.
You can use the background-size property to "lock" the sprite in place and stop more/less of it being shown than you want. Here is a rudimentary example:
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 190% 140%;
The only problem here is that images resize differently to elements like Divs and anchors so the height won't scale dynamically. I believe the only way to achieve this is to use JavaScript but I may be wrong.
Here's a rough example of how you might start going about something like this:
http://jsfiddle.net/VW2dW/16/
If you resize the browser you will notice it successfully scales horizontally but not vertically which is a problem.
I want to use background image and color for the same element
but id doens't work even I use the css like this question
here's my css
http://jsfiddle.net/xdkwB/
Your CSS is working correctly, both the image and background colour sit within the one container so because they're the same colour, you can't actually see the arrow.
The best way to solve this is to use an outer div that wraps your header element, like so:
<div class="outer"><h1></h1></div>
And then style with appropriate CSS:
div {
float: right;
width: 198px;
background-image:url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png);
background-position: 0px;
background-repeat: no-repeat;
margin-top:21px;
}
h1{
color:white;
font-size: 170%;
font-weight: normal;
font-family: arial;
width:189px;
height:33px;
line-height: 33px;
background-color: #b21f23;
float:right;
}
So to clarify, the outer div is slightly larger and contains the background image aligned to the left and then the header fills all remaining space with the background colour.
I don't think you can get your desired result with just one element styling.
You would either need to have the background-image outside of the element, which is not possible.
Or you would need the background-color to not fill all of the element, which is also not possible
The best option IMO, would be to have two elements with a background-image in the first, and background-color in the second
http://jsfiddle.net/xdkwB/11/
Example with text:
http://jsfiddle.net/xdkwB/13/
Example floated right:
http://jsfiddle.net/xdkwB/14/
try this
background: url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png) no-repeat left center #b21f23;
this will add the background image and everything else will be your background color
You've set the background colour to the same colour as the image. So it's there, you just can't see it because it blends in.
You're arrow is the same color as te background. You can positioning the background with background-position and with a negative left value it become outside the box:
I am unable to understand especially in background property.
.stars div a {
background: transparent url(sprite_rate.png) 0 0 no-repeat;
display: inline-block;
height: 23px;
width: 12px;
text-indent: -999em;
overflow: hidden;
}
background:
transparent hope it's clear :)
url(sprite_rate.png) a background image
0 0 a position in the container - left top corner
no-repeat the background image shouldn't repeat
display: inline-block;
a box behaving like an inline element, see http://www.w3schools.com/css/pr_class_display.asp
height: 23px;
width: 12px;
size of an element
text-indent: -999em;
kicks the element far beyond the visible area, http://www.w3schools.com/css/pr_text_text-indent.asp
overflow: hidden;
hides the content that doesn't fit in the element, http://www.w3schools.com/css/pr_pos_overflow.asp
The CSS background property is a shorthand property of the following properties below:
The order of the property values for the CSS background property are:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing, as long as the ones that are present are in this order.
In your case you're doing the following:
background: transparent url(sprite_rate.png) 0 0 no-repeat;
transparent
That means that the background color is transparent
url(sprite_rate.png)
The url of the background image is sprite_rate.png.
0 0
The left and top position is 0px.
no-repeat
The last parameter is no-repeat which means the image will not repeat on the x- and y- axis.
Here's link to all the properties in correct order:
http://www.w3schools.com/css/pr_background-color.asp
http://www.w3schools.com/css/pr_background-image.asp
http://www.w3schools.com/css/pr_background-position.asp
http://www.w3schools.com/css/pr_background-repeat.asp
You can read more about the background shorthand property at:
http://www.w3schools.com/css/css_background.asp
The syntax for the background CSS shorthand property is:
background: { background-color background-image background-repeat background-attachment background-position | inherit } ;
It combines a large number of background properties into a single shorthand property. See:
http://reference.sitepoint.com/css/background for more information.
The technique you're looking at is known as CSS Sprites. You can find more information about it here:
http://www.alistapart.com/articles/sprites
Draws the top-left corner of sprite_rate.png over an otherwise transparent background without repeating (tiling) the image. It will be displayed inline (between text) but act as a block and will be 12 pixels wide and 23 pixels high. The first line of text will be indented so far to the left that most likely none of it will be visible, especially since overflow will be hidden (nothing outside the 12x23 rectangle will be rendered).
All of that could have been googled.
I think the answer is no, but can you position a background image with CSS, so that it is a fixed amount of pixels away from the right?
If I set background-position values of x and y, it seems those only give fixed pixel adjustments from the left and top respectively.
background-position: right 30px center;
It works in most browsers. See: http://caniuse.com/#feat=css-background-offsets for full list.
More information: http://www.w3.org/TR/css3-background/#the-background-position
It is possible to use attribute border as length from the right
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
There is one way but it's not supported on every browser (see coverage here)
element {
background-position : calc(100% - 10px) 0;
}
It works in every modern browser, but it is possible that IE9 is crashing. Also no coverage for =< IE8.
As far as I know, the CSS specification does not provide for exactly what you're asking, outside of CSS expressions, of course. Working off the assumption that you don't want to use expressions or Javascript, I see three hackish solutions:
Make sure your background image matches the size of the container (at least in width) and set background-repeat: repeat or repeat-x if only the width is equalized. Then, having something appear x pixels from the right is as simple as background-position: -5px 0px.
Using percentages for background-position exhibits special behaviour that is better seen than described here. Give it a shot. Essentially, background-position: 90% 50% will make the right edge of the background image line up 10% away from the right edge of the container.
Create a div containing the image. Explicitly set the position of the containing element position: relative if not already set. Set the image container to position: absolute; right: 10px; top: 10px;, obviously adjusting the final two as you see fit. Place the image div container into the containing element.
Try this:
#myelement {
background-position: 100% 50%;
margin-right: 5px;
}
Note though that the code above will move the whole element (not the background image only) 5px from the right. This might be ok for your case.
You can do it in CSS3:
background-position: right 20px bottom 20px;
It works in Firefox, Chrome, IE9+
Source: MDN
Image workaround with transparent pixels on the right to serve as right margin.
The image workaround for the same is to create a PNG or GIF image (image file formats that support transparency) which has a transparent portion on the right of the image exactly equal to the number of pixels that you want to give a right margin of (eg: 5px, 10px, etc.)
This works well consistently across fixed widths as well as widths in percentages.
Practically a good solution for accordion headers having a plus/minus or up/down arrow image on the header's right!
Downside: Unfortunately, you cannot use JPG unless the background portion of the container and the background color of the CSS background image are of the same flat color (with out a gradient/vignette), mostly white/black etc.
If you happen to stumble on this topic in these days of modern browsers you can use pseudo-class :after to do practicaly anything with the background.
.container:after{
content:"";
position:absolute;
right:20px;
background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}
this css will put background to bottom right corner of ".container" element with 20px space on the right side.
See this fiddle for example http://jsfiddle.net/h6K9z/226/
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+ */
If you want to specify only the x-axis, you can do the following:
background-position-x: right 100px;
Just put the pixel padding into the image - add 10px or whatever to the canvas size of the image in photohop and align it right in CSS.
I was trying to do a similar task to get a dropdown arrow always on the right side of the table header and came up with this which seemed to work in Chrome and Firefox, but safari was telling me it was an invalid property.
background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;
After doing a bit of messing around in the inspector, I came up with this cross-browser solution that works in IE8+, Chrome, Firefox, and Safari, as well as responsive designs.
background: url(http://goo.gl/P93P5Q) no-repeat 95% center;
Here is a codepen of how it looks and works. Codepen is written with SCSS - http://cdpn.io/xqGbk
You can position your background image in an editor to be x pixels from the right side.
background: url(images_url) no-repeat right top;
The background image will be positioned in top right, but will appear to be x pixels from the right.
Works for all real browsers (and for IE9+):
background-position: right 10px top 10px;
I use it to RTL WordPress themes.
See example: temporary website or the real website will be up soon.
Look at the icons at the big DIVs right corners.
Another solution I haven't seen mentioned is to use pseudo elements and I do believe this solution will work with any CSS 2.1 compliant browser (≥ IE8,≥ Safari 2, ...) and it should also be responsive :
element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}
Example: The element eg. a square sized 100px (without considering borders) has a 10px padding and a background image should be shown inside the right padding. This means the pseudo-element is a 80px sized square. We want to stick it to the right border of the element with right:-10px;. If we'd like to have the background-image 5px away from the right border we need to stick the pseudo-element 5px away from the right border of the element with right:-5px;...
Test it for your self here : http://jsfiddle.net/yHucT/
If the container has a fixed height:
Tweek the percentages (background-position) until it fits correctly.
If the container has a dynamic height:
If you want a padding between your background and your container (such as when custom styling inputs, selects), add your padding to your image and set the background position to right or bottom.
I stumbled on this question while I was trying to get the background for a select box to fit say 5 px from the right of my select. In my case, my background is an arrow down that would replace the basic drop down icon. In my case, the padding will always remain the same (5-10 pixels from the right) for the background, so it's an easy modification to bring to the actual background image (making its dimensions 5-10 pixels wider on the right side.
Hope this helps!
Tweaking percentages from the left is a little brittle for my liking. When I need something like this I tend to add my container styling to a wrapper element and then apply the background on the inner element with background-position: right bottom
<style>
.wrapper {
background-color: #333;
border: solid 3px #222;
padding: 20px;
}
.bg-img {
background-image: url(path/to/img.png);
background-position: right bottom;
background-repeat: no-repeat;
}
.content-breakout {
margin: -20px
}
</style>
<div class="wrapper">
<div class="bg-img">
<div class="content-breakout"></div>
</div>
</div>
The .content-breakout class is optional and will allow your content to eat into the padding if required (negative margin values should match the corresponding values in the wrapper padding). It's a little verbose, but works reliably without having to be concerned about the relative positioning of the image compared to its width and height.
Its been loong since this question has been asked, but I just ran into this problem and I got it by doing :
background-position:95% 50%;
Solution for negative values. Adjust the padding-right to move the image.
<div style='overflow:hidden;'>
<div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>
</div>
</div>
Better for all
background: url('../images/bg-menu-dropdown-top.png') left 20px top no-repeat !important;
This works in Chrome 27, i don't know if it's valid or not or what other browswers do with it. I was surprised about this.
background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;