Is it possible using CSS background-position: to position an image to the far right of an element, but then minus a few pixels so it's not right up against the edge? Without having to add a bit of padding to the actual image itself?
Thanks
Lets say your div is 1000px wide and you want it 5px from the right the code would be
background: url('image.jpg') no-repeat 995px 50%;
Edit:
As pointed out the code above does not accommodate for the size of the image.
Lets say your div is 1000px wide and your image is 100px wide and you want it 5px from the right the code would be
background: url('image.jpg') no-repeat 895px 50%;
Your positioning is Div Size - Image Size - desired spacing from right edge.
There is some hacky way. Just use background position to the far right:
background-position: right center;
and combine it with:
box-sizing: border-box; border-right: 5px solid transparent;
for 5px indentation from the right.
Related
I'd like to know how to set different height to a div and make it responsive. I'd like to have the div with set to 100% but the left side of the div should have the height of 100px and the right side of the same div should have 120px in height. When you scale down the browser the different heights should remain even on mobile phones. Yes, there will be content in it..
#myDiv {
width: 100%;
height: 100px;
background-color: #ffffff;
border-left: 200px solid blue;
border-right: 100px solid blue;
border-bottom: 10px solid green;
}
My tries doesn't work and yes, I have googled without any luck.
The div has a shape of square or a rectangle not other so it is much better to make an image for the background and then use it like
#background
{
background-image:url('image.png');
background-repeat:no-repeat;
}
Your code just sets the left and right border's widths, which doesn't work out in your case. The best way is to use an image and put it in the background, without a repeat.
.bgDiv {background: url("bg.png") center bottom no-repeat;}
I am trying to get a background image to display in the bottom right corner of a div (or asp:panel) but I believe that the display:inline-block is causing it to not show. That is required because I have multiple boxes horizontally aligned on the screen (without it they display vertically).
css:
.showIcon{
background: url('Images/icon.png') no-repeat right bottom;
display: inline-block;
box-shadow: 2px 2px 2px #808080;
}
Is there something wrong with the css?
I do have a table displayed within each div, can that be the reason?
There is no problem with your code. And also as you asked, no table won't make any difference.
See this fiddle with your code: http://jsfiddle.net/3V8m9/2/
The only thing I added is the dimensions: height: 100px; width: 100px; to illustrate.
There can be two scenarios. One, either your image path is not correct. Two, width/height may not be adequate enough.
If you believe display:inline-block is the issue. You can always use float left to align each against each other.
CSS
.showIcon{
background: url('Images/icon.png') no-repeat right bottom;
float: left;
box-shadow: 2px 2px 2px #808080;
} code here
I'm positioning a small image in the corner of the background of a div. I want to include it in a sprite but I'm not sure how to set the size of the image from the sprite. My only solution I can think of is to place the image on the absolute bottom right corner of the sprite to force the size. A better solution. Here's the CSS so far:
background: url(images/fod-sprite.png) 99% 99% no-repeat #000;
background-position: -4px -154px;
Use the :before pseudo-class:
.test:before {
content: "";
float: left;
width: 16px; /* requires width */
height: 16px; /* require height */
margin: 0 5px 0 0; /* specify margin */
background: #000 url(images/fod-sprite.png) -4px -154px no-repeat;
}
Put the img within a span that's absolutely positioned, affix it to the lower right, then use the clip property to set the size from the sprite.
Here's the fiddle: http://jsfiddle.net/bengundersen/BSswy/
Edit: You can do this without the span as long as overflow is set on the parent div.
Another benefit of using a clipped img is that you can still print.
This question already has answers here:
Offset a background image from the right using CSS
(17 answers)
Closed 7 years ago.
In this case
li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB}
I want 20px space in right side before to background image and I can't give margin on li because border should touch the edges.
So I need to set 20px but it takes 20px from left side not right side.
li {background: url("../img/grey-arrow-next.png") no-repeat 20px center;
border-bottom: 1px solid #D4E8EB}
in your css mention position right then "spacing value(50px)" then other position(center/top)
li {background: url("../img/grey-arrow-next.png") no-repeat right 50px center;
border-bottom: 1px solid #D4E8EB}
Older Browser and IE8 and old version of IE does not support this code. Latest updated browsers has no conflicts with this method and hopefully future updates will support it too.
If you are using modern browser, try background-position: calc(100% - 50px) center; as suggested in another answer too. calc has long way to go as it is logically and mathematically capable to produce much accurate result.
You can use the CSS3 "calc" function:
example:
background-position: calc(100% - 10px) center;
Just add 20px blank space to the image right side in a graphic editor.
You can use other object inside li tag, and give it your background image with a margin-right:
li #image {
margin-right: 20px;
background: url(pp.jpg) no-repeat right center;
}
li {
border: 1px solid #D4E8EB;
}
use the following code to add 20px to the right of the background-image --
li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB; padding-right:20px}
use the following code to add 20px to the left of the background-image --
li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB; padding-left:20px}
border-right: 20px solid transparent;
unfortunately the 'easy' solution is edit your image and add 20px right and bottom of transparent space.
you could achieve it with background-clip / background-origin probably but that'd take a bit of playing with...
place a span tag within the <li> and add the margin to that, that way your <li> should still stretch to the edge along with your border.
I want to Create DIV based Flexible corners. as per shown in the Image.
This is Not regular rounded corner, but something more complicated. This is Something like challenge .
And Please Note that I want Image based rounded Corners, so please give answer as per requirments.
Thanks a Lot
Well, the easiest answer is: use CSS3:
#roundedCornerDiv {
-moz-border-radius: 1em; /* for mozilla-based browsers */
-webkit-border-radius: 1em; /* for webkit-based browsers */
border-radius: 1em; /* theoretically for *all* browsers
dependant on implementation of CSS3 */
border: 12px solid #ccc;
}
you should be able to do this with 9 explicitly sized and floated divs. the corner divs are fixed size and have background-url for the 4 corners and the side divs are repeat-y and top bottom divs have repeat-x
You should look into The Thrashbox approach for this.
You can use a series of spans and 4 images, one for each corner, to make a resizable rounded corner div. Like this:
div {
background: white url(topleft.gif) top left no-repeat;
}
div span {
display: block;
background: url(topright.gif) top right no-repeat;
}
div span span {
background: url(bottomright.gif) bottom right no-repeat;
}
div span span span {
padding: 2em;
height: 0; /* fixes a padding bug in IE */
background: url(bottomleft.gif) bottom left no-repeat;
}
div span span > span {
height: auto; /* sets the height back to auto for all other browsers */
}
And now for the HTML:
<div><span><span><span>Round corners!</span></span></span></div>
For an actual example and code please refer to this page for a working example and source code.
border-radius: 10px 10px 10px 10px;
first is the left-upper corner.
second is the right-upper corner.
third is the right-lower corner.
fourth is the lower-left corner.
you can use that basically in any tag where you want the round corners. just remember to specify the border like:
border: 2px solid black;
if you specify the border separately, eg:
border-left: 6px;
border-right: 6px;
border-top: 2px;
border-bottom: 2px;
you can get some awesome-looking stuff.