i am trying to change the background colour of the following image to match the bar colour that it is on,but it doesnt do anything.
as you can see above the ball has a white background i am trying to make it the color that the bar is on.
what i tried
option1
#img{
background: linear-gradient(to bottom,#f7f7f7 0,#cfcfcf 100%) //this is the same color as the tab its on
}
option2
#img{
background-image: linear-gradient(to bottom,#f7f7f7 0,#cfcfcf 100%),url(./images/image.png);
}
option3
#img{
colour: linear-gradient(to bottom,#f7f7f7 0,#cfcfcf 100%)
}
html
<li style="background: linear-gradient(to bottom,#f7f7f7 0,#cfcfcf 100%);box-shadow: inset 0 2px 1px 0 #cfcfcf;">Ball<img id="img" src="./images/image.png" /></li>
any suggestions?
The background colour of the image element is covered up by the white pixels in the image itself.
You should edit the image file to replace the white pixels with transparent pixels.
Edit your img so it has a transparent background.
You could use the Luna Pic online editor for example
The background color of the image is obviously fixed within the image, and if you can't alter the image, you should change the li background. The background gradient of your li should be to right and already reach the second color (i.e. the background color of the image) at ca. 80% as shown below.
li {
height: 100px;
background: linear-gradient(to right, #cfcfcf 0, #f7f7f7 80%);
box-shadow: inset 0 2px 1px 0 #f7f7f7;
}
a {
float: right;
}
<li>Ball<img id="img" src="http://placehold.it/100x100/f7f7f7" /></li>
The problem is background color of the image element is in white
color.
Convert your image in transparent background.
Use GIF, PNG, BMP, TIFF, and JPEG format for image.
For online image editing Luna Pic
You can also use Photoshop or any other editor that supports transparency feature for editing image offline.
You can not change the colour of .jpg image. What you can do is You can take .png image with a transparent background with help of photoshop to match your background colour
OR
You can use font awesome icon if you are not used to with Photoshop
Related
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).
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.
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; }
In HTML when do I use color, and what is the difference between background-color and also the background tag?
What are the differences?
color is referring to the text color in that element.
background-color refers to the background color
background is shorthand to combine many background tags into one line.
background: #ffffff url("img_tree.png") no-repeat right top;
Combines color, image and background image properties in the one line instead of typing our each style individually.
w3schools
I will give you a example using this html element:
<span class="value"> This is my text </span>
.value { color: red, background-color: black}
The CSS color is used to change the text color of a html element. In this example "This is my text" would be red. The CSS background-color is used to change the background color so in this case you would get a black box with red text inside it. Finally the background is used to set all the background properties in one declaration. For example:
background: #00ff00 url("smiley.gif") no-repeat fixed center;
This changes the background color, adds the image "smiley.gif" to the background and it centers the image, it doesnt repeat the image if it has the space.
Quick answer
Color = Text Color
Background-color = the color of the background
Background = gives you the posibillity to set color, image , etc...
great tutorials on this are found here
It is true that background gives more options versus background-color. But if you only need to set background color, they are exactly the same, and each will override the other as seen in the snippet.
background: yellow;
background-color: yellow;
.bc {
background: yellow;
background-color: green;
}
.bc2 {
background-color: green;
background: yellow;
}
<div class='bc'>
bc { background:yellow; background-color:green; }
</div>
<div class='bc2'>
bc { background-color:green; background:yellow; }
</div>
One big thing about this both css properties is, that a background-color does not overwrite an image or a gradient that has been set with this:
background:url('https://example.com/image.jpg');
or
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 20%,#207cca 51%,#7db9e8 100%);
If you are trying to change the background from an image to a color you have to use the background property.
color: is used to add color to the Text within the Tag.
color: blue;
background-color: is used to add color in background of the content inside the tag.
background-color : red;
background: is used for adding different type of background property name to the content within the Tag.
background : red url('image.png') fixed repeat cover;
I'm trying to create a box around each letter to use for an odometer style stat counter. Do you know how to do this without wrapping each letter in a span? If you have any ideas I'd love to hear them.
If you are using a mono spaced font, you could probably use a background image with the boxes.
Another option would be to use javascript to add in all the extra markup you need. There are some jquery plugins that do this type of thing already:
http://daverupert.com/2010/09/lettering-js/
Using CSS3 gradients you can do this with pure css and no javascript. The main idea is to create a gradient where the box color you want is a solid color to a certain color stop, and then the gradient is transparent. You have to calculate the color stops in coordination with the font-size and letter-spacing of the text. Then apply the gradient to a pseudo class of the text's element and voila.
Here's an example I created for a span element that contained the amount of money raised for an organization. Each number needed a pink box around it. The reason the gradient is so complicated is because I made it only repeat after every 3 digits, since every 3 digits there was a comma that needed to be outside of the boxes and thus required an extra gap. If you are repeating after every character it can be much simpler, but figured I'd share this approach since you mentioned an odometer. You can also extend these gradients with more browser-prefixes to make it work in IE, opera, etc.
html:
<span id="amount-raised">10,123</span>
css:
span#amount-raised {
position: absolute;
z-index: 1;
font-size: 70px;
letter-spacing: 10px;
color: #fff;
}
span#amount-raised:before { /* pink boxes */
content: '';
position: absolute;
top: 0; left: 0;
z-index: -1;
height: 100%; width: 100%;
background-image: -webkit-repeating-linear-gradient(right, pink, pink 50px, transparent 50px, transparent 55px, pink 55px, pink 105px, transparent 105px, transparent 110px, pink 110px, pink 160px, transparent 160px, transparent 176px);
background-image: -moz-repeating-linear-gradient(right, pink, pink 50px, transparent 50px, transparent 55px, pink 55px, pink 105px, transparent 105px, transparent 110px, pink 110px, pink 160px, transparent 160px, transparent 176px);
}
I can't see a way to do this in HTML without wrapping each letter in an element that you can style.
You could create ten gifs, one for each number (you said stat counter) that look the way you want them. When you load the page, use javascript to split your string into an array, then loop through it and replace each character with the corresponding gif for that number.
Well, it's certainly possible to flip this around and use a font (via #font-face) that has boxed-in letters.
I liked DMTinter's answer but it was longer than necessary (plus it's 7 years old) - here's a quick and simple example css that I'm using on my page:
span { color: black;
font-family: "Lucida Console", Monaco, monospace;
border: 1px solid black;
background-image: repeating-linear-gradient(90deg, white, white 13.5px, black 14.5px);
}
The important thing is repeating-linear-gradient(). I just did trial and error to arrive at the values 13.5px and 14.5px as lining up with the background well.