In a web page there is a gradient (in body tag) using CSS3. Moving next and adding image (logo with site name) I realized page gradient and image both has different colors. It is because web page has a background generated by CSS3 and image has a fixed color as background and both are different.
What I have tried ?
add image as background of a div and also as a img tag.
applying gradient on div
but no luck.
How it can be managed ? Please guide.
Thanks
Cant you just save the text of your logo as a .png with a transparent background? If you've added the gradient to your body tag it will change when the browser window expands and contracts
you have to save your logo image with transparent background....you open the psd file of the logo and disable the visibility of the background layer and then save it as a png image.
Related
I've build a simple web page which includes a background image in the body tag and the background-size is set to cover in css file.When i resize my chrome window the original image gets displayed adjacent to same image and so on just like a collage.How can i solve this issue?
Add following CSS code to your stylesheet
background-repeat: no-repeat;
My svg image renders on it's own, but will not display on lightbox. In other words, if you click the link, lightbox opens up but NO image. If I replace the svg with a png version, it shows. And like I said before, if I stick the svg image anywhere else on the site without using lightbox, including opening it on a page by itself, it renders perfectly. Are there any svg limitations with lightbox that I'm not aware of?? Thanks!!!
is there a way to make the background image of chrome theme resize with the height of the window? If so, can I also make the image resize with the height until it hist a certain ratio, and then resize with the width of the window?
It's not possible. Chromium source code doesn't have any stretching/sizing modes as you can see: theme_properties.h, theme_properties.cc and theme_service.cc
I've tried specifying an SVG image with width="100%" height="100%" for the background but it wasn't rendered, looks like only raster images can be used (WEBP, JPG, PNG, etc).
I tried use jpeg format, it resized itself, without anything added to manifest.json
There's an svg image of Alabama's state flag # http://en.wikipedia.org/wiki/File:Flag_of_Alabama.svg
The caption says "This image rendered as PNG in other sizes." I downloaded the 1,000-pixel size #
http://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Alabama.svg/1000px-Flag_of_Alabama.svg.png but it won't display on my web page. I opened it in Photoshop, copied it into a new window and saved it with a new file name, but it still doesn't display.
So I guess I was wrong when I thought "rendered as a PNG" means an image is a png. It's actually a SVG...with a .png extension?
Anyway, I just wondered what's going on here and what I need to do to download such images as pngs. Or is the only solution to take a screenshot?
The PNG file you linked to (the ".png" link) is not an SVG. It is definitely a PNG.
I don't know why it isn't displaying for you, but it has nothing to do with SVG.
To get the image as .svg just copy the source of the page (of the image) to an editor. Now save it as an .svg image
I'd like to make my SVG images interactive, with a zoom box that can be moved around by hovering or clicking the mouse in certain areas. Can this be done in a single SVG file, so that I can embed this interactive SVG image in a pdf?
You mean like this? Zoom and Pan