smoothing out transition between blackish image and black background - html

With the following CSS:
#divPic {
height: 32pc;
background-image: url('https://wallpaperscraft.com/image/black_black_white_bone_time_game_noise_74543_4000x2248.jpg');
background-repeat: no-repeat;
background-position: left center;
background-color: #000000;
opacity: 1;
}
... I set the image dice.jpg as the background-image of the div with id divPic.
The result is this:
The problem is that the picture doesn't cover the whole range of the frame.
If I change the background-color to blue, you can see which part is covered by the image and which part is not:
I am using background-color black (#000000), so it looks more or less ok but what is annoying me is that, if you look closely, you see the right edge of the image ... i.e. the background-color (#000000) and the color of the image (some slightly different black) do not match perfectly. I tried experimenting with different kind of black (e.g. #000008 instead of #000000, etc.) but you could still see the edge where the image ends and the background-color begins.
My question is therefore: is there some way to smooth out the transition between the image and the background-color so that you don't see the edge anymore?
*************************************UPADTE*********************************
Here's some context:
I'm using bootstrap, the frame for the picture is a bootstrap-column:
<div id="picContainer" class="row">
<div class="col-xs-12 thumbnail" id="divPic"></div>
<div class="col-xs-12" id="button_div"></div>
</div>

I don't have enough reputation to make a comment, but have you tried using either #010101 or #020202 as background colors? This is the color of the image at the edge, so choosing either of these will make it look as smooth as possible without needing to apply a transparency gradient to the image or what-have-you.
UPDATE:
If you need an actually smooth transition, you can apply a CSS3 gradient on top of the background image to transition into the color you want. The following JSFiddle has an example of this, using the code below: https://jsfiddle.net/Auroratide/7j8c0v1k/
#divPic {
background-repeat: no-repeat;
background-image: linear-gradient(to right, rgba(2, 2, 2, 0) 300px, rgba(2, 2, 2, 1) 400px), url('https://wallpaperscraft.com/image/black_black_white_bone_time_game_noise_74543_4000x2248.jpg');
}
I used this Stack Overflow answer as reference.

Related

Make text color the inverse of dynamic background color?

On the website of Palantir.com, the color of the logo (originally black) is always the inverse of the color of the background behind it, even as the background scrolls/changes.
I'm creating a website via Wordpress and would like to have the same effect. I've tried using "mix-blend-mode: exclusion;", and while similar, doesn't give the true effect of a proper color inverse.
How can I do this in CSS? Thanks!
mix-blend-mode: difference with the font color set at white might help.
The difference with white on white is 0 - ie black.
The difference with white on blue is rgb(255, 255, 0) ie yellow.
body {
background-image: linear-gradient(white 0 30px, blue 30px 100%);
width: 100vw;
height: 100vh;
}
.text {
mix-blend-mode: difference;
color: white;
font-size: 60px;
}
<body>
<div class="text">SOME TEXT</div>
</body>
There can be problems with grays though - you can end up with gray on gray so it depends a bit on what your underlying image is actually like as to whether this will be satisfactory enough. (One trick is to apply a slight shadow to the text).

Is there any way to remove background of the picture on the website?

I have a picture of a chess piece. I want to put this picture on some background representing chessboard. Now when I put this picture I have this white background. Is there any way (using HTML, CSS or JavaScript) to remove white background from the picture and leave only the piece? Now it looks like that: picture.
CSS file:
.dark-spot{
background-color: rgb(209, 139, 71);
}
.spot{
height: 110px;
width: 110px;
}
HTML file:
<div class="spot dark-spot">
<img class="img-fluid" src="images/pieces/black-rook-square.jpg">
</div>
Apparently you are using JPG images. JPG images will contain color everywhere, i.e. every pixel in it will contain a certain color. To make it fit with the background, you'd have to edit the JPG and convert all white pixels to your background color.
But since you have two background colors, you need to convert all white pixels to be transparent instead of white. This isn't possible with the JPG image type, you'll need to convert these images to either PNG or GIF and then "erase" the white pixels, making them transparent that way. The result will be that your background image color (the chessboard) will be displayed ("come through") at the transparent positions.
You can kind-of do this using CSS mix-blend-mode: multiply. This will "remove" any white color (making it transparent) and will also affect any bright pixels which also with the same transparency, so the closer the pixel color is to white, the more transparent it will be.
body{
height: 100vh;
background: linear-gradient(salmon, lightgreen) no-repeat;
}
.piece{
background: url(https://www.baytree-interiors.co.uk/_uploads/img/products/giant/aged-stone-outdoor-queen-chess-piece-ornament_19661.jpg) 0 0 / 100% 100% no-repeat;
height: 200px;
width: 180px;
}
input:checked ~ .piece{
mix-blend-mode: multiply;
}
<input type='checkbox' id='remove-bg'>
<label for='remove-bg'>Remove chess piece white background</label>
<div class='piece'></div>
I suggest you to get board pieces images which are in APNG format, which already allows an alpha channel. I guess you can find plenty such APNG chess pieces files online.
According to this answer it's possible if the background is white.
Here is a sample code:
.dark-spot{
background-color: rgb(209, 139, 71);
}
.spot{
height: 110px;
width: 110px;
}
.spot-image {
height: 110px;
width: 110px;
mix-blend-mode: multiply;
}
<div class="spot dark-spot">
<img class="img-fluid spot-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAe1BMVEX///8AAAD8/PwFBQX5+fnLy8u+vr4ICAiqqqq6urrk5OTf39+QkJBqamrS0tL19fU2NjaYmJgmJiZiYmKlpaVZWVmKiopAQEDs7OxGRkbY2Nizs7MrKyuBgYHExMSfn58bGxsTExN5eXlQUFAoKChxcXFcXFx8fHwZGRkM760UAAAEoElEQVR4nO3aa2OaOhjA8VxQrFrRWi/V1tr2uLPv/wmXC2ASkO3FCt32/704beMDJw9JHghOCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPyBlFL1f/9S6jAeFeIvzvD4LI2XYuh+fBIlXmRpLFQWfaTM6B4n42nYrlQ6ncMW83N2Go/2IpwRWabqyM9JottrmV8u5UREPVBq4kZXPlbt8Y8otvw5WrojnsZBkMmruHt8PR6GWQbTagRzbVMMFRsptZamfVRHT+bb1SI+w+Lu7jQrfx9XZ5Pra4ASK9/2EJ+/J2ubQe1Yz65MFQ9184dvURf/53JkZp7ws27/IetxVqI+QptjfIk2h23q5m3b+H+uvQwyNL/N6pmoPuwAlvauZeNbzHyeC3+DEfuH8kD5bppO17Npuapi3u0RZdi09xTH4RCa/j/XHViZP+vPprZlIvPcZahzMxi+98/V8Vqe7JrW11NJN3WV/V/ouvGx9wy3MvFe1sZD2Hh23VoG10K+mrjsWodNy0WIeXSqnZvG2Vty+l7zU+I+zdBUFXuXEJtqaln3NngaBJnRWJigUXjgf6KqKFXOE3uqOOtL7xm+J/lpeXYlYxQsQinvbPAhmNBmti5N1C489GzncXQqWbiFHpr3nuE4ysTZ2iv/Ebbk7pa9SOJW8SK2s3SUhJixv48W+vW+0x8p0wzlIc3G1/hZEqazXVSHJ/FEdhaz8Aqa3/p+qlFh+asthbhEDb7EJ/PN3PHi8T+46xV7SmIuAzzfZ+e0V1q+7KM/N2XoMo2MPNiuPzWvV2TR1ZXPcmxkmMtlWEjrtfOSRkbcHXLeGeKfjfqmzHWP5fZZNBiKpyo0rSMxd38/dY/haZgMpy3FJlQNoVLnZuH1TPO6ba1GMbl9VB0iQ3tP7sqw7pa7ed/I0A6PC9u1fl5ehcVQGXaXELOPqDIsbl+KZblFvL0QtfyW7LB7NPO7w9ZuRcVhG1WgMKwqkuljQWg/QGqeMvX0Rob+Lle7uczu63M930xw1X9mlUzFz1atXfdW7VH18KjmZqWyHPhd3q6lTNqGffzmxizZRlwe7foOrdcq3FsPpHX+6XQrkJl11sjQbTOu76jObSn6/eQQiVXS7VJ14ZP3fzduLYdrhqrtQdfYfIF36pNGz7TfFyZ2jbht9HnRHMBcnvdDp2c1b2WbtrDGI9BzEfe+UWu0G+Vecuikki2TLB81G2GnJOok4vt4Y0nbSpQNda8PmIu8CbvlikNr5GPU+6fGeebRrtf8/vL5vf8lSgSvbqMKmVqFYY0tn1Jv8aPPevAa47nXt+Eozm49RkbvzxprVUXzWLtB/hoZCteRezevtHt322Eiq/fFh7aPVzLP7TDqXLeXq8EoNwNdgmvRWRsWb36xpavQycS7/9SeJ/syAyj8N4Fuimn5VnTudDJRrN0sXLXNwOz6peRFfKkMveJ/Kd+mP49bfJMd37Sc7MuR7+Pf27XfRIn95BcSVPbbxMdbVcR+GXwcZ91TfSiutv+8Z93/guMf+PcdAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/4ofOSYkVPMxp9cAAAAASUVORK5CYII=">
</div>
You need to use a PNG with a transparent background. otherwise you'll have a white background if you use a JPG.

Is it possible to change the background color of an JPG image in css?

I added a logo I found online, but it seems if I try to change the background color of my page it leaves it unaffected. (the logo background is white, the question is can I only add the logo itself from the picture).
Anything I can do to change it?
<div class="logo">
<img src="https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/11/gym-logo.jpg" alt="Gym logo" id="header-img">
</div>
body {
background-color: #ced6e0;
}
img {
position: relative;
right: 260px;
bottom: 50px;
width: 25vw;
}
https://codepen.io/picklemyrickle/pen/XWjzyvb
Thanks.
CSS can do a certain amount for you, depending on exactly what you want.
As your logo is black and white we can use one of the blend modes (multiply) to remove the white - by keeping the background color - and removing the background color, as it multiplies with the 0s in the black.
Here is an example of using background-blend-mode which changes all the white bits on your image to your chosen background color. If you want to keep the image in an img div (there is probably no need, but just in case) then you can investigate mix-blend-mode instead.
Here's a snippet:
.logo {
background-size: contain;
background-repeat: no-repeat no-repeat;
background-position: center center;
background-image: url(https://i.stack.imgur.com/jn3XU.jpg);
height: 200px;
width: 200px;
background-color: #ced6e0;
background-blend-mode: multiply;
}
<div class="logo"></div>
The logo you are attempting to show is a jpg file. JPG files do not support transparency. PNG files do however.
The image you're using is a JPG, which does not support transparent pixels (alpha channel) - unlike the PNG or WebP image formats. You'll need to remove the white background from your image using an image editing tool (like Photoshop, or an online alternative). Once you've done that, save your new image as a PNG or WebP, and the image will automatically let through any background colour behind it on your HTML page.
There are many online image editor tools (Google will show you many options), and also free alternative tools to Photoshop, such as Gimp, which you can download for free from https://www.gimp.org/.
Your logo looks very simple, as it's only using black shapes, so if you have access to the SVG format you can use that one, and removing the background from the SVG is as simple as editing a text file, which you can do in your code editor.
you can use the CSS property mix-blend-mode, but its only currently supported on Chrome, Firefox, and Safari, check this out. https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
mix-blend-mode:multiply;
If you convert your logo to an SVG image, you can change the background color easily with CSS. Simply add a class or id to the SVG element:
<svg class="red-background" viewBox="0 0 100 100">
</svg>
Then set the background color to any color you want or set it to transparent using CSS:
.red-background { background: #f00; }

SVG background color not working on Firefox

I've encountered some problems regarding the use of an svg. I have the following html and css codes
<i id="iconApp" class="icon_approved icon_lg pull-right"></i>
.icon_approved {
background-color: #fab700;
display: block;
mask: url(../Tick-Solid.svg) no-repeat 50% 50%;
-webkit-mask: url(../Tick-Solid.svg) no-repeat 50% 50%;
background: url(../Tick-Solid.svg) no-repeat 50% 50%;
}
The mask does not work on firefox, that's why I added the background property instead and it works the way I wanted it to be. However, the color does not work as expected. Instead of having a color of #fab700, it is instead being interpreted as a background color.
The orange should be the color of the Icon, not a background color.
Additional info:
I can't find a search term to look for this kind of problem but I did find something similar to my problem.
Link : http://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
Upon looking at the first example, it renders properly on chrome. But if you opened the link on firefox, it appears as boxes (which I assume is background color of the element).
You can't change the colour of the contents of an SVG referenced via background-image. All setting background-color does is set the fallback colour of the background. Which is what you are seeing here.
If you want to change the icon colour, you have to change the SVG file. Or you could inline the SVG in the HTML, It is also possible to do it via an <object> element.
Try
.icon_approved {
fill: #fab700;
}

CSS: opacity causes slight background color variation

I have set a specific background color for the body. I then want to use another div with the same background color but with opacity: .95 as a mask for content animating from the bottom of the page. This results in the masking div appearing to be a slightly different color. Is there any way around this?
See a screenshot here and the sample CSS below. I'm on Chrome 20 on Lion.
body
{
background: #3f3c45;
}
#bottommask
{
background: #3f3c45;
opacity: .95;
}
UPDATE: Please check this fiddle demonstrating the issue
UPDATED SOLUTION: It seems that at least in Chrome, using -webkit-backface-visibility: hidden; on the mask div solves the issue.
It it a matter of computing the effect of the 5% color gain from below.
Three ways:
calculating, or
trial/error with Firebug color picker, or
make a screenshot and sample the transparent color, then apply the sampled color to the non alpha background.
For the tattoo site, I've changed to a slightly different color, in order to accounting for the color shift of the opacity.
body {
background: #8d918f;
}