I am working on a dutch site and i am having a problem with the logo of it.
I saved the logo as PNG24 sothat the characters "hvb" in the logo will be transparent.
for some odd reason, it shows the characters in plain old white.
Could somebody please tell me how this is possible.
By the way: it is not caused by the h1 tag it is wrapped around.
http://www.luukratief-design.nl/wp/
Help would be appreciated
EDIT:
I have never seen this befor, but you guys where right! The image HAS indeed have white letters!
The odd part about it is that the layers were hidden, so they look transparent in photoshop. Once i used save for web and exported it to png, all of a sudden they are white. Take a look at the screeny:
The solution:
As stupid as it sounds, i deleted the white layers (which werent even visible), and exported it again. As you can see it works now.
I can only choose 1 right answer, so i will choose the first guy who pointed this out. Thanks guys. Still strange, but thanks!
The letters are white in the image file.
The logo appears to have transparency for me. I am using Chrome.
Also transparency with PNGs does not work in IE6 or older without some javascript fiddling.
See: http://code.google.com/p/ie7-js/
I made the simple change for you and made the letters transparent. You can use it all you like. No charge! ;)
EDIT: Obviously you can do a much better job if you take a bit of time, but editing in image editing software is the only way for them to be transparent.
Seeing as the "h" of hvb has a nice flick at the end, surely its not meant to be transparent?!
When I change background to black, letters are white. There is no problem with implementation to site, I think problem is in image file.
I had difficulty with comprehension questions, second option:
Also if you using IE, and you have problems with transparent image corners and edges, use js code to fix it.
And if you want that letters be transparent, u need to edit image file with Adobe Ilustrator, or Photoshop or with somethnig else, what you using.
Link: IE Transparency
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 have an issue where color is shown differently in FireFox, compared to Chrome and IE. And i have no idea how come.
What would you do in my situation to get the same color displayed in all the browsers?
See http://www.inoplay.dk/
The top v-sign background is another blue (in FireFox), compared to the rest of the header, even though i selected exact same color in photoshop.
I have limited possibilities to edit the theme/template in PrestaShop, so simple CSS solution all i can do.
Any suggestions is greatly appreciated.
There are a few things that affect how these images render against HTML hex color codes.
It could vary whether or not each browser is using hardware acceleration which would affect how colors are rendered
The compression of the JPEG can sometimes cause color shifting
Make sure all your web images are in RGB color space/profile
SUGGESTION: the easiest way to get around this is to create your menu element as .PNG - PNG allows you to have a transparent background. This way you won't need to try to match the blue with code. It will just be transparent.
https://en.wikipedia.org/wiki/Portable_Network_Graphics
Try saving the image in jpg format. i hope it should solve the issue
I want to be able to take my kingdom of loathing signature that has this code:
<img src="http://sigs.kingdomofloathing.com/player_2192849/mode_bigsig/l1_clan/l2_clantitle/s1_level/s2_class/playerfeed_2192849_bigsig.gif" border="0" />
I want to take the white background of the image and make it transparent. The reason why I can't do this in an image editor is because these signatures update every once in awhile according to what you have been doing in the game.
The simple answer is that you can't do this with CSS and HTML.
Adding transparency to the element with CSS like Frank Tudor stated (via opacity) will affect the entire image.
So really you have three options:
Edit the image using design software like Photoshop, removing the
white bg and saving it out as a trans gif or png.
Utilize CSS opacity, but this will make the entire object transparent. If you're okay with that then this is probably the easiest solution.
Use a scripting language. As others stated you can technically edit images using certain scripting languages like PHP. This will be the most time-consuming/technical way to perform this task (depending on your coding skills).
Hopefully this helps.
If the images are being updated, then it's up to whatever code you are using to dynamically create those images. You should certainly be able to use transparency when creating the images, regardless of how they are made.
I recommend PNG rather than GIF, but either would work.
Post the code of however you generate the signature images, and someone can help you update it to use a transparent background.
There are advanced manipulation functions javascript in one case I remember opacity being used for transparency and in most server-side programming languages you can find image functions.
The problem you face (without an image editor) is that transparency is parameter of the image as it is saved out (and some image types look better than others when it comes to transparency).
You could try this...
Try adding an ID or Class to your IMG tag and this bit of code.
#IDgifThing {
opacity: 0.5; /* 50% transparent */
}
I have not tested it, but I hope it helps you or at least puts your mind in the right direction.
freakin' out because i didn't manage to create a preloader, which is working in internet explorer. it is a real small preloader (10x10px), which is shown in a textfield after the user started a search.
i first implemented a css-spinner from here: http://cssload.net/ which looks good everywhere but doesn t work in ie at all.
afterwards, i generated one animated gif at http://ajaxload.info/ , but the results are looking pretty ugly in small size. it doesn t make a difference, if the gif is transparent or not...
anyone a good idea for that?
thanks,
k
EDIT: mootools is supported, but i do not want a small flash-preloader for that case!
have you tried this one?
preloaders.net
there are many modification possibilities and it looks nice in small size as you can scale the image to the size you prefer.
implementing a gif as part of a veil component you are viewing above the component you are loading or which is processing the request will work on every browser.
thanks for all comments and infos!
i guess the problem was the transparency of the preloader. the background of the text input is grey, so with transparent gif i had white pixel at the "corners" during the animation. i just choosed the grey color as background-color from the gif, and it looks ok. thanks eyerbody!
I know this seems like a simple question, but I'm really stuck. I am developing a website and Firefox is altering the image colors for the site. The issue is stemming from Firefox's use of ICC color profiles (I think).
I've done tons of research on the topic, and most of it boils down to sRGB when saving in Photoshop, but the color profiles are already set to sRGB.
These are the color settings I use when I save:
http://i.stack.imgur.com/jLJ5g.png
http://i.stack.imgur.com/OAx88.png - How it looks in Firefox 3, Chrome, and IE
http://i.stack.imgur.com/B7bcC.png - How it looks in Firefox 4
I can disable Firefox 4's color management through
about:config / gfx.color_management.enabled = 0,
but that is not a correct solution.
Wat do?
URL: http://development.smgwebdesign.com/riley
Thanks guys.
Well to help keep the colours correct, don't use an image to create the background.
As it is only one colour just set the background colour using css.
It accepts hexidecimal values.
eg #15253c would be your colour.
You can find different ones in photoshop by going to the colour selector tool.
It shows what the colour is in lots of different ways.
Then make the background of the logo transparent so there are no colour issues there.
I can't see how you're colouring the nav menu, but if you can use css and background colours directly,
as apposed to images, it will work better.
Use css wherever you can, it will work better and your website will load faster.
Check out http://www.w3schools.com/css/default.asp for help with CSS.
Also, for the images you do have to use, try the 'save for web' option in photoshop.
This is a bit out of my depth because I haven't been a Photoshop user for a long time, but the general solution to this is not to embed a ICC colour profile in the first place.
You should have a check box for that in your export dialog. Is that already turned off?