I have a transparent .png image file which I have attached it on my site, however the file has some background colour (grey) which I have no understanding why it is there. It's sure in transparent mode when I open it in any image editor or view, it has transparent background. Why when I link it, and when displaying on my site it isn't transparent ?
This is the method I'm using http://book.cakephp.org/#!/view/1441/image
I've tried embedding the image in CSS but find it a bit troublesome because I need the image to be clickable that links to my homepage.
Anyone can suggest any way to achieve the result I mentioned? ..perhaps some links or scripts that would work..I appreciate that.
:-)
It's possible there's some reprocessing going on. Do you have a link to the image, or better yet a link where we can see the markup / CSS as well?
I found a way to solve this not sure if it's the best but it works.
http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/
If you're using IE6, the grey background will be there because IE6 does not support alpha-transparency in images (without using behaviours or hacks).
This might help:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
Related
This is for a hobby/browser sim game site. I am wanting to put an animated gif in the background of the page in place of a static background photo. The image is very simple, it's just a static image with a fog overlay playing on loop. I uploaded it via Imgur, which gave me an .mp4 link. I put it in the code and it displays properly for me on Safari when I look at it. But on Chrome/Firefox/Edge and everything else it won't show.
Here it is:
html {
background:
URL(https://i.imgur.com/REDACTED.mp4) fixed center top,
background-size: cover;
}
As I said it works on safari. But it doesn't work anywhere else. I know I'm not doing something right, but I'd really like for it to show the gif/mp4 file on other browsers too. Is there a fix for this?
This particular page that I am putting this into does not have an HTML box or a JS box. Only a stylesheet one. Again this is for a hobby site. So it comes with its constraints. Is this doable?
I figured out a solution. I just found a place to host the image as a .gif without making it smaller dimensions or lesser quality. Google Photos offers this option, so I hosted it through there.
I am using the pro-theme "Frame" for Wordpress and have not been able to find support elsewhere for an issue (developer of theme won't support plugin compatibility issues--understandably). I am trying to re-position header/nav so that it does not overflow onto background images, rather, the background images are positioned below the header/nav wrapper/container. I've been trying to fix this issue for a few days now and cannot find a solution.
For example: below the link will show the BG image of a woman and I would like her head to not be cropped/covered. I also need whatever changes to be responsive and work with the additional features on the site (i.e. - homepage has a slideshow, etc.).
LINK
Thank you for any help--it is much appreciated!
Best regards,
The HTML of the page is a mess. I suggest to modify the background image of the woman itself (with whatever editor you want), just add a top margin to the image, let's say 80px white colour.
This is the easiest solution. If you provide me more details were this background is generated/paced I may be able to give you the CSS solution.
I'm really new in this so, maybe you can help me!
I'm trying to change a background of this css, but I could not. Help me please!
P.s I just copy an example of other web page, so don't be extrange if you see something wrong please. (if you can't see the web page, maybe you should take a look over here https://www.charitywater.org/donate/#step-1) Just want to change the first big background and the last big background.
The css code:
When you say "first big background", I am assuming you mean the people in the background. If so, go into your style sheet (https://d555kv4p2mtwa.cloudfront.net/_site/styles/stylesheets/microsites/donate.css?v=10)
and modify the background property for .form-general{}
I was able to detect that image right away with Developer Tools for Google Chrome.
Today i was customizing my website and i remembered a very nice CSS effect i saw a few months ago. I didnt find it on my Bookmarks.
The website had a Large logo with colors moving on it. After going on the Source Code, i saw that the Logo was a Black PNG file, and there was another Image, an Color Circle sppining on it, but there was some overlay effect that the colors of the circle only appear on the black parts of the logo.
anyone knows the website or how can i use this effect? to make some image appear only on non-trasparent parts of another image?
Thank you and best regards
Sounds like it might be CSS blending modes, which were introduced by Adobe and currently work in some builds of WebKit with a -webkit prefix.
MAJOR UPDATE:
I have a PNG fix working on the site. When I remove the PNG fix the red cross and border disapear. What's odd is that the problem only seems to do it with this particular image. There are other Alpha Blended PNG's on the same page that render fine.
The image is not broken (you can see it) nor is it a link. But IE6 and 7 both put a box around it and a red cross on it. It also strips the styling.
UPDATE: The image is NOT a background image, and the image is definitely not broken. You can actually see the image, works fine in Safari, Firefox, Chrome and Opera.
It's a plain old regular image tag
<div class='container'>
<img src='../images/leader_concierge.png' class='page_leader' width="917" height="257" />
</div>
here's the css
.page_leader { margin: 10px 0; }
and here's the exact same thing in safari
You are missing the replacement gif.
All PNG fix methods require that a transparent gif be available to replace the png image, it's part of how the substitution works. If that gif is missing, then you get this broken image appearance even tho the PNG draws fine.
In the case of iepngfix.htc, it expects the file to be at /images/spacer.gif
In firefox with the Web Developer Toolbar you can view broken images. In firefox the image would still be broken but you wont see anything like IE6 and IE7 show.
Note, that in xhtml (well, you closed the img tag) you should use " instead of '.
If you are using iepngfix.htc you need to open it up and set the blank image path. The image needs to be a 1x1 .gif.
Looks like I was just barely beaten to the punch.
Yes, I had the same problem, and it was also with iepngfix.htc which allows transparency in IE6.
Yes, the required accompanying gif image was on the images folder, as instructed.
So I went into the htc file and entered the exact link and now everything works perfectly!
Firefox and 'the other browsers' handle broken images more elegantly, but the image almost certainly is broken - they just aren't rendering it. Perhaps try to get in the habit of regularly checking your site logs for 404s, as it's not always obvious that you have a broken image in a contemporary browser.
Edit: Given your recent discovery, perhaps open the pngs in question in something like TweakPng - you may find that there are chunks causing this behaviour that you can safely remove. Compare the effected pngs with pngs that work properly and remove the offending chunks.