I've used border, border-top-image, border-image and none seem to do what I am after.
I have the following CSS:
#footer {
overflow: hidden;
clear: both;
width: 100%;
margin: 0 auto;
padding: 26px 0 30px 0;
border-top-image: url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg');
font-size: 0.8461538461538462em;
color: #aaa;
}
This does not seem to apply to the website I am trying to work on, I've tried it in Firefox and Chrome.
I only want the image to appear on the top border and wish to have no other borders (so it's sort of like a <hr />)
I don't think that there is any such property like border-top-image to give image border to any side of an element -
Use
border-image:url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg') 30 30 round;
but it give border around all sides. To remove border around rest of the sides I gave -
border-bottom:0;
border-left:0;
border-right:0;
It worked and here is my fiddle - http://jsfiddle.net/ashwyn/c7WxG/1/
There is the border-image-width: a b c d; property. The details:
a-d are the widths of the top, right, bottom and left borders, respectively
values of a-d may be in the form:
[x]px
[x] - multiples of border-width value
[x]% - percent of the image slice (appears non-working in Safari 7)
auto - derive from the width of the corresponding image slice
the default value is 1.
if you omit d, the value of b is used for the left border width
if you also omit c, the value of a is also used for the bottom border width
if you also omit b, the value of a is used for all borders :)
So for your example you could use:
border-image-width: 100% 0 0 0;
Alternatively the border-image shorthand property includes border-image-width as a parameter, so in one line of CSS:
border-image: url(image.png) 100% 0 0 0 / [desired_border_width]px 0 0 0 repeat;
This uses the entire image for the top slice ("100% 0 0 0") and applies it as the top border at the desired width.
Another SOLUTION - create visual "BEFORE" phseudo-element :
.yourDiv::before{
background:url("http://lorempixel.com/200/100/");
width:100%;
height:20px;
}
You said you wish to have no other borders, so instead of border-image-width you can also simply use the border-width shorthand :
see https://jsfiddle.net/j2x6n3q9/
The border image is specified as a URI, for two different groups:
The URI of upto three images may be specified for each of the four border edges. If one image URI is given, the first tile is centered on the border line. If two image URIs are given, they meet at the center of the border line with the first image placed on the top or left side of the center. If three image URIs are given, the second becomes the center and does not tile. The other two are placed on either side of the center image, with the first going on the top or left side of the center and the third going on the bottom or right.
For more refer w3.org
Related
I've met a small problem that I cannot seem to solve.
This is my CSS code that should work:
div.menu-menu_hun-container li {
padding: 5px;
font-size: 18px;
-moz-border-image:url("images/menu-border.png") 0 0 1 0;
-webkit-border-image:url("images/menu-border.png") 0 0 1 0;
border-image:url("images/menu-border.png") 0 0 1 0;
border-width: 1px;
border-image-repeat: space;
}
As you can see, I'm trying to add a border image only to the bottom of each menu element (except the last one as it's already solved). The problem is that the space property doesn't work at all. Menu elements are 187px width and the image is 125px. I want to position the border element to the left to cover 2/3 of the bottom line. Perhaps, I do not understand how this property works, but I think it should position a single image element to the center of the bottom border because there's no more space left for another image element to make the border complete. I hope you guys could clear the mess in my head.
If you can provide fiddle or image, it will be nice, anyway, Try to re-size the image and use border-image-repeat: space; or you can use round property.
I've used border, border-top-image, border-image and none seem to do what I am after.
I have the following CSS:
#footer {
overflow: hidden;
clear: both;
width: 100%;
margin: 0 auto;
padding: 26px 0 30px 0;
border-top-image: url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg');
font-size: 0.8461538461538462em;
color: #aaa;
}
This does not seem to apply to the website I am trying to work on, I've tried it in Firefox and Chrome.
I only want the image to appear on the top border and wish to have no other borders (so it's sort of like a <hr />)
I don't think that there is any such property like border-top-image to give image border to any side of an element -
Use
border-image:url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg') 30 30 round;
but it give border around all sides. To remove border around rest of the sides I gave -
border-bottom:0;
border-left:0;
border-right:0;
It worked and here is my fiddle - http://jsfiddle.net/ashwyn/c7WxG/1/
There is the border-image-width: a b c d; property. The details:
a-d are the widths of the top, right, bottom and left borders, respectively
values of a-d may be in the form:
[x]px
[x] - multiples of border-width value
[x]% - percent of the image slice (appears non-working in Safari 7)
auto - derive from the width of the corresponding image slice
the default value is 1.
if you omit d, the value of b is used for the left border width
if you also omit c, the value of a is also used for the bottom border width
if you also omit b, the value of a is used for all borders :)
So for your example you could use:
border-image-width: 100% 0 0 0;
Alternatively the border-image shorthand property includes border-image-width as a parameter, so in one line of CSS:
border-image: url(image.png) 100% 0 0 0 / [desired_border_width]px 0 0 0 repeat;
This uses the entire image for the top slice ("100% 0 0 0") and applies it as the top border at the desired width.
Another SOLUTION - create visual "BEFORE" phseudo-element :
.yourDiv::before{
background:url("http://lorempixel.com/200/100/");
width:100%;
height:20px;
}
You said you wish to have no other borders, so instead of border-image-width you can also simply use the border-width shorthand :
see https://jsfiddle.net/j2x6n3q9/
The border image is specified as a URI, for two different groups:
The URI of upto three images may be specified for each of the four border edges. If one image URI is given, the first tile is centered on the border line. If two image URIs are given, they meet at the center of the border line with the first image placed on the top or left side of the center. If three image URIs are given, the second becomes the center and does not tile. The other two are placed on either side of the center image, with the first going on the top or left side of the center and the third going on the bottom or right.
For more refer w3.org
I am trying to create a div element with a rounded border. I am aware of the use of the border-radius, but I noticed that using this property will curve the corners only, like the top-right, top-left etc. so i was wondering if there is some property to curve the side of a div element, something like border-radius for top, down, left and right.
For example, a div with a straight top, bottom and left but a rounded right side. i would like to create the right side so that it is more rounded at the top than the bottom.
My aim is to create a div element with rounded right side which will not affect the top and bottom sides. i mean the curve in the right side should stop as soon as it reached the top or bottom side. (so that the top and bottom remains straight rather than slightly curved).
Is there a way to get this effect using css?
You can specify horizontal and vertical border-radii via the slash notation to achieve such an effect...
div{
width:100px;height:100px;
border:3px solid #bada55;
border-radius:10px/50%;
}
<div></div>
This would set a vertical border-radius of 50% and a horizontal border-radius of 10px for all sides. You can define this for each corner individually (So you have up to eight values).
You can use the / effect which defines the horizontal and vertical radii. 10px is horizontal, 100px is vertical
div
{
height: 200px;
width: 200px;
border: 2px solid #000;
border-radius: 10px/100px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
With the border radius set to 10px/100px this makes the sides slightly curved. Set the left corners to 0 and you have only one side that is curved :)
http://jsfiddle.net/UWbKf/
You can still use border-radius for this. You just have to be a bit more creative with the parameters you give it.
border-radius allows you to specify both a horizontal radius and a vertical radius for each corner. Using these gives you the flexibility to stretch a curve effect across the whole of one side your element if you wish.
An random example that makes an odd shaped box:
.myElement { border-radius: 24% 41% 31% 9%/44% 6% 32% 40%; }
And here it is on jsFiddle.
Rather than give you loads of detailed examples, I'll link you to this site, which demonstrates the flexibility of border-radius, and allows you to design the shape you want: http://www.webtutorialplus.com/border-radius.aspx
Hope that helps.
This question already has answers here:
CSS: Background image and padding
(9 answers)
Closed 3 years ago.
I'd like to add a background to a div, position right center, but!, have some padding to the image. The div has padding for the text, so I want to indent the background a little. probably makes most sense w/ example:
http://jsbin.com/umuvud/edit#javascript,html,live
Thanks!
Updated Answer:
It's been commented multiple times that this is not the correct answer to this question, and I agree. Back when this answer was written, IE 9 was still new (about 8 months old) and many developers including myself needed a solution for <= IE 9. IE 9 is when IE started supporting background-origin. However, it's been over six and a half years, so here's the updated solution which I highly recommend over using an actual border. In case < IE 9 support is needed. My original answer can be found below the demo snippet. It uses an opaque border to simulate padding for background images.
#hello {
padding-right: 10px;
background-color:green;
background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8;
background-origin: content-box;
}
<p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>
Original Answer:
you can fake it with a 10px border of the same color as the background:
http://jsbin.com/eparad/edit#javascript,html,live
#hello {
border: 10px solid #e8e8e8;
background-color: green;
background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif")
no-repeat scroll right center #e8e8e8;
}
this is actually pretty easily done. You're almost there, doing what you've done with background-position: right center;. What is actually needed in this case is something very much like that. Let's convert these to percentages. We know that center=50%, so that's easy enough. Now, in order to get the padding you wanted, you need to position the background like so: background-position: 99% 50%.
The second, and more effective way of going about this, is to use the same background-position idea, and just use background-position: 400px (width of parent) 50%;. Of course, this method requires a static width, but will give you the same thing every time.
Method 1 (99% 50%)
Method 2 (400px 50%)
There is actually a native solution to this, using the four-values to background-position
.CssClass {background-position: right 10px top 20px;}
This means 10px from right and 20px from top.
you can also use three values the fourth value will be count as 0.
you can use background-origin:padding-box; and then add some padding where you want, for example: #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;}
This way you attach the image to the div padding box that contains it so you can position it wherever you want.
In case anyone else needs to add padding to something with background-image and background-size: contain or cover, I used the following which is a nice way of doing it. You can replace the border-width with 10% or 2vw or whatever you like.
.bg-image {
background: url("/image/logo.png") no-repeat center #ffffff / contain;
border: inset 10px transparent;
box-sizing: border-box;
}
This means you don't have to define a width.
first off, to be a bit of a henpeck, its best NOT to use just the <background> tag. rather, use the proper, more specific, <background-image> tag.
the only way that i'm aware of to do such a thing is to build the padding into the image by extending the matte. since the empty pixels aren't stripped, you have your padding right there. so if you need a 10px border, create 10px of empty pixels all around your image. this is mui simple in Photoshop, Fireworks, GIMP, &c.
i'd also recommend trying out the PNG8 format instead of the dying GIF... much better.
there may be an alternate solution to your problem if we knew a bit more of how you're using it. :) it LOOKS like you're trying to add an accordion button. this would be best placed in the HTML because then you can target it with JavaScript/PHP; something you cannot do if it's in the background (at least not simply). in such a case, you can style the heck out of the image you currently have in CSS by using the following:
#hello img { padding: 10px; }
WR!
To add space before background image, one could define the 'width' of element which is using 'background-image' object. And then to define a pixel value in 'background-position' property to create space from left side.
For example, I'd a scenario where I got a navigation menu which had a bullet before link item and the bullet graphic were changeable if corrosponding link turns into an active state. Further, the active link also had a background-color to show, and this background-color had approximate 15px padding both on left and right side of link item (so on left, it includes bullet icon of link too).
While padding-right fulfill the purpose to have background-color stretched upto 15px more on right of link text. The padding-left only added to space between link text and bullet.
So I took the width of background-color object from PSD design (for ex. 82px) and added that to li element (in a class created to show active state) and then I set background-position value to 20px. Which resulted in bullet icon shifted inside from the left edge. And its provided me desired output of having left padding before bullet icon used as background image.
Please note, you may need to adjust your padding / margin values accordingly, which may used either for space between link items or for spacing between bullet icon and link text.
I wonder how to (CSS-wise) realize a Button with a counter element like the Tweet-Button. The call-out seems to grow with the number of digits; the backgrund sprite used http://platform0.twitter.com/widgets/images/tweet.png has a significantly wider call-out than visible in the basic (i.e. one digit) button rendered.
Any help is greatly appreciated!
The key is to use a correct background position.
They use two elements:
<span><a href=#" >1</a></span>
Apply a background to the span, position it (according to the position of the image in the sprite), and specify the padding for positioning the number:
span {
background-img: url("sprite.png");
background-position: 0 -50px;
padding: 0 0 0 5px;
}
This is the left side of the call-out. The '0 -50px' means the portion of the sprite 50px from the top, 0px from the left is used.
Next style the anchor and the trick is to apply the background to the right side of the element this time:
a {
background-img: url("sprite.png");
background-position: right -50px;
padding: 0 5px 0 0;
}
This background is aligned to the right side of the (growing) anchor and the left side is chopped of.
This way there are actually two images on top of each other, the right-side is on top of the left side (but they are really the same portion of the sprite). The number can grow only as much as the width of the original sprite, otherwise the left side of the anchor background (on top) will be visible.