I've set logo for my web It file is png but browser show me the checkered board on background of my logo
I want delete this checkered board
<div class="bmw"></div>
.bmw{
max-width: 100%;
max-height: 150%;
height: 95px;
width: 95px;
border: 1px;
background-color: transparent;
background-size: cover;
background-image: url(/img/324022-middle.png);
float:right;
margin-right: 30px;
margin-top: 17px;
}
I've searched a lot and I did every one said but none of them didn't work for me.
I set some change but It didn't work again
<img class="bmw" src="/img/324022-middle.png" alt="bmw">
.bmw{
max-width: 100%;
max-height: 150%;
height: 95px;
width: 95px;
border: 1px;
background-color: transparent;
background-size: cover;
float:right;
margin-right: 30px;
margin-top: 17px;
}
I thing some thing can help me should be a transparenting with background of my site
some how please help me
Checkerboard matrix is possibly being exported with the original logo image.
In photo imagery software (like Photoshop) transparency ON shows base checkerboard (for merely visual purposes within the software).
In image software such as Photoshop:
PNG images export as a layer, the top layer being the image or logo, and the base layer being transparent or solid (depending on the settings chosen).
Turning transparency settings OFF gives a PNG with a solid background tone behind the logo.
Examples of two images below:
In (img1) the PNG was exported as a transparency.
Now in the CSS you can control the background color with any tone you want (color or transparent).
We presume the PNG logo you're using has a transparent background (layered). If yes, just CSS background-color:#fff; should do it (or any tone you need).
If that doesn't work you'll likely need to export the logo using different PNG settings.
In (img2) the outer background gray tone is a lower layer we exported with the image. Its still a PNG image. Yet neither the gray tone nor the image can be separated from each other (not with any CSS) because its all 1 layer (all one image).
Related
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; }
I have a PNG. I'm trying to put it on my website but for some reason, it is showing the PNG background, even though the file type is .png.
CSS Code:
.items img{
border: none;
background: none;
position: absolute;
top: 50%;
left: 50%;
opacity: 1;
display: block;
}
This is what it is showing on top of a black background.
The html is just an img tag with the source linking to the png.
It is not a PNG file. You can see it if you open in Photoshop, background is not transparent.
If you want your file transparent, let's use Magic Wand to select the selection area you want to clear.
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 have a few photos and I want on hover I want to cover them with background: black; I want to cover the whole image with black for example. The hover effect just doesn't appear. I suspect the problem is in the CSS selectors.
Here is the fiddle: http://jsfiddle.net/20oomme4/3/
I tested your fiddle and it is working. I modified the colors and tested again - and it worked again. However, you images were broken links, so I could easily see the background color. My guess is that your images are opaque and, therefore, you cannot see the color that is BEHIND them.
Your best bet is to create two images - one with normal color and one with black color. Call the normal image "NormalImage.jpg" and call the black background one "NormalImage_black.jpg". Then, onhover, replace ".jpg" with "_black.jpg" - and on mouseout, replace "_black.jpg" with ".jpg". If you are having trouble doing this with css, try using Javacsript - and remember to load all images (but hide the backgorund ones) upon page_load, so that when someone hovers, the browser doens't have to load the image - it only needs to display it.
I'm unsure of what you want exactly. If you want a transparent background to cover the image.
jsfiddle
Other wise you would need to use transparent png's to change the white to black background on the image itself.
.img-responsive.products {
border: 1px solid black;
cursor: pointer;
}
figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #2c3f52;
color: #ed4e6e;
}
figcaption {
height: 100%;
width: 100%;
opacity: 0;
color:#fff;
text-align: center;
backface-visibility: hidden;
transition: transform 0.3s, opacity 0.3s;
}
.col-sm-3:hover figcaption {
opacity: 0.4;
}
The hover effect is working as it is intended, the problem is the images are taking up the full area so you can't see any background effects. Try giving the images a padding:20px; to see the background changes. As mentioned above you will need to either create an image sprite or change the image to a transparent .png in order for the full background to change.
ex: http://jsfiddle.net/20oomme4/6/
Check this fiddle
This is the same CSS that you used, ie.
.img-responsive.products:hover {
background-color: black;
}
Only thing is that i've used a png image with no background. And as you can see in the fiddle your code works correctly.
So, As i mentioned in my comments, i would suggest you to use a png image without any background.