I added .webp image to my codebase and I am using it as background image for a div. For some reason, the image appears as plain black in the rendered website, even though when I preview it in file exploerer, it shows the actual image. Note this is an animated .webp (converted from .mp4).
Also, note that I am using git-lfs for .webp files. And I feel like this issue started cropping up once I started using git-lfs.
Related
I'm using html, css, php and wordpress.
Currently I'm using a background image that is 1.8 mb.
The website loads pretty well (under 2 seconds).
However during the load of the website, the background image is the last thing to load,
and loads in parts.
e.g. you see half of the background image in black and white, then the next half which is the final image.
My question is
How do i make it so the background image loads as a "whole" rather than in sections and in black and white then colour?
also Is the image size too big?
and extra question How do i debug this in chrome dev tools? i.e. how can i see whether or not the image is too big in chrome dev tools.
I tried recording the load in "performance" and the only information i got back, was that it took the image 1.5's out of the 2's to load.
I've uploaded an image which is not blurry at all but once I display that image on the home page it looks like image 1 (very blurry).
image 1
The original image is not blurry at all. The graph was created in excel, I zoomed up real close, took a print scr (as opposed to snipping tool as with snipping tool it does get blurry) then put it in paint and cropped it out and saved it as a PNG.
Any suggestions?
If you put your image as it is and don't change the dimensions of your image, its's should looks fine (not blur). but if you change your image dimensions and force image to bigger than it's original size, it must be blur.
for more detail please mention your webpage link.
I have removed the background of an image I am using in photoshop. Even when i export the image in flash theres no white background but everytime I add a motion tween to the image, the white background comes back so when I put it on my website you can see the white background.
Is there anyway to stop it from doing this
Firstly, ensure the image does not include a background. Saving as a PNG often helps importing into Flash.
Then ensure the following publishing settings:
Choose File > Publish Settings. Make sure that HTML is selected.
Select HTML.
Choose Transparent Windowless from the Window Mode menu to make the SWF file's background disappear in browsers that support this feature.
Publish the document.
https://helpx.adobe.com/animate/kb/transparent-background-swf-file.html
I have a GIF picture with transparency. When I place the picture in a regular HTML the transparency shows fine. But when I load the same picture as a logo in a PHP software, the picture doesn't show the transparency but a white background.
The only strange thing I find in the page on which I load the picture which doesn't show the transparency, it has a gradient color background in CSS. I don't know if it's related to the problem or not.
What reason could there be that the GIF shows the transparency in some pages and in other pages it doesn't? Whatever the reason is, what can I do to make it work where I need it?
what can I do to make it work where I need it?
I would use a .png instead a .gif as logo you will probably load it through css
(background: url(path/.png) no-repeat; , I know it does not answer the why but solves the issue for sure.
If a .png is too big in your opinion use the online great tool it uses even advanced lossy compression for PNG images and preserves full alpha transparency
It's possible to embed pdf files, but I would like to customize it a little bit more.
For example, look at this jsfiddle, with the following code:
<object data='https://dl.dropboxusercontent.com/u/58922976/test.pdf#view=FitH&scrollbar=0&toolbar=0&statusbar=0&messages=0&navpanes=0'
type='application/pdf'
width='72%'
height='100px'>
<p>It appears your Web browser is not configured to display PDF files.
No worries, just <a href='https://dl.dropboxusercontent.com/u/58922976/test.pdf'>click here to download the PDF file.</a></p>
</object>
<object data="http://tinyurl.com/punrrgs" width="72%"> </object>
I would like to be able to get the exact same result for the pdf as I have with the svg. They both look very similar now (in chrome), the only difference is this grey/brown background of the pdf reader. Is it possible to hide this background ? Or maybe set this background to white so you can't notice it ?
Edit: I was thinking that using a white border and negative padding this could have worked, sadly negative paddings are not allowed. Any other creative way to get a white border in the place the grey adobe reader border is now located.
You can switch plugin into FullScreenMode(Ctrl + L) and change Full Screen Appearance (it will work on a client side only, you can't do it via parameters link)
Background Color Specifies the window’s background color in Full
Screen mode. You can select a color from the color palette to
customize the background color.