I am making a navigational menu in html and css, but i want the border right of each navigational item to be an image.
I tried
border-right:url(image.jpg);
But this didn't work.
How do I do it?
You can use a background image and then position the background image to the right of each element. Usually this would go on either the a tag or li. For example:
#primaryNav a:link {
background-image: url('image.jpg');
background-position: right;
background-repeat: no-repeat;
display: block; /* make the link background clickable */
}
If you don't want the border applied to the last (when using background-position: right;) or first (for background-position: left;) element in your menu then try the :last-child and :first-child selectors.
#primaryNav a:last-child {
background: none;
}
You can set custom border size. Top, left and bottom will be 0px and set a border-image. If you want to decorate these borders with other style then use sub div.
Right image decoreted div style is:
border-style: solid;
border-width: 0px 15px 0px 0px;
-moz-border-image: url(border.png) 27 repeat;
-webkit-border-image: url(border.png) 27 repeat;
-o-border-image: url(border.png) 27 repeat;
border-image: url(border.png) 27 fill repeat;
This is actually a new feature of CSS 3 and the property is called border-image. Unfortunately, it's not yet widely supported by today's browsers as it's still a candidate recommendation.
#primaryNav a:link {
background: url('image.jpg') no-repeat right;
display: block;
}
Typically good practice to code your background property's on a single line.
There's a css property called border-image which could be what you're after. I'm not sure what the current browser support for it is though...
It is not actually recommended to do it this way. See this thread for details: How do I set a border-image?
Related
I would like to have a dotted line below to a text :
The web designer have designed a custom dotted so i can’t use :
h2 {
border-bottom: 4px dashed #fff;
display:table;
}
because it is not conform.
What i’ve done : I’ve made an image with a dot and position it with css :
h2 {
padding-bottom: 20px;
display:table;
background-image: url('../images/tiret.png');
background-repeat: repeat-x;
background-position: center bottom;
}
It works very well but depending on the width of the text, the last dot could appear cut like you can see on this picture :
Do you have a suggestion on how to avoid this ?
You could try background-repeat:space
The image is repeated as much as possible without clipping. The first
and last images are pinned to either side of the element, and
whitespace is distributed evenly between the images. The
background-position property is ignored unless only one image can be
displayed without clipping. The only case where clipping happens using
space is when there isn't enough room to display one image.
You can use border-image:
h1 {
display: inline-block;
border-style: solid;
border-width: 0px 0px 12px;
-moz-border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
-webkit-border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
-o-border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
}
<h1>Hello world</h1>
Codepen here
Also there is usefull online generator
I created the following image to be rendered under all h1 title tags in my website. Trouble is, every tutorial I find online discusses border image property as a all around border.
All I want to achieve is to get this one small image underneath the title, once. No repeat. centered. According to this http://www.css3.info/preview/border-image/ there is a property called border-bottom-image. But I can't seem to get it to display properly.
Google chrome developer tools tells me that this is an unknown property name. If I can't achieve this with the following css3, how can I achieve it?
.entry-title{
border-bottom-image: url(images/title-borderbottom.jpg);
}
Here are two options that allow you to do what you want without resorting to border-image, which is not really built for what you want to do.
background-image + :after
This uses a pseudo-element (:after) to "insert" a block with your given image as the background-image. I think this is probably better than the next option, since it's least disruptive to the element's styling.
.entry-title:after {
content: "";
display: block;
height: 70px;
background-image: url(http://placehold.it/350x65);
background-repeat: no-repeat;
background-position: center bottom;
}
http://jsfiddle.net/mh66rvbo/2/
background-image + padding
This uses padding-bottom to make space for the image, then sticks the image along the bottom of the element, positioning in the center.
.entry-title {
padding-bottom: 70px;
background-image: url(http://placehold.it/350x65);
background-repeat: no-repeat;
background-position: center bottom;
}
http://jsfiddle.net/mh66rvbo/1/
work for me ....
.entry-title{
border-bottom: 20px solid #000;
border-image:url('bottom.jpeg');
border-image-repeat: round;
border-image-slice: 300;
text-align: center;
margin: 0px auto;
width:70%;
}
From the link you provided (http://www.css3.info/preview/border-image/)
border-image currently works in Safari and Firefox 3.1 (Alpha).
Per my understanding, "border-bottom-image" still doesn't work in the latest version of Google Chrome (natively). But "border-image" does. And you can define width for each individual portion using the (top right bottom left) protocol:
.entry-title{
border-image: url(images/title-borderbottom.jpg);
border-image-width: 0 0 10px 0;
border-image-repeat: stretch;
}
Details: http://www.w3schools.com/cssref/css3_pr_border-image.asp
I have an image that I would like to use as div's border and background. The below code (and fiddle) produces undesirable white background inside the div despite using background: transparent !important; or background: none !important; (I tried both).
Here's the image I'm using:
Here's the effect I'm getting:
Here's the effect I want:
Strangely, I can achieve the desired effect by opening Web Inspector in Chrome and toggling the border-image property after page render. Simply turning the border-image off and back on, I get the result I want:
HTML
<div>test</div>
CSS
div {
-webkit-border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; /* Safari 3.1-5 */
-o-border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; /* Opera 11-12.1 */
border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round;
}
So if the browser can render it, why can't I write it? :) Any help/suggestions would be great.
Please note I have already tried setting the image to be the div's background-image instead of border-image and that did not produce desired results either (scaling the image to prevent the border from getting cut off was simply too much guess work since the textual contents of the div are dynamic).
You're lacking the fill keyword: the standard says:
The ‘fill’ keyword, if present, causes the middle part of the
border-image to be preserved. (By default it is discarded, i.e.,
treated as empty.)
See updated fiddle: writing 30 30 fill seems to solve your issue.
JSFiddle - Click Here
Maybe this will help you. Just shooting in the dark.
#block {
background-image: url("http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png");
height: 100%;
width: 450px;
background-repeat: no-repeat;
}
#block .blocktext {
padding: 50px;
}
Does something like this work for you? http://jsfiddle.net/qazLuyxh/9/
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 40px;
width: 520px;
height: 320px;
background: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) no-repeat;
color: #FFB9B9;
font: bold 24px/41px'fontname', Helvetica, sans-serif !important;
background-size: 100%;
}
Having a small problem where the background image is not showing in any of the IE versions (except IE 9 I believe), not sure what is going wrong, any helps/thoughts/things I could try out?
Kind regards
http://www.trucknetuk.com/phpBB/viewforum.php?f=46 It is the Michelin banner(not the small sponsor) just above the new topic button
background: url("./styles/Owner_Fleet_Operator_MS/theme/images/michelinback.gif") repeat-x scroll center 0 transparent;
Change this:
background: url('./styles/Owner_Fleet_Operator_MS/theme/images/michelinback.gif')repeat-x scroll center 0 transparent;
To this:
background: url('./styles/Owner_Fleet_Operator_MS/theme/images/michelinback.gif') repeat-x scroll center 0 transparent;
The difference is a space after the closing bracket and before the "repeat-x". IE is much pickier than other browsers regarding syntax.
Your background shorthand is wrong, transparent needs to come first
#page-body {
background: transparent url("./styles/Owner_Fleet_Operator_MS/theme/images/michelinback.gif") repeat-x center 0;
clear: both;
padding: 4px 5px;
}
proper shorthand is : body {background:#ffffff url('img_tree.png') no-repeat right top;}
Not sure what you are trying to do with the scroll declaration
.button{
background: transparent url('../images/backrgound.jpg') no-repeat top center;
}
CSS Standard
background : color URL repeat-section and position
JPEG Images
Check whether images are of JPEG2000, if yes, then open any image editor and save it again with proper jpeg extension
I've defined this class which adds a gradient background colour:
.banner {
background: -moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%) repeat scroll 0 0 #9FCC1D;
}
I've also defined a class that adds a background image
.alertBell {
background-image: url("../images/icons/bell.png");
background-position: 5px 50%;
background-repeat: no-repeat;
padding-left: 30px;
}
If I add both these classes to an element, it seems one overrides the other
<h2 class="banner alertBell"></h2>
Is there any way that I can have a background colour and a background image?
you can use CSS3 multiple backgrounds, something like
.banner.alertBell {
background-color:#9FCC1D;
background-image:url("../images/icons/bell.png"),
-moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%);
background-repeat:no-repeat, repeat;
background-position:5px 50%, 0 0;
}
example jsfiddle
see also: How do I combine a background-image and CSS3 gradient on the same element?
The Background css property is actually a combination of background-color, background-image, background-repeat, background-attachment and background-position into one property. Therefore when you set your H2's class property to class="banner alertBell", alertBell class will overwrite any shared properties contained in the banner class.
You could try changing your banner class to:
.banner {
background-color: -moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%) repeat scroll 0 0 #9FCC1D;
}
You could do something like:
<div class="banner">
<h2 class="alertBell"></h2>
</div>
You're having that problem because CSS gradients are defined as background-image, not background-color.
So depending on which one is defined later in the CSS, the background-image will be either .banner or .alertBell