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/
Related
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.
I'm trying to show a SVG image using mask but in Firefox it isn't appearing. My CSS class is as follows:
.myClass {
-webkit-mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
background: rgba(67, 67, 67, 0.8);
width: 1.15em;
height: 1em;
}
And html code is just a simple:
<div class="myClass"></div>
In chrome, my masked arrow-down.svg is showing nicely but in firefox a div with specified background is appearing. Any idea on how to solve my problem?
mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
is invalid. You can't have a mask that's an entire SVG file, it must have a fragment identifier that points to a mask element.
On top of that, Firefox currently doesn't support any additional parameters beyond the url so the no-repeat 100% 100% will cause it to fail.
For Firefox what you need is something like this:
mask: url('../img/arrow-down.svg#maskelement')
where maskelement would be the id of a <mask> element within the arrow-down.svg file.
For anyone who may still be wandering, the following works fine for me, by inserting the encoded svg string as a data uri (not base64!):
.my-class {
--svg-icon: url('data:image/svg+xml;utf8,...');
mask: var(--svg-icon) no-repeat;
mask-size: 100% 100%;
-webkit-mask: var(--svg-icon) no-repeat;
-webkit-mask-size: 100% 100%;
background-color: currentColor;
height: 1em;
width: 1em;
}
I was able to pull this off thanks to some nice tutorials/examples by Anthony Fu and Noah Blon:
Icons in Pure CSS
Iconify source code
Coloring SVGs in CSS Background Images
I have the image in the correct folder but I want to add a text box on top of an image and I was told the best way to do it is make the image a background image, but when I followed a tutorial it never appeared?
anyway here is my html
<div class="module">
<h2>blah blah</h2>
</div>
and my CSS
.module {
margin: 10px;
width: 1530px;
height: 717px;
display:block;
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
background-size: cover;
position: relative;
}
h2 {
position: absolute;
bottom: 100px;
left: 100px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px PTSans;
}
the image is full width of the screen so I am using container-fluid in bootstrap and the text box will be in the middle of the image.
You may call the local file as background like this:
background: url("file://PATH-TO/file.jpg");
Keep in mind that the string inside parentheses should provide a URL to the file.
Also, you have the option to put a path in it.
background: url("PATH-TO/file.jpg");
Change the backlashes. From this...
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
To this
background: url('C:/Users/Jason/Desktop/champions/images/shop.png');
Cheers.
It looks fine of your css. Try to use firefox or chrome debugger to check if the background image can be loaded or not. Try to change the value of the background-size. Sometimes the background image is too large that you can only see part of it (which may be completely white) on the screen.
Your path is wrong
try this: url('images/shop.png') - if your css is in champions
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
In my code the background-position-y doesn't work. In Chrome it's ok, but not working in Firefox.
Anyone have any solution?
If your position-x is 0, there's no other solution than writing :
background-position: 0 100px;
background-position-x is a non-standard implementation coming from IE. Chrome did copy it, but sadly not firefox...
However this solution may not be perfect if you have separate sprites on a big background, with rows and cols meaning different things... (for example different logos on each row, selected/hovered on right, plain on left)
In that case, I'd suggest to separate the big picture in separate images, or write the different combinations in the CSS... Depending on the number of sprites, one or the other could be the best choice.
Use this
background: url("path-to-url.png") 89px 78px no-repeat;
Instead of this
background-image: url("path");
background-position-x: 89px;
background-position-y: 78px;
background-repeat: no-repeat;
Firefox 49 will be released—with support for background-position-[xy]—in September 2016. For older versions up to 31, you can use CSS variables to achieve positioning the background on a single axis similar to using background-position-x or background-position-y. CSS variables reached Candidate Recommendation status in December 2015.
The following is a fully cross-browser example of modifying background position axes for sprite images on hover:
:root {
--bgX: 0px;
--bgY: 0px;
}
a {
background-position: 0px 0px;
background-position: var(--bgX) var(--bgY);
}
a:hover, a:focus { background-position-x: -54px; --bgX: -54px; }
a:active { background-position-x: -108px; --bgX: -108px; }
a.facebook { background-position-y: -20px; --bgY: -20px; }
a.gplus { background-position-y: -40px; --bgY: -40px; }
background-position-y :10px; is not working in Firefox web browser.
You should follow this type of syntax:
background-position: 10px 15px;
10px is bounded to "position-x" and 15px bounded to "position-y"
100% working Solution
Follow this URL for more examples
Why don't you use background-position directly?
Use:
background-position : 40% 56%;
Instead Of:
background-position-x : 40%;
background-position-y : 56%
background: url("path") 89px 78px no-repeat;
Will not work if you want a background along with the image. So use:
background: orange url("path-to-image.png") 89px 78px no-repeat;
This worked for me:
a {
background-image: url(/image.jpg);
width: 228px;
height: 78px;
display: inline-block;
}
a:hover {
background-position: 0 -78px;
background-repeat: no-repeat;
}
Make certain you explicitly state the measurement of your offset. I came across this exact issue today, and it was due to how browsers interpret the values you provide in your CSS.
For example, this works perfectly in Chrome:
background: url("my-image.png") 100 100 no-repeat;
But, for Firefox and IE, you need to write:
background: url("my-image.png") 100px 100px no-repeat;
Hope this helps.
However this solution may not be perfect if you have separate sprites on a big background, with rows and cols meaning different things... (for example different logos on each row, selected/hovered on right, plain on left) In that case, I'd suggest to separate the big picture in separate images, or write the different combinations in the CSS... Depending on the number of sprites, one or the other could be the best choice.
Mine has the exact problem as stated by Orabîg which has a table like sprite which has columns and rows.
Below is what I used as a workaround using js
firefoxFixBackgroundposition:function(){
$('.circle').on({
mouseenter: function(){
$(this).css('background-position',$(this).css('background-position').split(' ')[0]+' -10px');
},
mouseleave: function(){
$(this).css('background-position',$(this).css('background-position').split(' ')[0]+' 0');
}
});
}