i am creating a Rock Paper Scissors game for The Odin Project.What i want to do is: instead of click buttons to do the choice, i want to put circular pictures of Rock/Paper/Scissors and click these to make the choice.
I found some pictures online, so i was trying to find a way to crop them in a circular way, and the background to be transparent.
I found online that a tool to do this, is GIMP. I did everything correctly there, the picture has this gray-grid background, but still when i put the picture on the html, still is shown as a square with white background.
This is what i see in GIMP:
and this is what i get on HTML:
.
I am doing everything correctly on GIMP and also i am exporting the picture to .png .
Any help would be highly appreciated
in GIMP, i added an Alpha channel, i did the crop, the background was transparent there, i exported the file as a .png (clicked "Do not save background colour), and still the picture doesn't appear transparent
Related
I was wondering if there's a way to remove the white outline on a GIF on my website.
Here
Is there any way to remove it? Or would I have to do this during creation of the GIF?
Regards, Owen.
Seems like that GIF has been saved with transparent background, and its half-transparent edges having a white background.
If you still have the GIF and something like Photoshop, try to set its background color to the color you are using in the webpage and save it again.
Try deleting the added white on the image, and then saving it as a PNG file. I know that works with images, so it will probably work for this. If you save it in a folder or a desktop, it will look like it still has the white background. But when you open that new file in Photoshop, you'll see it's gone.
So if when you put it on your website, the background will be clear.
Does this help? :)
Also if you do not have Photoshop, and are unable to do that, I'd be more than happy to do it for you. Just let me know and I'll give you a temporary email address to send it to me, and I'll send it back to you :)
I am working on this project to clone an old BBC webpage, I need to use the BBC logo, after searching on google and still couldn't find a match. I decided to inspect the page and check for the source of the image. I found the image to my surprise it's black or some sort of grey and not white as its shown on the page. I don't get how it was done. I know I can just crop it and use it but I'll like to know how it was done.
The image you are referring to is actually hidden (opacity: 0), the image you can see is a part of the sprite as Bogdan commented.
My web page has a background image, and a transparent gif overlaid with hotspots linking to social networks, etc.
Is there a way of transporting those coordinates so they work without the gif and just hover over the background image? When I remove the gif it obviously removes the hotspots and I cant work out how to change this (or if this is possible).
I'd like to do this when the page is loading. Right now I get a little icon before the gif appears and it looks unprofessional.
I'm using dreamweaver.
You can try some CSS tricks. Create transparent DIVs and position them above your background image where you need them.
Here is an example: http://www.position-relative.com/tutorials/tute1_css_bg_image.php
i have images and i want to remove 2 angles of each image.
The removed part should be transparent, and this is the part i couldn't fix.
Here are 2 images the shows what i want to do:
This is an empty image. The white color is the part i want to show. The Blue part is showing the document background gradient color.
This is what should i get at the end. The blue part again, is transparent from document gradient color.
Anyone has idea?
In webkit browsers you can use mask-box-image. Put your image in a div with the image-mask class and then use mask-box-image with a transparent png
.image-mask {
-webkit-mask-box-image: url(your_mask.png);
}
There is an excellent article on the always brillient CSS Tricks website - http://css-tricks.com/webkit-image-wipes/
It's webkit only though I'm afraid.
Some may not like my non-code answer, but you could do it in the image itself? Please don't hate me for suggesting this, but sometimes code doesn't solve all.
Save the image as a PNG.
Make sure the layer you are working on is not the "background" layer, if you are in Photoshop.
Erase/use the marquis tool to delete the part of the image you want to be transparent. You can blur the edges of the marquis tool to make it "fade."
Depending on your settings in Photoshop or other editing program, the "transparent" section should be a checkered grey and white.
Save the image as a PNG and use it instead of the coded mask.
Granted, this doesn't work if you are dynamically loading images or have some other reason you are relying on code to mask your image, but it should work. Early versions of IE have some issues with PNGs, but I've not encountered it with IE9, IE8 or IE7 in my current project.
How do I make the background in an image transparent? Most of my images have a white background. When I use them in my website with my body background color black it looks awkward.
I have unsuccessfully tried using Fireworks magic wand tool to remove the white background. I have also applied the CSS transparent property but it does not work for me either.
What is the best means of making the background color of an image transparent?
What image format you should use
You should use PNG pictures with alpha channel, so called RGBA image.
Save your work as PNG and make sure it is saved with RGBA colors.
Wikipedia.org, Portable Network Graphics
How to, using GIMP (should be similar with photoshop)
Open your picture file with GIMP.
If your picture layer does not contain alpha channel add it by right clicking on layer and selecting "Add Alpha Channel".
Use "Fuzzy Select", "Select By Color" or "Scissors Select" tool to select backround area.
Hit delete.
Save results as PNG format with RGBA colors.
It should look something like this after you're done with it:
Few notes
Play around with mentioned selection tools to learn which one to use in which situation.
Also pay attention to tool settings especially with fuzzy and color selection tools.
If your picture contains blurred transitions between subject and backround, you should try to make them so with final picture too. You could use
You'll want to alter the actual image to make it transparent -- sounds like it might not be? Often images themselves have white backgrounds, so laying these on top of anything might look odd. You can take the image and remove the white in it and save it as a transparent image, then try again.
Use photoshop to remove the background and save it as .png
remove it like this: http://www.addictivetips.com/windows-tips/how-to-remove-image-background-in-photoshop-tutorial/
or using magic eraser.
good luck!
You can do it in photoshop with background eraser tool
If you don't have Photoshop - the easiest way to do it is with MS Word (2010).
Change a background of your page to black (Page Layout --> Page Color --> Set to the color of your website)
Insert --> Picture
Once your have inserted pickture, go to Picture Tools and find Background Removal tool under Picture Tools.
Select area you want to remove and click "Remove" and then "Done"
use photoshop , select unwanted portion of image and then save it as png, But it'll may not work in IE, Use PNG Fix More details http://jquery.andreaseberhard.de/pngFix/
To remove the background of the images, you can use This Website. It is very easy.
Steps:
Go to the link
Select the photo or enter the URL
Download the image.