Image with transparent frame, how to achieve that?

Hi there, I wonder if you can help me at all. On my website I am displaying some pictures in landscape mode which works absolutely fine. The size is 640x450px. I have run into a problem today when tried to display a portrait picture which has a size of 450x338px. I provide a link to the website so that you can clearly understand the problem if you don't mind (I hope it is ok to include links to other website for the ssake of clarity). http://antobbo.webspace.virginmedia.com/petras/test/egypt.htm If you click on the first thumbnail everything is ok but then click on the second one and you will see the problem. A quick solution would be to copy and paste the 450x338px picture in a canvas 640x450px big making sure the canvas is transparent so you can see through. Is this achievable at all or am I talking nonsense?
thanks

Yes, you can paste into a landscape canvas but you'll need to save as PNG to maintain transparency.
It would be more efficient to tweak the HTML/JS to show the portrait-oriented image as centered.

Similar Messages

  • Framing image with transparent background png frame

    hi,
    i'm trying to find a way to frame images with transparent background png frames...
    what i'm doing now is
    1-drawing my image on a panel
    2-creating a 2nd image using the frame's filename, stretching this 'frame-image' to a size slighlty larger than that of my main image and drawing the 'frame-image'
    the problems with this method are:
    1-depending on the width of the frame, the frame sometimes hides parts of the image (thick frame), and sometimes there is a gap between the frame and the image (thin frame).
    2-if the image file containing the frame is larger than the frame (Ex: The image is 300x300, the frame is centered in this image and is 200x200; as opposed to the image is 200x200 and the frame takes up all the space), when i position the 'frame-image' near the top left corner of the image i want to frame, the frame appears at the wrong place (shifted down and to the right). This is due to the fact that i'm placing the top corner of the created 'frame-image' and not the frame, who is not in the top corner of my 'frame-image'.
    Is there a way to do what i'm trying to do???
    My ideas (which i don't know how to achieve are)
    1-To 'analyse' my transparent background png file and
         1-only keep the frame,
         2-calculate the frame's thickness
    OR
    2-Let java do the analyzing for me and tell it to frame my image with the frame in the png file
    please feel free to ask for more explanations if my description/question is confusing,
    thanks.

    Have you looked into the Border interface? If what you really want to do
    is put a custom border on a component, you may be able to do it this way.
    Anyway, here is some code that stacks and centres 2 images. It's not hard to do.
    import java.awt.*;
    import java.awt.image.*;
    import java.io.*;
    import java.net.*;
    import javax.imageio.*;
    import javax.swing.*;
    public class Example extends JComponent {
        private BufferedImage backgroundImage;
        private BufferedImage foregroundImage;
        public Example(BufferedImage backgroundImage, BufferedImage foregroundImage) {
            this.backgroundImage = backgroundImage;
            this.foregroundImage = foregroundImage;
        public Dimension getPreferredSize() {
            int w = backgroundImage.getWidth();
            int h = backgroundImage.getHeight();
            return new Dimension(w, h); //assuming this is bigger
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            int w = getWidth();
            int h = getHeight();
            //paint both, centred
            int x0 = (w-backgroundImage.getWidth())/2, y0 = (h-backgroundImage.getHeight())/2;
            g.drawImage(backgroundImage, x0, y0, null);
            int x1 = (w-foregroundImage.getWidth())/2, y1 = (h-foregroundImage.getHeight())/2;
            g.drawImage(foregroundImage, x1, y1, null);
        public static void main(String[] args) throws IOException {
            URL url1 = new URL("http://weblogs.java.net/jag/Image54-large.jpeg");
            URL url2 = new URL("http://weblogs.java.net/jag/DukeSaltimbanqueSmall.jpeg");
            JComponent comp = new Example(ImageIO.read(url1), ImageIO.read(url2));
            final JFrame f = new JFrame();
            f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            f.getContentPane().add(comp);
            f.pack();
            SwingUtilities.invokeLater(new Runnable(){
                public void run() {
                    f.setLocationRelativeTo(null);
                    f.setVisible(true);
    }

  • AI CS6, ScriptUI, and images with transparency

    ESTK for AI CS6 is already known to create problems (e.g. http://forums.adobe.com/message/4711851).
    It’s possible that, in dialogs created with ScriptUI, AI CS6 also fails to display images with transparency properly. On my (Mac) system at least, such images appear with an aliased edge.
    If this is true it’s doubly unfortunate, since with CS6 Adobe chose to make AI’s background interface colour adjustable—which makes interface images with transparency something of a requirement.
    One workaround, which sadly negates the whole business of variable interface background colour, is to create dialog images with a background colour instead of transparency, and then force the dialog to display with the same background colour. For this technique we’re indebted again to Peter Kahrel’s invaluable ScriptUI for Dummies (www.kahrel.plus.com/indesign/scriptui.html). Page 69 of that publication shows how to do this—for example:
    win.graphics.backgroundColor = win.graphics.newBrush(win.graphics.BrushType.SOLID_COLOR,[0.5,0.5,0.75]);
    The process is, to say the least, quirky: and, as Peter mentions, poorly documented by Adobe. But I hope it may be helpful to others trying to use ScriptUI.
    The more I see of AI CS6 the more I like CS4! Can anyone tell me if I’m likely to miss any features or run into problems if I develop scripts for CS6 using ESTK for CS4?

    Yes this is where things can quickly become very complex too… I for the most part script for a particular version… Im almost certain scriptUI arrived with CS3 so you will need to make checks for this… There are a couple of differences between how they look from one OS to another… Oh yes a test my script cloud… just floated past the window or was it a flying pig hard to tell… I have long thought purchasing a version of an app should qualify you access to previous versions but thats never going to happen… You may get this on some expensive developer program but not for part time scripters…
    BTW if you have an old G5 knocking about… Then you can now get CS2 FOC great thats the one I've got…

  • Printing Images with Transparent Background

    Sorry if this question has already been asked, but I couldn't find anything similar to it in a search through the archives.
    I have a couple of images with transparent backgrounds in a document, much like the shells and the blue flowers in the "Classic Brochure" template in Pages 2.0.1. These images show up perfect on the screen, and when printed as .pdf files, but when I print to either an hp color laserjet 4600 or an hp laserjet 1320, the images show up with a clear box around them; the colors under the box (where it should be transparent) are faded and slightly blurred. This happens both with my document, and the unaltered "Classic Brochure" template. I've tried moving various objects backwards and forwards, but it doen't seem to have any effect. It even happens with one of the text boxes I have in the document.
    Another odd thing is that the printed "box" isn't the same size as the box that appears when you click on the object in the document. It's a bit bigger. I've seen other posts about problems with hp printers, but I'm not sure it's related. Any insight would be appreciated.
    MAF
    iMac Intel Core Duo   Mac OS X (10.4.7)  

    http://indesignsecrets.com/eliminating-ydb-yucky-discolored-box-syndrome.php
    Bob

  • Images with Transparency Cause Rendering Bug in Acrobat

    Try this at home: Export a file containing an image with transparency to PDF and open it in Acrobat (any platform, any recent version): the page containing the image will have all text rendered in what looks like bold or faux bold, depending on the font. The document looks fine in Preview and printed (even from Acrobat).
    Can anyone else reproduce this? I get this behavior consistently.

    Hi bdepaepe, I've had a look and I believe I have experienced the error you mean and solved it.
    The reason this occurs some of the time, but not always is because the source code is not the same each time, as the adverts change every refresh. The error only happens when two of the < div> tags of class 'banneritem' which are on top of each other have a height of 84px each as opposed to 80px (although even if this is the case the rendering issue doesn't always happen).
    The reason that some of the 'banneritem' < div> tags have a height of 84px is because inside them there is an <a> tag which contains an < img> tag, and the <a> tag has not been set to 'display: block;'. <a> tags are inline elements by default, so shouldn't be used to hold block level elements such as images unless the styles for the <a> tag include 'display: block;'.

  • Export a PDF to an image with transparency

    Hello,
    I'm trying to export a PDF (which contains a logo with 4 paths) as an image with transparency. In my case I use the PNG because it supports the transparency. As my logo is defined with paths it should be possible to create an image with transparency.
    Maybe this is a limitation and Acrobat cannot create image wich supports transparency.
    Anyone have an idea?
    Thanks in advance,
    Joe

    @Joe:
    That's a really pity.
    Have you found any other software which can do this job.
    I searched yesterday but didn't find anything.
    @Doc Maik
    b)
    I have a (lot) PDF containing a single image which has a transparent background.
    You can check that in Acrobat by menu: Edit - Preferences - Page Display - Show transparency grid
    I need to have a PNG or TIFF (these two formats allow transparency) of that image.
    That's all but as it seems to much for Acrobat to handle.
    "Save as ..." doesn't work in case of transparency!
    Thanks anyway.
    Best regards
    Norbert

  • Using images with Transparency in Photobooks

    I'm to a point where I would like to use images that utilize transparency in Aperture photo books. Is this possible? So far, PSD files that I've cropped with PS's lasso tools to have transparent areas surrounding their subject tend to change this area to white when dropped into a book.
    Does anyone know of a way or format to use to retain this transparency? I love the speed of Aperture's photobook tools, along with export and printing options, and would like to be able to layer images that bleed together, or have a cut-out subject on top of others, but I haven't noticed a way as of yet.
    Is this ability even available in Aperture yet?
    If not, is there a third party plugin that gives it to the user when making photo books?
    Please let me know soon, else i'm going to have to adjust my workflow back to photoshop only for page set layouts and the created PSD files on blank book pages- not fun.

    i have been trying different ways to make it work fine, and find several things to consider:
    Note: for the next ways i tried with images with transparency.
    1 searching images in the iPad with safari and saving it into Photo app
    then copying it with the popup and pasting it with the popup inside Pages or Keynote:
    work fine.
    2 using the saved images that worked fine in the first way but
    then inside Pages in my opened document, using the menu to import the image from the
    Photo app, to insert the same downloaded image used in the first case:
    does not work, the image appears with a white background.
    3 trying the first way (manually copying and pasting) but with the images i imported from
    my MacBook Pro using the normal way via iTunes(10.1.1 (4))
    does not work, some images appears with a black background, other images
    appears with a white background.
    4 trying with the images of the third way, but changing the method using the photo app
    menu from Pages
    does not work as in the third way
    i dont have problem using transparency images in the first complex way.
    my problem is when i try to use images with transparency in the other three normal ways.

  • Image with transparent background als foreground of a button

    I'd like to build an app with buttons using the phone's accent Color as Background and an Image with transparent Background as foreground of the button. It should look like the tiles on the start screen of WP8.1.
    The following code doesn't work (no foreground appears)
    <Button x:Name="myButton" Background="{ThemeResource PhoneAccentBrush}">
     <Button.Foreground>
         <ImageBrush ImageSource="/Assets/myImage.png"/>                    
     <Button.Foreground>
    </Button>
    Are there any ideas?
    Thanks
    Martin

    Hi mfv_technet,
    The Foreground property is used to get or set a brush that describes the foreground color. So we can not bind the Foreground to a image,
    if I do not misunderstand you, in my mind if we want to set the button look like the tiles on the start screen of WP8.1, maybe you can try to refer to the following xaml:
    <Button x:Name="myButton" Foreground="Red" Background="{ThemeResource PhoneAccentBrush}" Margin="116,136,0,363" Width="195" Height="141">
    <Button.Content>
    <StackPanel Orientation="Vertical">
    <Image Source="/Assets/myImage.png" Width="80" Height="80"></Image>
    <TextBlock Text="Button"></TextBlock>
    </StackPanel>
    </Button.Content>
    </Button>
    The result:
    If I have misunderstood you, please feel free to let me know.
    Best Regards,
    Amy Peng
    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click
    HERE to participate the survey.

  • Photoshop image with transparent bg not transparent in FCP

    My psd images with transparent backgrounds (done correctly) are showing up with white backgrounds when I import them into FCP. How can this be remedied? please let me know!

    i have a .psd and a .tif file..how do i switch it to 8-bit? i think its grayscale mode right now and the option for 8bit is grayed out and not clickable

  • I want to implement facebook kind of Likes rating, how to achieve that?

    Hi,
    I want to implement facebook kind of Likes for resources in my document library, how to achieve that and how to display the count in my custom webpart in my home page?
    Thanks
    Jessica

    Hi Jessica,
    You can find those option under Rating Settings under Library settings, you can select whether you need to give star rating or Like/Unlike fashion.
    Thanks, Shakir | Please 'propose as answer' if it helped you, also 'vote helpful' if you like this reply.

  • How to achieve that: store pdf drawings in database, and show in apex app?

    Hi,
    We have some many machanical drawings in pdf format, they are 1,000 + , I want to manage those drawings, like put them in a database table, possibly in blob format, and then show them in my apex app as an icon of pdf. then if somebody clicks that icon, the drawings will show in another windows, like many websites did.
    How to achieve that in an apex app?
    any idea?
    I always find that hard to do.

    Search this forum for uploading documents to database, there are many threads.
    You could also check out the 2 day training that ships woth Apex.
    Gus

  • How to insert image with transparent background?

    I have several logos saved at .GIFs with transparent backgrounds that I would like to import into my dashboard, but it seems that the image component only supports JPEG.  Is there a way to import images while maintaining their transparency?

    Well, you CAN insert GIFs or other image formats.  But I have yet to figure out a way to take a GIF with a transparent background and import it into my Xcelsius while preserving the transparency.  The transparent background always just defaults to white.
    This is a crucial feature as I have some logos I want to use that are circular.  But if I can't give them a transparent background, it drastically limits their placement options.
    I know that flash does support transparency, so am I missing something here?

  • How to superpose two image with transparency color

    Hi,
    I like to superpose two image with a transparency color. I know it is possible but i do not know on which API i can find it.
    thanks

    http://developer.java.sun.com/developer/JDCTechTips/2002/tt0618.html
    http://java.sun.com/products/jfc/tsc/articles/swing2d/
    Try these they discuss transparent images.
    rykk

  • Images with transparency display edge artefacts - What am I doing wrong, how can this be resolved

    Hi there
    Using MUSE CC 2014
    I need to place photoshop images of text (with transparency) over a full screen slide show but I'm getting edge artefacts around the lettering which looks, well frankly, horrible. I don't recall previous versions of MUSE being quite as bad as this, am I doing something wrong? Is there a trick to overcome these ugly artefacts?
    PSD Images are being imported SS
    Many thanks in advance for any help.

    Hi Vikas
    I was dropping a pds file onto the stage. No other layers than image and transparent bg. I was scaling the image down in Muse which as I've discovered exaggerates the visibility of the image edge artefacts. After doing a bit of reading it appears this is a known problem with Adobe Muse, something to do with the algorithms Muse uses to scale images. I also think the colour of the layer contributed a little to the effect also.
    Problem solved when I ditched the PSD route and instead imported the image SS as a PNG.

  • Can't get photo with transparent background to show up that way

    I'm quite new to PSE (using ver. 6) so thanks in advance for any help you can offer!
    I have a photo, and have made the background transparent, and saved it as a GIF file.  When opened, it shows up with the checkered background.  Good so far.
    When I drag this photo from the Project Bin at the bottom (where I still see the checkerd background) into the image I'm working on, it shows up with a solid gray background once dropped into that image.  So in essence, the background is no longer transparent.
    How do I add this photo with the transparent background to the image I'm working on without a background / frame showing up?  I've combed the internet and can't find an answer, and searching this forum, still coming up empty.  I think the problem has to do with dragging it from the project bin.  How else can I get it into the image I'm working on?
    Thanks!
    Kevin

    In PSE 6, dragging up from the project bin creates a special kind of passthrough layer. Copy/paste, or drag it down from the gif's image window into the other file in the project bin instead.

Maybe you are looking for