Very large responsive background images

Just a quick question with these - for example the page here:
http://www.destinationsshow.com/
Not so much the CSS, but the knack to get such a large image that isn't too big in terms of file size, but still retains pretty good quality when very large?
Also, I noticed on that example the original image is actually made up of two copies of the image with one mirrored vertically.
You can see what I mean here:
http://www.destinationsshow.com/images/splash_2014_bg.jpg
Is that significant?
Thanks for any pointers.

Your example uses two different background images
The mobile one is 18 KB
420px × 667px.
The desktop one is much bigger, 198 KB
2,000px × 2,666px
In my example below, 140 KB
900px × 675px.
http://alt-web.com/TEST/Resizable-BG.shtml
Nancy O.

Similar Messages

What is the optimum core configuration for a new Mac Pro to process and manipulate very large (80 megapixel) images using PhotoShop and Camera Raw?

Hello:
I will be using creative techniques to process and manipulate a large number (hundreds) of very large (80 megapixel) images captured using a medium format digital back (Phase One IQ180).
Final output will be digital fine art imagery printed using an Epson 11880 at large sizes (up to 60 inches x ?), retaining the highest possible quality and resolution. I will be using Adobe CC PhotoShop and Camera RAW as well as Capture One software. PhotoShop filters will be used extensively.
The Mac Pro needs to be optimized for the above purpose and be useful for at least five years. I plan to max out all the other options (RAM, graphics cards, storage). Performance is more important than cost.
The few discussions I have found that mention optimum core configurations seem to lean toward 6 or 8 (but likely are not taking into consideration my need for manipulating a large number of very large files), so I am looking to this foum for opinions.
Thank you,
Kent

See if this helps
http://macperformanceguide.com/index_topics.html#MacPro2013

Responsive Background Images with Media Queries

Hello,
I'm creating a mobile website in Dreamweaver and would like to use an image which will change with different device widths. I'm using media queries with background images. My problem is that in order for the background images to display, I need to assign a height to the div. When the image is scaled down the height stays static, leaving white space beneath it. There will be content below the image so the white space will push it down and look wrong. Is there a way to use multiple images with media queries keeping the height responsive? Thank you!
@media screen and (max-width: 1024px) {
#mainImage {
          background-image: url(../images/mainImageLarge.jpg);
          background-repeat: no-repeat;
          background-position: center top;
          background-size: 100%;
          height: 272px;
          border-top-width: 3px;
          border-top-style: solid;
          border-top-color: #FFF;
@media only screen and (max-width : 480px) {
#mainImage {
          background-image: url(../images/mainImageMed.jpg);
          background-repeat: no-repeat;
          background-position: center top;
          background-size: 100%;
          height: 107px;
          border-top-width: 3px;
          border-top-style: solid;
          border-top-color: #FFF;
@media only screen and (max-width : 320px) {
          #mainImage img {
          background-image: url(../images/mainImageSmall.jpg);
          background-repeat: no-repeat;
          background-position: center top;
          background-size: 100%;
          height: 150px;
          border-top-width: 3px;
          border-top-style: solid;
          border-top-color: #FFF;

Like this example:
http://alt-web.com/FluidGrid/Fluid-4.html
METHOD:
Insert 2 images -- one for desktops and one for mobile. Assign classes to each image.
<img id="banner" class="desktop" src="desktop_image.jgp" />
<img id="banner" class="mobile" src="mobile_image.jpg"/>
In your CSS, use display:none and display:block to show/hide.
.desktop {
    display:block;
.mobile {
    display:none;
/* Special Rules for mobiles */
@media only screen and (max-width: 480px) {
    .desktop {display:none}
    .mobile {display:block}
Feel free to set your break points however you wish.
Nancy O.

Background image vertically distorted -appears ok when paused and restarted

using 768 x 576 .jpg images as background for a PAL standard idvd:
- when burned with "PAL"Standard (4:3)" / "professional quality" (movie length is 55 min,)
- & watching on a laptop/a mac g5 / a windows pc
the images appeared vertically distorted
but:
when pausing and restarting the dvd again the image
changes to the desired size
even when i used a quicktime as background movie
the same problem occurs
whereas:
the display on a TV* was fine
(given that a 4:3 ratio was set for a widescreen tv or using a 4:3 ratio TV)
when i did not use any image (burning just the movie)
nothing appeared to be distorted (the movie is not distorted
neither are the no-images-no-backgrounds-at-all menu screens)
Is there any specific colour depth or other technical information
i need to consider to solve this problem?
... I noticed that the colour of the image looks significantly different
on a TV compared to laptop/mac/windows pc
whereas the movie's colour appears to be quite similar
on TV/laptop/mac/windows pc ....

Thank you for trying to help, I really appreciate it.
It does not matter which option you use. As you know, one would want the background image on each page of a site to be the same size and location to provide a seamless transition from page to page. When using the blank template, the page can have an image put in (using fit, fill, stretch, orig) and be contiguous from page to page. However, when using the Photo template, after clicking on an album image to view larger, the background image unexplicably shifts/distorts downward on the page, and stays that way even upon returning to the album.

Footer over background image

I have a site with a large different background image behind every page. I want the footer to be stick to the bottom of the browser window, with the background image going behind the footer.
Muse pushes the footer below that background image.
Suggestions?
Jeff

Hello, I can think of 2 ways to fix this.
1. Use this background image as browser fill and it will stay behind the footer.Second half of the video below explains how to do that.
Add an image to the background of the page or browser | Adobe Muse CC tutorials
2. You can also use layers tab in muse.
    Create a new layer in Layers tab
    Move the new layer below the existing layer (drag and drop).
    select the footer items and move them to the lower layer by right click > Move to layer > select the lower layer. Make sure Footer items are below the layer that has the background image. Check more about layers in the like : Adobe Muse Help | Working with Layers
Regards
Vivek

Responsive Full Screen Background image - How?

Hi,
I would be very grateful for any guidance on the CSS/HTML code that I need to use for inserting a static, 'responsive', full screen, background image on a website.
Best wishes
Simon

Depending on what kind of browser support you want to include, this can be a single line of css code...
background-size:cover;
...which takes care of all modern browsers back to IE9. Or, if you want to support older browsers (IE8 and lower), a more involved javascript would be required...
http://papermashup.com/jquery-scalable-fullscreen-background-image/

Capture Image Of A Very Large JPanel

Below is some code used to save an image of a JPanel to a file...
    int w = panel.getSize().width;
    int h = panel.getSize().height;
    BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
    Graphics graphics = image.getGraphics();
    // Make the component believe its visible and do its layout.
    panel.addNotify();
    panel.setVisible(true);
    panel.validate();
    // Draw the graphics.
    panel.print(graphics);
    // Write the image to a file.
    ImageFile imageFile = new ImageFile("test.png");
    imageFile.save(image);
    // Dispose of the graphics.
    graphics.dispose();This works fine but my problem is that I am trying to save what may be a very large JPanel, perhaps as large as 10000x10000 pixels. It doesn't take long for the java heap to be used up and an exception to be thrown.
I know I can increase the heap size of the JVM but since I can't ever be sure how large the panel may be that's a far from ideal solution.
So the question is how do I save an image of a very large JPanel to a file?

1) Does the OoM happens while instantiating the buffered image, (which probably tries to allocate a big continuous native array of pixels)?
Or the Graphics object (same reason, though the Graphics is probably just an empty shell over the big pixel array)?
2) In which format do you need to save the image? Do you only need to be able to read it again in your own program?
If yes to both questions, then a pulled-by-the-hair solution coud be to instantiate your own Graphics subclass (no Buffered Image), whose operations would save their arguments directly to the image file, instead of into a big in-memory model of the panel image.
If the output format is a standard one though (GIF, JPG,...), then maybe your custom Graphics's operations could contain the logic to encode/compress as much as possible of the arguments into an in-memory bytearray of the target format?
I'm not very confident though; I d'ont know the GIF or JPEG encoding, but I suspect (especially for JPEG) that you need to know the "whole" image to encode it properly.
But if the target format supports encoders that work on the fly out of streams of bytes (e.g. BMP ) then you can use whatever compress/uncompress technique you see fit (e.g. RLE ): you know the nature of the panels, you may be aware of some optimizations you may perform wrt pixels storage. prior to encoding (e.g., bug empty areas, predictable chessboard pattern, black-and-white palette,...).
Edited by: jduprez on Sep 19, 2009 7:33 PM

Please help!! "Can't open the illustration. This artwork contains a very large image that can not...

Hi all, I am subscribing Illustrator CS6 16.0.0 and using it on Windows 7.
Few days ago I was working with one file, I saved it successfully and now when I'm trying to open it an error message occures "Can't open the illustration. This artwork contains a very large image that can not be read on this version of AI. Please try with 64-bit version." and ALMOST ALL of the objects (vector) are missing as if they were deleted!
It's kind of strange since I created the file with the same program and everything was working properly before.
Please Please advice further steps for recovering my file.

Thank you so much! the file is recovered (as well as my emotional state )
The finding of the day - apparently I have two versions of AI in my PC!

Editing very large images

I have several very large images that require minor editing. The tasks that I require are only basic rotation, cropping, and maybe minor color adjustments.
The problem is that the images range from 20780 x 15000 px down to 11150 x 2600 px.
With images this size, when I try to perform any operation on the entire image, like a 3 deg rotation, fireworks simply times out. Maybe it is because it can't generate the preview image at that size, maybe it simply can't calculate the image at that size. If it is just the preview image, is there a way to lower the quality (say, jpeg quality of 5%) of the preview image only but when I export the image, I can keep it at 100%?
Thank you,
-Adam
(Yes, I did search, but the forums search seemed mildly useless and engine results consistently returned nothing)

Fireworks is not designed to work with images of this size. It's a screen graphics application. Photoshop would be a better option here, or other software designed for working with high resolution files.
Jim Babbage

How do I Customize RoboHelp 11 Responsive HTML5 to include repeating background image?

Hello,
How do I add a repeating background image (not logo) to the layout found in RoboHelp 11 Responsive HTML5?
Is this something that has to be done inside of Dreamweaver?
Where are the RoboHelp 11 Responsive HTML 5 default themes (skins) stored on the computer?
I have seen the following files in RoboHelp 11 and would like to know if it is possible to edit
these files?
Responsive_Layout.fpj
C:\Program Files (x86)\Adobe\Adobe RoboHelp 11\RoboHTML\Samples\en_US\EmployeeCare2\EmployeeCare2Project\!ScreenLayout!\Responsive_La yout
Glossary.slp
Index.slp
SearchResults.slp
Table_of_Contents.slp
Topic.slp
C:\Program Files (x86)\Adobe\Adobe RoboHelp 11\RoboHTML\Samples\en_US\EmployeeCare2\EmployeeCare2Project\!ScreenLayout!\Responsive_La yout
By default, there are two themes found in Responsive HTML 5. They are:
Theme1_Standard
Theme2_Government
Where are these themes located under RoboHelp 11?
Thanks in advance for your response.
James

Post moved to HTML5 Layouts forum.
See www.grainge.org for RoboHelp and Authoring tips
@petergrainge

JOGL and Large Background Images

Hullo gurus! :)
I'm having trouble with converting my work-in-progress RTS-style game from using Graphics2D into a (hopefully) faster JOGL format.
In my current approach, I've got a 2000x2000 pixel JPG which contains the entire map. Units and structures are layered on top of the background image, and nature takes its course.
Now, I'm trying to figure JOGL out, and have picked up a book and read a number of samples within, as well as around the web. One of the examples from this very site suggested a process of converting the image into a format that would display as expected on the screen. The code snippet looks something like this:
        Image i = Toolkit.getDefaultToolkit().createImage ("Map_0_0.jpg");
        MediaTracker tracker = new MediaTracker(new Canvas());
        tracker.addImage (i, 0);
        try {
            tracker.waitForAll();
        } catch (InterruptedException ie) {}
        dukeHeight = i.getHeight(null);
        dukeWidth = i.getWidth(null);
        System.out.println ("Got image, width=" +
                            dukeWidth + ", height=" + dukeHeight);
        // turn it into a BufferedImage
        WritableRaster raster =
            Raster.createInterleavedRaster (DataBuffer.TYPE_BYTE,
                                            dukeWidth,
                                            dukeHeight,
                                            4,
                                            null);
        ComponentColorModel colorModel=
            new ComponentColorModel (ColorSpace.getInstance(ColorSpace.CS_sRGB),
                                     new int[] {8,8,8,8},
                                     true,
                                     false,
                                     ComponentColorModel.TRANSLUCENT,
                                     DataBuffer.TYPE_BYTE);
        BufferedImage dukeImg =
            new BufferedImage (colorModel, // color model
                               raster,
                               false, // isRasterPremultiplied
                               null); // properties
        Graphics2D g = dukeImg.createGraphics();
        // use an AffineTransformation to draw upside-down in the java
        // sense, which will make it right-side-up in OpenGL
        AffineTransform gt = new AffineTransform();
        gt.translate (0, dukeHeight);
        gt.scale (1, -1d);
        g.transform (gt);
        g.drawImage (i, null, null);
        // now retrieve the underlying byte array from dukeImg
        DataBufferByte dukeBuf = (DataBufferByte)raster.getDataBuffer();
        dukeRGBA = dukeBuf.getData();
        g.dispose();However, on the "g.drawImage (i, null, null);" line, I get the "Exception in thread "AWT-EventQueue-0" java.lang.OutOfMemoryError: Java heap space.
Am I doing something dumb? Is there a better approach that will let me render everything the way I'm trying to? Any advice would be greatly appreciated... :)
-Squeakz

> This is not good as I have a background image next the
header.
VIEW | Visual Aids > Hide All.
> and open the predefined template and save as a page.
This is wrong, wrong, wrong. Please read the F1 Help for how
to properly
create child pages from your templates.
All links in the TEMPLATE file should be one of three kinds -
1. Relative to the template file, e.g.,
<a href="../ (meaning that you must go up one level from
the template folder
to reach the root of the site, hence all other files, since
none of them
should be in the templates folder)
2. Relative to the site root, e.g.,
<a href="/ (meaning that one would begin looking for the
linked file at the
root of the site and follow the pathing from that point)
3. Absolute, e.g.,
<a href="
http:// (meaning that the link is to a page
external to the site).
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"lister110" <[email protected]> wrote in
message
news:fl3bi5$g4s$[email protected]..
> Hello everyone...
>
> I have just started using dreamweaver, and want to be
able to use
> templates. I
> have started with a basic page. Now there are a few
things that seem odd.
> Once
> I have defined the page as a template and selected a
header 1 say and
> define as
> an editable region the section nudges down slightly to
reveal the editable
> caption. This is not good as I have a background image
next the header.
> Anyway,
> I then save the template and open the predefined
template and save as a
> page.
> But all my background images have disapeared? even the
css tab shows no
> background images all. Whats going on with templates???
>
> I am using Dreamweaverv Cs3 on a PC running windows xp
>
>
> help..
>
>
> lister
>

What is the best way to handle very large images in Captivate?

I am just not sure the best way to handle very large electrical drawings.
Any suggestions?
Thanks
Tricia

Is converting the colorspace asking for trouble? Very possibly! If you were to do that to a PDF that was going to be used in the print industry, they'd shoot you! On the other hand, if the PDF was going online or on a mobile device – they might not care. And if the PDF complies with one of the ISO subset standards, such as PDF/X or PDF/A, then you have other rules in play. In general, such things are a user preference/setting/choice.
On the larger question – there are MANY MANY ways to approach PDF optimization. Compression of image data is just one of them. And then within that single category, as you can see, there are various approaches to the problem. If you extend your investigation to other tools such as PDF Enhancer, you'd see even other ways to do this as well.
As with the first comment, there is no "always right" answer. It's entirely dependent on the user's use case for the PDF, requirements of additional standard, and the user's needs.

How to save FrameworkElement as very large raster image?

I have to save my FrameworkElement as
very large raster image. For now I use the RenderTargetBitmapclass
and a BitmapEncoder,
in this way:
RenderTargetBitmap bmp = new RenderTargetBitmap(ElementWidth, ElementHeight,
90, 96, PixelFormats.Default);
bmp.Render(MyElement); // OutOfMemoryException here
PngBitmapEncoder encoder = new PngBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(bmp));
using (var stream = File.Create(filePath))
{ encoder.Save(stream); }
Where ElementWidth and ElementHeight are large numbers (about 10000x6000). But with this solution there's a OutOfMemoryException when i try to Render my
element.
There are other ways to do what I need (without causing an OutOfMemoryException)? Thanks.

Following link may help you
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/c5e31d70-08d1-4402-8016-0a0b7af49b04/
Gaurav Khanna | Microsoft VB.NET MVP

Move image to larger white background

I have Elements 5 and use it to prepare photos of products for my website. My photos need to be square with a white background. Several of my vendors supply product photos, but many of them are not square and are cropped too closely to the product for me to crop again without cutting off crucial parts of the product. Is there anyway for me to place the product image on top of a larger white background?

Using Image>Resize>Canvas Size is one way and then crop the image
so it's square.
more info:
http://help.adobe.com/en_US/photoshopelements/using/WSae2ea3b149d0c3591ae939f103860b3d59-7 eeb_WIN.html

Creating a custom DataBuffer for very LARGE images

I would like to work with very large images (up to 100MB) in an application.
Only for image manipulating, not rendering for screen.
My idea is to write my own DataBuffer which use Hard Drive,maybe with some "intelligent" swapping.
But At first performance doesn�t matter.
I try this:ColorModel cm = ColorModel.getRGBdefault();
SampleModel sm = cm.createCompatibleSampleModel(w,h);
DataBuffer db = new myDataBufferInt(size);
WritableRaster raster = Raster.createWritableRaster(sm,db,null);But somebody don�t like myDataBuffer
and of course it is type DataBuffer.TYPE_INTthrows:java.awt.image.RasterFormatException: IntegerComponentRasters must haveinteger DataBuffers
at sun.awt.image.IntegerComponentRaster.<init>(IntegerComponentRaster.java:155)
at sun.awt.image.IntegerInterleavedRaster.<init>(IntegerInterleavedRaster.java:111)
at sun.awt.image.IntegerInterleavedRaster.<init>(IntegerInterleavedRaster.java:78)
at java.awt.image.Raster.createWritableRaster(Raster.java:980)
public class myDataBufferInt extends DataBuffer {
public myDataBufferInt(int size) {
super(TYPE_INT,size);
. . . }The question is how to manage large image?
What kind of subclasses I have to write?
Thank you all
P.S: I don�t want to use: java -Xmsn -Xmxn

i have the same problem let me know please if you have an answer?

Very large responsive background images

Similar Messages

Maybe you are looking for