Is it possible to apply a PNG image and a gradient to a single div background?

I am looking to create a div that will have a css gradient as a background, but also a PNG image to go on top of that gradient. This div will also contain text.
So the desired stacking order is :
Top : Live Text
Middle : PNG image
Bottom : CSS Gradient
Question : Can this be done with only 1 div?
I know that if you specify a background image AND a background color on the same div, you will get both, and it works quite well. But it seems much more complex to do it with a gradient instead of a flat bg color.
If it's do-able, what would the syntax be?
Thanks!

Hi
You could also use multiple background images, though this will not work in IE8 or below, (use Nancys 'stacking order' as a fallback but specify these first).
#multipleBackgroundImages {
background-image: url(gradient.svg),
url(your_image.jpg);
background-position: top left, bottom right;
background-repeat: no-repeat;
see also - http://www.css3.info/preview/multiple-backgrounds/
I specify an svg as the first image as this will work across all modern browsers.
For IE8 or below -
You could use an IEFilter for the gradient and an image over that, providing your image is not too large, or use the IEFilter 'alphaImageLoadeer' to place the image in the top r/h corner of the div, with the gradient below.
PZ

Similar Messages

SuperImpose two images and save it as a single image[urgent]

Hello..
Can anyone tell me how do we superimpose two images and save it as a single image.The image on the top is smaller in size in my case.
Please Help..

import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.*;
import javax.imageio.ImageIO;
import javax.swing.*;
class TwoBecomeOne {
    public static void main(String[] args) throws IOException {
        BufferedImage large = ImageIO.read(new File("images/tiger.jpg"));
        BufferedImage small = ImageIO.read(new File("images/bclynx.jpg"));
        int w = large.getWidth();
        int h = large.getHeight();
        int type = BufferedImage.TYPE_INT_RGB;
        BufferedImage image = new BufferedImage(w, h, type);
        Graphics2D g2 = image.createGraphics();
        g2.drawImage(large, 0, 0, null);
        g2.drawImage(small, 10, 10, null);
        g2.dispose();
        ImageIO.write(image, "jpg", new File("twoInOne.jpg"));
        JOptionPane.showMessageDialog(null, new ImageIcon(image), "",
                                      JOptionPane.PLAIN_MESSAGE);
}

Load PNG Images and draw on them.

I have to load a png image in a JPanel and then draw on this image. How is the way to do it? I've tried several ways but I don't achieve nothing.

Hi,
Re:
<BLOCKQUOTE><font size="1" face="Verdana, Arial, Helvetica">quote:</font><HR>
...I guess the conclusion is even though you can use PL/SQL to get the
PNG images into the database - like we've done here. There is no real
point, because one cannot retieve them with standard Java Intermedia
calls.
<HR></BLOCKQUOTE>
On the contrary - I just grabbed a PNG image from our 9i test system, uploaded it using the photo album servlet demo to my 8.1.7 database (which doesn't 'do' PNG) and retrieved it using the same servlet. My Netscape came with the QuickTime Plugin, so the PNG image got displayed as would any other image.
OK, I admit I had to admit modify the demo a little, but it is just a sample after all, not a full-blown, production web application. For upload, all I had to do was trap the exception raised when it tries to create the thumb-nail. There were 2 changes for retrieval. For the thumb-nail page, if there isn't a thumb-nail, ie getContentLength() == 0, then it displays the text "[view image]" instead of the thumb0nail image. For the full-size page, it only generates the height and width tags if getHeight() and getWidth() both return non-0 values. I didn't have to modify the method that actually delivers the data at all. It just uses the BLOB, MIME type and content length (which you sent when you loaded the image, right?!). The height and width tags aren't required. They just speed things up if present, because the browser knows ahead of time how much space to reserve, so can keep rendering the page, rather than wait for the image to arrive.
Re:
<BLOCKQUOTE><font size="1" face="Verdana, Arial, Helvetica">quote:</font><HR>
Can't begin to explain how sad this makes me :(
<HR></BLOCKQUOTE>
Cheer up! :-)
Simon
null

Load png image and save it

I am loading a png file and saving it again with following code. The newly created image file is smaller size and poorer quality. How can I retain size and quality of the image?
===========================================
File input = new File(imgFilePath+"img1.png");
BufferedImage im = ImageIO.read(input);
Graphics2D g = im.createGraphics();
File output = new File(imgFilePath+"out2.png");
ImageIO.write(im,"png",output);
===========================================

Would a moderator please change this topic back to not solved.
@Noel: I tried exactly what you said, copying the image to itself so the source and target would be the same size. It does not work. I do understand that you respond to many posts and can't actually try to reproduce every issue. However, in this case, if you did try it on the posted image you would see that the problem is as I described it.
@Acidiclnk: Thank you for reproducing the problem. Unfortunately, I checked your response as the correct answer, but now realize that it does not solve the problem. What you suggest shifts the position of the image from its as loaded position. Then, as you said, copied images do register with the original. The problem is, the shifted image no longer lines up with the other maps of my texture.
It took me awhile to find the commands you described, as they are a bit different in my CS4 ("Align Layers to Selection > Vertical Centers", etc). When I tried them, the pasted image was correctly registered with the original. Unfortunately, as I mentioned, the image is no longer aligned with the other maps of the texture.
For this particular case, since there were large, uniform areas in the image, I temporarily added fiducial marks to the problem image and one of the other maps. Then, after copy/paste, I moved the shifted copy until it's fiducial was aligned with the other map, then removed the fiducals. (I could not use MTSTUNER's Duplicate Layer suggestion, since duplicating it to a new image created a new image with the same problem as the original).
To summarize: PhotoShop loads this image in one position, but aligning the centers or copy/paste moves it to another position. I would be happy to know why this is so. I did verfy that it's unique to PhotoShop as copy/paste works without the shift in another graphic editor. Any insights would be welcome.

Is it possible to use airplay for image and sound via bluetooth speaker for sound?

I want to play my presentations using airplay, and it works perfectly, but i tried to use my bluetooth speakers at the same time and it doesn't seems possible! Each time i choose the bt speaker on system preferences it disconnects the airplay. Any suggestion?

Hello, you'd need another Router, or at least a different range of IPs on the Router for Wired & Wifi, or at the very least specifically mount Windows® shares by IP.
10.5.x/10.6.x/10.7.x instructions...
System Preferences>Network, click on the little gear at the bottom next to the + & - icons, (unlock lock first if locked), choose Set Service Order.
The interface that connects to the Internet should be dragged to the top of the list.

Applying filters to PNG Images

Hi
I would like to know how to implement filters or Operators such as Alpha filtering,LookupOp,ConvolveOp (or any kind of filter which makes the image blur or partially transparent) to a PNG Image and then revert back to the original image.
Thanks,Laksh

1. Have you tried doing the tutorial?
2. What do you mean by "revert back to the original image" -- are you trying to find filters that are the inverse of other filters?
Here's a demo. I create a buffered image, write it out to a png file and read it back in.
Then I convert its type (the blur filter didn't want to work, otherwise!!). I run the
image through the filter and save it to another file, displaying the images along the way.
import java.awt.*;
import java.awt.font.*;
import java.awt.geom.*;
import java.awt.image.*;
import java.io.*;
import javax.imageio.*;
import javax.swing.*;
public class Example {
    public static void main(String[] args) throws IOException {
        File file = new File("temp.png");
        ImageIO.write(createSampleImage(), "png", file);
        BufferedImage source = ImageIO.read(file);
        System.out.println("type = " + source.getType());
        BufferedImage converted = convertType(source, BufferedImage.TYPE_INT_RGB);
        BufferedImage blurred = blur(converted);
        ImageIO.write(blurred, "png", new File("blurred.png"));
        JPanel panel = new JPanel(new GridLayout(0,1));
        addImage(panel, source, "from png file");
        addImage(panel, converted, "TYPE_INT_RGB source");
        addImage(panel, blurred, "blurred image");
        JFrame f = new JFrame("Example");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.setContentPane(new JScrollPane(panel));
        f.pack();
        f.setLocationRelativeTo(null);
        f.setVisible(true);
    static void addImage(Container cp, BufferedImage image, String title) {
        JLabel label = new JLabel(new ImageIcon(image));
        label.setBorder(BorderFactory.createTitledBorder(title));
        cp.add(label);
    static BufferedImage createSampleImage() {
        Font font = new Font("Lucida Bright", Font.ITALIC, 72);
        String text = "Sample Text";
        Rectangle2D bounds = font.getStringBounds(text, new FontRenderContext(null, true, true));
        int w = (int) Math.ceil(bounds.getWidth());
        int h = (int) Math.ceil(bounds.getHeight());
        BufferedImage image = new BufferedImage(w,h,BufferedImage.TYPE_INT_RGB);
        Graphics2D g = image.createGraphics();
        g.setFont(font);
        g.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
        g.setRenderingHint(RenderingHints.KEY_FRACTIONALMETRICS, RenderingHints.VALUE_FRACTIONALMETRICS_ON);
        g.setPaint(Color.WHITE);
        g.fillRect(0, 0, w, h);
        g.setPaint(Color.BLACK);
        g.drawString(text, (float) -bounds.getX(), (float) -bounds.getY());
        g.dispose();
        return image;
    public static BufferedImage convertType(BufferedImage source, int type) {
        if (source.getType() == type)
            return source;
        BufferedImage result = new BufferedImage(source.getWidth(), source.getHeight(), type);
        Graphics2D g = result.createGraphics();
        g.drawRenderedImage(source, null);
        g.dispose();
        return result;
    static BufferedImage blur(BufferedImage image) {
        BufferedImage result = new BufferedImage(
                image.getWidth(), image.getHeight(), BufferedImage.TYPE_INT_RGB);
        float ninth = 1.0f / 9.0f;
        float[] kernel = {ninth, ninth, ninth, ninth, ninth, ninth, ninth, ninth, ninth};
        ConvolveOp op = new ConvolveOp(new Kernel(3, 3, kernel), ConvolveOp.EDGE_NO_OP, null);
        return op.filter(image,result);

Safari on iphone won't render cgi generated png images with query strings

I've got a cgi app functioning as a web service that generates png images and serves them up as part of another app which marshals them up in HTML.
Here's the image stand alone:
http://cybre.net/maps/mapgen.pl.png?WIDTH=1024&HEIGHT=768
and here's how I marshal it:
<IMG CONTENTTYPE='image/png' SRC='http://cybre.net/maps/mapgen.pl.png?WIDTH=1024&HEIGHT=768'>
It seems to work on firefox, epiphany and galeon web browsers for linux, and my windows friends say that internet explorer renders them okay as well.
My only apple hardware is my iphone, and safari pretends that there is no content when it renders the HTML page. Safari on the iphone does not render even using a direct link.
The png is generated by perl mapscript, $img = $map->draw;
print "content-type: image/png\n\n";
$img->write;
close(STDOUT)
On the previous version of the iphone firmware, and before i factored the image generation out into a web service, the iphone was able to render the png image successfully.
Is this safari wierdness where it gets cranky that there is
QUERY_STRING info after the .png? mapgen.pl.png?foo=bar ?
If so, are other browsers just being hyper liberal in what they accept and safari is playing by the rules or is this a bug in safari?
thanks in advance,
-marc

it turns out that safari's handling of png is broken, the problem reproduced on both iphone and mac safaris.
in changing the format to gif, it all works okay.
does apple allow mortals to file bugs against safari?

Trouble converting powerpoint files with png images to pdf-Can someone help?

Hello all,
In my line of work, I create and modify large sized posters that are created in powerpoint. I would have the files print ready by converting them to pdf. I usually have little to no issues executing this. However, I have been dealing with an issue of converting ppt files with png images. The size of the ppt is typically a 42x56 file. The several ways to convert to pdf produces an error each time. Png images are very useful as they provide much clarity vs jpegs or tiffs. The 3 ways I have tried below are:
A) File>Print>Adobe PDF>High Quality print settings/300dpi results to an error message that says:
     "Windows cannot print due to a problem with the current print setup. Try one of the following:
     *Check the printer by printing a test page from Windows.
     *Make sure the printer is turned on and online.
     *Reinstall the printer driver"
     A blank pdf opens up (Selected to open file after publishing)
B) File>Save as> Change file type as a pdf results in nothing happening. No pdf is produced.
C) Acrobat>Create PDF results to an error message that says: "An unexpected error occured. PDFMaker was unable to produce the Adobe PDF."
Again, this all happens with ppt files with png images. I took out the png images and attempted to convert to pdf, and the pdf is produced!
Can anyone provide any assistance in creating pdfs with png images or what settings I need to adjust? I am able to covert every other image type (jpeg, tiff, bmp), except for png images.
I am using Microsoft Office 2010 with Adobe Acrobat X on Windows 7 (This happened on Windows XP as well).

>I have a 48 slide presentation that has a small .png image in the "slide
>master" so it will show up on every page.
PowerPoint only has to store one instance of the image even thought it is
displayed on multiple slides. But Acrobat can't do the same, the image has
to be stored for every page that it appears on, so that would explain the
larger file size.
Acrobat is supposed to be able to optimize the storage of common background
images (at least that's the message I see when I do a "Save as..."), but I
have yet to see it to work. Maybe it depends on the application the orginal
file is created in and the PDF conversion method used.
Adding the image into a PDF file later as a watermark instead may be a way
to keep the size down (then it really only does store the object once),
though I believe that watermark images will appear in front of everything
else on the page (not sure if that's a problem for you, it depends on
whether any text or objects in the presentation ever appear in front of the
image).
What are the dimensions and resolution of the image in PowerPoint? You may
be able to go as low as 75 dpi and not notice a difference, it depends on
whether the image contains any areas of high contrast or text.

White box around png images in Final Cut Express 4.0

I was putting in some muzzle flashes into my video with final cut express 4.0, they were png images and there was a white box around the muzzle flash after i used the composite mode screen effect, if anybody knows what the problem is i could use the help.

I inserted a 3D bullet into my movie and it had a black background. I used Composite Screen and it it worked, but it made the bullet slightly transparent. What should I do?

Why the border of a Png image is seen on final render?

Hi, my question is that i made a png image first in photoshop and used it in a AE composition. It has a background with ramp and also use Trapcode form. The thing is that when i render, the border of the image is visible (eventhough it doesnt have border because is a png), Then i take that image to illustrator to export from there, and the only thing that changed is that the line, from continuos changed to discontinuous (like seen in the image here). So the question is what can be happening? I inserted two png images and both generate the same issue and it doesn't matter on which order of layer is at. In the second image that i've uploaded here is better seen how the border appears in the composition...
Thanks

Well, thanks everyone for your answers. he thing is that i went to what Rock suggested but Interpret footage wasn't active so couldn´t hange anything there.
The next step, Photoshop and lke bogiesan said, i was using a png that cames from and image with white background, so switchng it to black background and then make the Png do make the trick. Thanks, this confirm that if one doesn´t have the answer(i coldn´t figure that was the origin background of the image), perhaps another do have the clue, so issue solved.
Regards

Missing images and not able to use copy and paste anymore - just blank rect

Hello!
I've a problem that really scares me.
I use severall png and pdf images. But at one point keynote looses the media and just displays these grey rectangles instead of some images. I tried to figure out if it just happens with pdf images and replaced the missing pdf images through png24 images with transparency. It first worked fine (they showed up) and then it tells images can not be saved. If I open the presentation again, the images are missing. And it seems that the more images and slides i put in the presentation, the more images are missing…
But there is more: I even can't copy and paste these images anymore. If I try to copy one of the images I just have replaced (because they have been lost by saving), it just pastes the blank grey rectangle instead of the image.
This really is a problem because I now have to repetitive tasks (like same animation for the same image in the same size) over and over again. And when I save the doc – they are al gone again…
It really scares me and I don't have an idea how to solve this.
It also happens, if I repleace an pdf image with an png image and than try to copy this new png image. However I am able to drag the image from the Finder again.
I am working on a PB G4, 1.5 GHz, 1 GB RAM.
My Keynote Version is 3.0.2.
The Keynote Dokument is saved and opened from a G4 X-Serve wich is only used by Macs (so no Windows Filesystem anywhere). I still have anough space on both, my local and the server volume. I don't transfer the Keynote document. So it should not be a problem with the names on the files… And the files are just exported from Adobe Illustrator (png 24 files with "save for web" and the pdf files are saved as Illustrator pdf) – so they should really be fine and not corrupted…
At this time the Keynote document has a size of 179 MB (because of a video) and only 16 slides. And the theme was built from scratch – so no import from Powerpoint or so…
I looked through the Keynote preferences and found a thing like (sorry self-translated from german version to english) "scale placed images to slide-size". I wondered if keynote saves a copy of the sacaled image after that and corrupts the image itself? But I don't think so.
I've had these problems with earlier versions of Keynote, but it occured just sporadically and I could solve it through pasting it again. But this time I can not solfe it anymore.
Does anybody encounter same problem? Or has a hint?
I really would appreciate, because I have to finish the presentation very soon and are not able to work properly with that. Furthermore, I am scared of saving and opinging the presentation again, because the lost files can not be replaced…

I now have a hint:
As a colleague said, he encountered some problems with usagerights on our fileserver (XServe). He said he wasn't able to read files he put on the server himself again…
If this is true, the same could have happened to Keynote for placed images, as Keynote writes these images as separate files in the doc package…
I will try to work on my local volume and see if it solfes the problem.
But sooner or later I will have to place the whole thing on the server again…
Do you think this is the reason?

Large Image and Poplet Styling / Jquery?

Is it possible to get the large image and poplets to function like this example? Does anyone have a link to a tutorial or guidance for a non jquery guru? http://www.sears.com/connected-apparel-women-s-lace-cocktail-dress/p-031VA51591901P?prdNo= 1&blockNo=1&blockType=G1

It is possible to achieve that with some jQuery, but I don't have a code for you that will do it, nor does BC have a tutorial written on how to achieve it. But you need to use JavaScript to override the default behavior and then add some code that will display the image inside the main image container on hoverover. These guys have implemented something like that, but their tutorials are not free http://kiyuco.com/tutorials/advanced-e-commerce-poplet-gallery
Cheers,
-mario

No png previews, and mp3 aren't recognized

Look that:
I've no previews for png images, and no icons for mp3 files (with any gnome icons theme), and all audio applications doesn't recognize that my mp3 are mp3 !!
In the screenshot totem doesn't see my mp3 in the directory
EDIT: Assuming tha I'm using gnome 2.22...
Last edited by brainwasher (2008-03-28 17:19:31)

kwidzin wrote:Try to remove local mimetypes.
how ?
EDIT: I resolved with rm -r .local/share/mime
Thanks
Last edited by brainwasher (2008-03-29 16:10:39)

Reducing PNG size and downloading AAC files .

Are there any tools available to reduce the size of PNG Image and is there any site from which i can download AAC Files.

[url http://advsys.net/ken/utils.htm]PNGOut and [url http://pmt.sourceforge.net/pngcrush/]PNGCrush

Is it possible to apply a stroke effect to a Photoshop image in After Effects?

Hello,
I've imported an image (a maze) from Photoshop into AE, and I want the image to appear as if it's being drawn in using the Stroke animation. Is it possible to apply some kind of path along which the image can "fill in"--similar to how you can do this with text? I didn't see a way to convert the image into a shape layer on which I could apply the Stroke effect, either.
Thanks to everyone who's been so helpful in these forums--I've gotten a lot of questions answered by y'all!
meredith

Followed everything you said up until using the solid as a track matte, where I got a little confused.
The effect worked more or less how I wanted when I set the starting value of the stroke at 100% and set track matte of my original image to Alpha Inverted. When I did this, it gave the effect that the solid was disappearing to reveal the original image, if that makes any sense.
Is there anyway to adjust the brush shape? Right now it is a circle, is it possible to change it into a square? The circle brush gives an awkward edge line as the lines of the image begin to appear with the stroke effect.
Thanks!

Is it possible to apply a PNG image *and* a gradient to a single div background?

Similar Messages

Maybe you are looking for

Is it possible to apply a PNG image and a gradient to a single div background?