why -webkit-mask-image not working without server support? - html

I want to mask an image in a transparent png image to show the shape I am working on. Still, WebKit-mask-image is not working when I open it directly from the Folder as index.html. Still, the Webkit-mask image is working when I open it using VS Code live server but is there any alternate solution for this or is there any alternate code instead of this?

Related

css background images are not showing in chrome but working on atom live server

in my project images are not showing in chrome web browser but working properly in atom live server,
image location- \Documents\myapp\images
CSS folder location-\Documents\myapp\style.css
this is how i'm directing an image - background-image:url('../images/img1.jpeg');
Instead of
background-image:url('../images/img1.jpeg');
Use: background-image:url('images/img1.jpeg');
Your CSS file is in \Documents\myapp\style.css and image file inside \Documents\myapp\images, From CSS file you do not have to go back to parent folder using ../
Maybe a caching issue, try press F5 while holding shift button

HTML automatically rotating images on render

Can someone help me here. I have a PHP script which uploads an image and resizes it, and then an HTML page which displays the image. However, for some reason the HTML is rendering a rotated version of the image, although I can't for the life of me see why.
<div style="height:75px;width: 116px; background: url(http://viralsmods.com/pokeroulette/content/images/7.jpg);"></div>
Run the above snippet to see it in action. The image it is linked to is here: http://viralsmods.com/pokeroulette/content/images/7.jpg.
Any idea on why this could be?
The problem is related to EXIF (Exchangeable Image File Format) and the web browser
Basically, EXIF is a standard for holding file info such as which way an image should be rotated. Photos taken with (older) devices that do not use EXIF may not appear correctly in your web broswer.
The solution is to bring this file into photoshop, rotate as needed, save, then reupload for your site.

Including a gif in html page

I have no idea why a simple gif image is not being loaded properly. In the html code I have the usual
<img src="/img/loading.gif" alt="Loading" title="Loading" />
and the file is in that folder. The weird thing is that if I place there /img/logo.png the image is loaded properly.
The filename is correct, I've even copied and pasted it renaming the original files.
PS tested on Firefox 12, Safari 6.0.2 Chrome 23.0.1271.95 (all for Mac)
It was probably a corrupt gif. Your code should work with some other gif. If you really want to get the corrupt gif to work, try opening it in an image editor program and then resave it as gif (or any other format).
Silly question, but what does your gif look like? Is it transparent, or white against a white background?
One possible way to diagnose the problem would be (in Chrome or Firefox), to press F12 to bring up the developer tools and look at your img element to see if the image has loaded in the DOM.
I think the problem was with the gif file, probably somehow broken. I got it from a random resources web site and downloaded from it.
I've tried with a new file got from http://www.ajaxload.info/ now with the code unchanged it works fine.
Edit: the "broken" gif file was working fine elsewhere in the system (e.g. quicklook).

Problems adding Background Image when creating theme for Chrome

I am presently following this guide: http://code.google.com/p/chromium/wiki/ThemeCreationGuide
to create a theme for Google Chrome.
Everything seems to work fine, the only problem i have is applying a background image to the browser. The "theme_ntp_background" that supposed to point and load the background-image seems not to be working :(
Any ideas on what may be wrong? it is definitely not the file path, i ensured this was correct.
Thanks!
Chrome can only load png images in themes, so make sure that the image you're trying to use is a png file.
It would also help if you posted the code found in the manifest file for this theme.

image problem with dreamweaver

i'm trying to create a newsletter in a single html file, which will be loaded into outlook express and sent out as a mail.
i have like a few images embedded onto the html file but 2 of them cant be loaded for preview in design mode. there is no problem for the rest of the images. those images that cant be loaded has the grey color icon.
the directory for the images are the same. i have copied and pasted the absolute directory for the images that cant load and it doesnt work.
the images loads fine when executed from the html file that was uploaded to the webserver.
edit:
it only loads fine in firefox, and not ie!
i need to get the newsletter out tomorrow, any assistance here?
thanks in advance.
That sounds like a transparent PNG. If you are using an old version of IE, you are out of luck for the HTML email. Try using another type of image (8-bit PNG, PNG with no alpha values, JPEG, GIF). Open the image in your editor and save it as an 8-bit PNG, for example. An 8-bit PNG can only have binary transparency. You may have to redesign the page/email.