Strange behaviour with border-image CSS - html

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%;
}

Related

Disable tiled background smoothing in Safari

Is there a way to disable background smoothing in Safari?
I'm trying to make, for example, the tiled background like this:
div#dashed
{
width: 10rem;
height: 7rem;
border: 1px solid #000;
background: url("https://tut.etogo.net/_files/diagonalbg.png");
}
<div id="dashed">
So, the background is like that:
And I expect the background to look like that (zoomed):
But in Safari it looks like that:
Zoomed:
So, I see Safari does some antialiasing/smoothing on the edges - is there a way to disable it? I tried different "image-rendering" parameters but with no success. Tried that in IE, Edge, FF, Chrome and Opera - everything renders fine, but not in Safari. maybe there's some css for that?
As an alternative to using an image, you can achieve the same effect with pure CSS.
.gradient {
width: 200px;
height: 200px;
background: repeating-linear-gradient(-45deg, #000, #fff 1px, #fff 15px);
}
<div class="gradient"></div>
You might want to fiddle around to reach the desired outcome.
A bit more info, and tips can be found on https://css-tricks.com/stripes-css/
I think this is because your background was repeat.
You can try it
background-size:cover;
background-repeat: no-repeat;
Setting size for your background-image.

Tint partially transparent image/background

How can I tint a background image that has transparent sections?
I have tried using background-blend-mode: multiply with background-image and background-color. It works great for opaque images, but does not take the transparency into account, leaving a colored square around the image.
I am using svg images, and could switch to using <img> instead of backgrounds if necessary.
Example:
Left side is my goal, right side is what I get with background-blend-mode: multiply. The base image is a light gray circle, and I multiplied it with red.
Edit: I created a codepen to better illustrate my problem and what I have tried. http://codepen.io/anon/pen/QbbbpZ It has both the original image and my goal (made in Photoshop) on top, with examples of what I have tried below.
Edit2: I'm beginning to wonder if it is even possible to do this with plain HTML/CSS. Would using something like canvas, maybe with shaders, be more appropriate? Is there a library out there for it?
In webkit (Safari, Chrome and Opera) you can use -webkit-mask-image to do the effect.
html:
<div id="blend-mask" class="uiElement uiBG"></div>
css:
#blend-mask {
-webkit-mask-image: url("http://i.imgur.com/JLjAor5.png");
background-color: #f00;
background-blend-mode: multiply;
}
#goal {
background-image: url("http://i.imgur.com/JLjAor5.png");
}
#pageBG {
width: 400px;
height: 400px;
background-image: url("http://lorempixel.com/g/400/200/");
background-color: rgba(255,0,0,0.25);
background-blend-mode: multiply;
color: white;
text-shadow: 0 0 0.25em black;
}
.uiElement {
width: 100px;
height: 100px;
margin: 25px;
display: inline-block;
}
.uiBG {
background-size: contain;
background-repeat: no-repeat;
background-image: url("http://i.imgur.com/rkRJbzH.png");
}
Example working:
http://codepen.io/anon/pen/vONVry
if you want to make it work as well in firefox check this post maybe will help:
Is there a -moz-mask CSS property, like -webkit-mask-image?
As well you can check using canvas to tint, there is this post that maybe can help:
http://www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/

How to add a border-bottom-image with css

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

Applying border image in IE 10; CSS3 Pie does not work

I am trying to use this image as a border around a div.
I want it to stretch around the div like a rubber band. This is the CSS I am using.
div#divname {
border-image: url('red-border-box.png') 30 30 30 30;
behavior: url('/wp-content/uploads/scripts/PIE.php');
}
It works in IE 11 and the latest Chrome and Firefox. I tried using CSS3 Pie for IE 10, but there's no effect.
Is there an alternative approach I can use for IE 10?
Border-image is not supported by IE. You may need to try something like this: JS Fiddle
div {
background: url('http://i.stack.imgur.com/SsCre.png') no-repeat;
background-size: 100% 100%;
padding: 10px;
padding-left: 20px;
width: 300px;
}

Body background doesn't work in FireFox

I've used the following code for background image of body tag.
background-image: url(images/taling.gif);
background-repeat:repeat-x;
background-color: #2E2E2E;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
it works in IE,Opera and chrome but doesn't work in FireFox.
I've tried also :
background-image: url("images/taling.gif");
and
background-image: url('images/taling.gif');
but it doesnt work on FireFox
your document body is height=0, and width=0, if you try to give it some height or width the image should be displayed
There is no problem with your CSS. What the problem is most likely the result of is either you are not assigning a width and height to the body tag, you are naming your image incorrectly, using the incorrect extension for your image, or the path to your image is incorrect, but there is also a possibility that you need to add a width and height.
If you use Firefox, you can test what is going on by using Firebug. You right click, and choose inspect element. Once done, in the right column of Firebug, you can see your declaration for background-image. If it says image not loaded or cannot be found, then one of the three things I pointed out above is the problem.
I know you said that the image does show up in other browsers, just not in Firefox. So, consider some modifications to the rest of your CSS. You may not be specifying a browser reset.
Just FYI, you can condense your CSS by doing the following:
background-image: url(images/taling.gif);
background-repeat:repeat-x;
background-color: #2E2E2E;
to
background: #2e2e2e url(images/taling.gif) repeat-x;
As for the body tag, you may want to add these properties and values:
margin: 0;
padding: 0;
width: 100%;
height: 100%;
Google "CSS browser reset"
One example of a browser reset is the following:
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
The above is the most simple browser reset you can have. It does not take into account ul,ol,li,h1,h2,h3,h4,h5,h6,li,p,a,img,blockquote, etc.
Also, look into using a clearfix.
I could ramble on and on as to why you may be having this problem.
I hope that helps.
Try:
background: url('yourimage.ext') repeat-x;
It works for me.
Edit: to match what you're doing, it should in fact be:
background: #2E2E2E url('images/taling.gif') repeat-x;