Resizing Background Image

I did some google searching...but, I am seeking the ability
to have my
background image resize to the visitor's browser...not tile,
but rezise...I
see some older google articles on javascript and CSS3...but,
I see flash
sites do it enough and believe I have see DW sites do
it....For my tastes,
javascript is ok but CSS is preferred.
TIA.

Can't happen. Background images don't resize.
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
==================
"tweaked_eye" <[email protected]> wrote in message
news:ggckae$j8c$[email protected]..
>I did some google searching...but, I am seeking the
ability to have my
>background image resize to the visitor's browser...not
tile, but rezise...I
>see some older google articles on javascript and
CSS3...but, I see flash
>sites do it enough and believe I have see DW sites do
it....For my tastes,
>javascript is ok but CSS is preferred.
>
> TIA.
>
>
>

Similar Messages

Can we resize and change the background image in a 2 page layout?

I am a two page layout report in RTF. Can I use different background image on page 1 and page 2? The first page background will not be repeated but the second page will. Also, it seems when we insert a background image by going "Format -> Background -> Fill effect -> Picture", after we finished the whole process we can't get the background image to fit with the page, can we resize it to be fit with the page? Thanks for your help!

Yes. Select the image and go to the Inspector/Hyperlink/Link pane and use the Link to One of my Pages option.
Remember: the photo must be added to the page by dragging it onto the page and then be selected. It can't be added as a background image with the Inspector/Page/Layout pane.
OT

Resizing browser to background image size

I am trying to redo my website and I want to have a large landscape image on the opening page and for the browser to automatically resize to the proportions of the images and for the image to change in size when the browser window is changed in size.
To make it easier to understand I want it to work like this:-
http://www.lachapellestudio.com/
I don't want a 'border' to appear at any point. Does anyone know a small HTML snippet that will make this work???

> Does a background image have to be smaller than a
certain size in order to
> show up as your background on a web page
no
-Darrel

Background image resizing always 100%

Hi,
I'm trying to do something but it doesn't work. I have an edge animation with a image in background. the image has a 100% width and height to fit perfectly the browser. My problem is when I'm trying to resize manually the window, it doesn't keep the ratio. so I tried with the "height: auto" properties but if you resize the browser window, the height isn't to 100% anymore..
Thanks in advance for your help !
p.s: You can find my example in the .zip file.
https://www.box.com/s/2sjd8419ot3ww2n59vp5

Hi
As most modern browsers now support background image scaling, and with a little effort it can also be simulated in IE8 and below, (via the alphaImageLoader) why not use the browsers built in features for this?
See - http://cookbooks.adobe.com/post_Scale_Background_image_to_browser_size-17590.html
PZ

Need table background image to resize

I'm working in DW MX. I have a subtle background image in a
nested table on my page. The pages will vary in height due to the
amount of content on each. I would like the background image to
resize vertically as the table expands vertically. I also don't
want the image to repeat. I'd be happy with a straight HTML or CSS
solution. Any advice?

Ain't gonna happen. There's just no way....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"jefflamonica" <[email protected]> wrote in
message
news:fe0t8v$4e3$[email protected]..
>I agree with you on UGLY. But that's not really what I'm
trying to do --
> especially fixed position. I just want to make sure if
someone resizes the
> text
> on the screen, thus expanding the cell and the table
vertically, that the
> background image will resize as well. You can see the
page at
>
http://www.monsoondigital.com/client/brotherton/index.html
>
> I'm also trying to fix that blasted one- or two-pixel
problem with the
> right
> vertical line.
>
> Jeff
>

Div Background Image...Resize To Fit Browser Window...???

[b]hello again[/b]...
I would like to have a background image (.jpg) automatically resize to fit any browser's window...& I read somewhere on the web it should be accomplished by placing the image in a layer (as a background image); & then set the layer size to 100%.
can someone please tell me how the coding goes for this...?
[or...if that [i]is[/i] in fact the correct approach? I don't care if it's html or css...I just want it to work. (&...I'm starting off w/ a larger image (so resolution doesn't get lost when going bigger)]
thanks very much,
[b]mark4man[/b]
btw - I should add that it's the image's [i]WIDTH[/i] I'm interested in resizing...while it's aspect ration remains in tact.

http://css-tricks.com/how-to-resizeable-background-image/
For the record, I'm not a big fan of huge background images on web pages. They take forever to load on slow connections. And some mobile devices won't display them at all. So all that weight just for eye candy is kind of a waste IMO.
I think the safest, most practical way to achieve backgrounds that fill available viewport is to use a small, seemless tile and repeat horizontally, vertically or both.
More on background-images:
http://alt-web.com/Backgrounds.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

How do you make a rectangle resize with background image?

I'm trying to add links (transparent rectangles) to a background image that is set with "scale to fit". However when it scales in needs to scale with my links. Can I have the rectangles scale with the background image? If not is there a better way of doing this?

As I understand. correctly. You want the rectangles that you have added over background image, (to which links are added) to be responsive in layout within the project, Am I correct ? If yes ! Muse does not implement "Responsive Layout" as defined by a hand coder. For more details refer to : Can you create responsive sites with Adobe Muse?

Resizing 1) background images and 2) div's containing images

I just created a web page consisting of little more than an image (about 900 pixels) wide which is set at width=100% in a style sheet. It works great, but I'd like to substitute a smaller image (to reduce page loading time) in mobile devices.
If it was a background image, I could just declare two different background images based on screen size, but I don't know of any way to swap between images actually inserted in a page.
So, is it possible to give a background image a width in percentage, similar to a static image? In other words, if my screen was 651 pixels wide, then a static image inside a container spanning the entire screen should also be 651 pixels wide. Can I rig it so that a background image in that container would also be 651 pixels wide?
Of course, the obvious problem is height. If a background image measures 900 X 1200 pixels, and a screen is 600 pixels wide, then even if there's a style that makes the image 600 pixels wide, it would also have to calculate a height of 800 pixels, and I'm guessing that can't be done.
Anyway, I'd just like to know what kinds of tricks one can use in making background images and divs containing static images display in percentages based on screen size.
Thanks.

Use background-size:cover; for your background images.
Further reading: http://css-tricks.com/perfect-full-page-background-image/
EDIT:// For swapping out placed images, it's a little harder to do right now as there is no specified solution from W3C. Some people want to use the srcset attribute, others the <picture> tag. There is no perfect approach right now. See: http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good- thing/
One idea is you could hide the image and then load a background-image in the container which is smaller in size. But this would likely bloat your HTML and CSS as you use multiple images - the device will also load both images so you don't gain any real advantage unless you intend to show a croppoed or different image.
Other ideas: http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
<div class="image">
     <img src="YourImage.jpg" alt="" width="500" height="250" />
</div>
@media only screen and (max-width: 480px) {
     .image img {display:none;}
     .image {
          background:url("YourImage_Mobile.jpg") no-repeat 0 0;
          background-size:cover;
Another idea is to show/hide the relevant image:
<img src="YourImage.jpg" alt="" width="500" height="250" class="desktop" />
<img src="YourImage_mobile.jpg" alt="" width="300" height="180" class="mobile" />
@media only screen and (max-width: 480px) {
     .desktop {display:none;}
     .mobile {display:block;}

Cannot get an Apex HTML region with table with a background image to resize image to fit table

I want to achieve this: Table whith background image but cannot get it to work in an Apex page with HTML region.
Adding the following code to the html region:
<table class="tableWithBackground" width="300px" height="200px" border="1">
    <tr>
        <td>
            <img class="tableBackground" src="#APP_IMAGES#Demo.jpg">
            Hello
        </td>
        <td>
            World
        </td>
    </tr>
    <tr>
        <td>How are<br><br><br><br><br>you?</td>
        <td>I am fine</td>
    </tr>
</td>
Results in a page with a table but without borders (at his stage I have not yet uploaded the Demo.jpg). After uploading the Demo.jpg results in a table with the entire image placed in het first cell. After placing the class code in the CSS inline property I expected to see the result as is shown in the Table whith background image demo. For some reason this does not work (the image is no longer visible).
Can anybody tell me how to achieve my goal?
Thanks in advance!
Geert

Geert01 wrote:
I want to achieve this: Table whith background image but cannot get it to work in an Apex page with HTML region.
Adding the following code to the html region:
<table class="tableWithBackground" width="300px" height="200px" border="1">
    <tr>
        <td>
            <img class="tableBackground" src="#APP_IMAGES#Demo.jpg">
            Hello
        </td>
        <td>
            World
        </td>
    </tr>
    <tr>
        <td>How are<br><br><br><br><br>you?</td>
        <td>I am fine</td>
    </tr>
</td>
Results in a page with a table but without borders (at his stage I have not yet uploaded the Demo.jpg). After uploading the Demo.jpg results in a table with the entire image placed in het first cell. After placing the class code in the CSS inline property I expected to see the result as is shown in the Table whith background image demo. For some reason this does not work (the image is no longer visible).
Can anybody tell me how to achieve my goal?
This is a workaround. What's your real goal? Why do you want to do this?
What browser(s)/version(s) are you using? All current browser versions have support for CSS3 background sizing which is the proper way to do this.

Problem with Background image and JFrame

Hi there!
I've the following problem:
I created a JFrame with an integrated JPanel. In this JFrame I display a background image. Therefore I've used my own contentPane:
public class MContentPane extends JComponent{
private Image backgroundImage = null;
public MContentPane() {
super();
* Returns the background image
* @return Background image
public Image getBackgroundImage() {
return backgroundImage;
* Sets the background image
* @param backgroundImage Background image
public void setBackgroundImage(Image backgroundImage) {
this.backgroundImage = backgroundImage;
* Overrides the painting to display a background image
protected void paintComponent(Graphics g) {
if (isOpaque()) {
g.setColor(getBackground());
g.fillRect(0, 0, getWidth(), getHeight());
if (backgroundImage != null) {
g.drawImage(backgroundImage,0,0,this);
super.paintComponent(g);
Now the background image displays correct. But as soon as I click on some combobox that is placed within the integrated JPanel I see fractals of the opened combobox on the background. When I minimize
the Frame they disappear. Sometimes though I get also some fractals when resizing the JFrame.
It seems there is some problem with the redrawing of the background e.g. it doesn't get redrawn as often as it should be!?
Could anyone give me some hint, on how to achieve a clear background after clicking some combobox?
Thx in advance

I still prefer using a border to draw a background image:
import java.awt.*;
import java.awt.image.*;
import javax.swing.border.*;
public class CentredBackgroundBorder implements Border {
    private final BufferedImage image;
    public CentredBackgroundBorder(BufferedImage image) {
        this.image = image;
    public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
        int x0 = x + (width-image.getWidth())/2;
        int y0 = y + (height-image.getHeight())/2;
        g. drawImage(image, x0, y0, null);
    public Insets getBorderInsets(Component c) {
        return new Insets(0,0,0,0);
    public boolean isBorderOpaque() {
        return true;
}And here is a demo where I load the background image asynchronously, so that I can launch the GUI before the image is done loading. Warning: you may find the image disturbing...
import java.awt.*;
import java.io.*;
import java.net.URL;
import javax.imageio.*;
import javax.swing.*;
import javax.swing.border.*;
public class BackgroundBorderExample {
    public static void main(String[] args) throws IOException {
        JFrame.setDefaultLookAndFeelDecorated(true);
        JFrame f = new JFrame("BackgroundBorderExample");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        JTextArea area = new JTextArea(24,80);
        area.setForeground(Color.WHITE);
        area.setOpaque(false);
        area.read(new FileReader(new File("BackgroundBorderExample.java")), null);
        final JScrollPane sp = new JScrollPane(area);
        sp.setBackground(Color.BLACK);
        sp.getViewport().setOpaque(false);
        f.getContentPane().add(sp);
        f.setSize(600,400);
        f.setLocationRelativeTo(null);
        f.setVisible(true);
        String url = "http://today.java.net/jag/bio/JagHeadshot.jpg";
        final Border bkgrnd = new CentredBackgroundBorder(ImageIO.read(new URL(url)));
        Runnable r = new Runnable() {
            public void run() {
                sp.setViewportBorder(bkgrnd);
                sp.repaint();
        SwingUtilities.invokeLater(r);
}

How can I use a refrence background image ?

HI,
I need to register align horizontally and vertically) about 100 images to the first. I don't want to stack or merge them. An ideal way to accomplish this would be to be able to set the first image as a background reference image for all images in the group. There would be left/right buttons so I could advance through the stack, a slider to adjust the visibility of the foreground image, and up/down & right/left arrows so I could move the upper image a pixel at a time in any direction. In this case I don't need to rotate the image, but this would also be something a person might want to control. Then I would move through the group of images, stopping on each one to align the image to the first. One at a time, or after I am done, it would save all the aligned images to a new filename and folder, without changing the transparency of the image or in any way using the background reference image. Without rotating the images, every pixel in the new image would be the same as in the original, except moved. I would start by resizing the canvas of all the images so they have a border area. This way I can move the image around and not lose any of it.
Of course I could put the reference image in the background layer and the image to be adjusted above it on another layer. Then i can use the background as a reference by making the upper image somewhat transparent. Finially I could delete the background layer and save the image with just the adjusted layer. But this would be tedius with 100 images, even worse if there were 1000..
Is there a reference background image capability in Photoshop CC ? Is there a better or different way to do this ? Or can Bridge do it ?

Perhaps I need to explain my specific application. I have 120 images that are part of a time lapse sequence. The camera is photographing a meteor shower. I was able to capture a meteor which left a persistent trail that lasted about 5 minutes. Because the camera is on a tripod, the stars are constantly moving and in fact moved quite a bit during the 5 minutes the trail was visible. These images are of much higher resulution than the 1080 video I am producing. I have used premier to track the spot in the images and show the meteor and trail as a video close up that runs at about 15% speed. because the exposures were 30 seconds ;long, every 33 seconds, the sky has visibly moved from image to image. because I use only a few keyframes Premier tracks the spot smoothly. But since the pictures are each moved, not moving, the stars in the final video move back and forth with each image. they never go anywhere, but this movement is distracting and annoying. Theoretically I could eliminate this movement by having a different key for each frame. But the better way is to prepare the images so they are all aligned. Then there will be no movement at all.
You have seen this effect in documentaries. Here's a hypothetical situation. Someone has handheld video of an important event happening. because of the situation and the handheld camera, the picture moves around like crazy. To be able to view the event clearly as part of an investigation, each frame is aligned to the first so the subject doesn't move at all, while the image frame moves all around. I have seen this many times. Now I need to do it.
I have 120 pictures which all must be aligned so the stars in the picture do not move. i need to see a refrence image through the image to be adjusted, so I can move the image to be adjusted until its stars are perfectly aligned with stars in the refrence image. Of course this is like stacking, which is used to reduce noise and increase detail. but I don't want to stack the images, just adjust them horizontally and vertically, and then save them in their adjusted state.

How to get background image to fill the browser and remain fixed in both IE and Firefox?

Basically what it says in the title. I've come very close in achieving this but something just doesn't tie up in the html and css code...
First of all, I'm using IE8 and the latest version of Firefox to test this.
I used 2 sources of information for getting this done: 1) http://css-tricks.com/perfect-full-page-background-image/ and 2) http://stackoverflow.com/questions/8958697/css3-background-size-cover-doesnt-make-image-co ver-vertically
In Case 1 the example on the page called CSS-Only Technique #1 gives code that works almost perfectly for me, except that obviously I need a background image, however the CSS provided there is clearly just for an image dropped in the body of a page with no regard for other content that may already be there. The html code that I put on the page is simply <img class="bg" src="../images/background_image.jpg">
Obviously I used the CSS code provided in the example, minus the last bit which is "@media screen" etc etc, which seems irrelevant to me. Obviously substituting values to suit the image on my page.
So what happened is that it almost worked as intended in both the browsers (which means the image filled both browsers width-wise as intended and also remained fixed when I zoomed in or out in each case) except that the image went over the top of the current content that I had there already precisely because it's not a background in this "technique". (A curious side-note is that the image didn't push down the content, as I'd have expected in normal circumstances, but went right over the top of it so it hid it (like z-index).
One thing that does bother me about this "technique" is that if you click on View Demo just below the code provided you will see on the working example page (forest background) the image clearly works as a background and the content sits happily on top! So I don't know whether the person providing the example was trying to mislead people or what! Or he got lazy and showed a different page that didn't use the exact code he provided. No matter.
In any case this leaves me with the job only half finished, as I still need a background image that works like the 'normal image' code provided.
On to Case 2 and on this page the first example provided gives the CSS for the background image - namely the code within html {...} part and also shows the same 'normal image' code as given in Case 1. In this case however, although the person provided a suggestion, the css and html doesn't really tie up properly plus some of the css and html seems a bit redundant. So this time when I used the 'html portion' of the CSS code (i.e. just the bit that was most relevant) I got two different behaviours in each browser and neither of which was quite what I'm looking for. In IE8 initially the page looks fine (background fills the page and content is on top) however when I zoom in or out the background also zooms in or out accordingly so is NOT fixed. In Firefox the background image DOES stay fixed, however because the image originally is not the whole height of the browser I'm guessing the code stretches it downwards (while keeping proportions - so the image essentially enlarges) to fill all of it. The quick way to get around it is to probably add some white space to the bottom of the image just to give it enough height that it doesn't stretch/resize automatically. But it would be nice to find out anyway how to get around this in the code. Overall I would say that the result in Firefox comes closest to the desired solution but of course it doesn't help matters with IE8.
Apologies for the lengthy description but that should at least provide plenty info for anybody that might have a possible solution for me. Essentially what would be great is if somebody could advise me how to take the code from Case 1 and apply it to a 'background' piece of coding like the type that's contained within html {...} in Case 2. Like I said, it's so nearly there but I just can't make it work atm after trying to combine the various bits of code this way and that... Alternatively, if somebody has another html-css version that works nicely for achieving this then please by all means let me know! Thanks v much in advance!

This works in modern CSS3 supporting browsers. But not pre-IE9.
http://alt-web.com/TEST/Resizable-BG.shtml
Nancy O.

How to get background image in cell not to repeat help please.

hi folks,
i want to fill a cell with a background image and not have
the image repeat if the cell is resized by a viewer by enlarging
the text. (Previously i jsut used CSS to control the text, so it
couldn't be rezied, but now it seems that firefox ignores the CSS).
ANyway i would like people not to be able to resize the cell and
the background not to repeat.
Here is an example that when the text is resized the
background image and cell saty the same but a scroll bar appears
for the text.
http://www.stephenhuyler.com/projects.cfm
thanks for any help!

Use CSS -
td.special { background-repeat:no-repeat; }
for this cell -
<td class="special"....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"intolight" <[email protected]> wrote in
message
news:enh08e$8u9$[email protected]..
> hi folks,
>
> i want to fill a cell with a background image and not
have the image
> repeat if
> the cell is resized by a viewer by enlarging the text.
(Previously i jsut
> used
> CSS to control the text, so it couldn't be rezied, but
now it seems that
> firefox ignores the CSS). ANyway i would like people not
to be able to
> resize
> the cell and the background not to repeat.
>
> Here is an example that when the text is resized the
background image and
> cell
> saty the same but a scroll bar appears for the text.
>
http://www.stephenhuyler.com/projects.cfm
>
> thanks for any help!
>

How do I keep the body background-image centered?

I have a body background-image that does not fill up the
entire window on the tops and bottoms of most monitors (it
strectches to the left and right just fine) and so I would like to
have it centered vertically with equal amounts of the
background-color #ECE5C8.
I assumed using background-position: 50% 50% would do the
trick and it does until switching to full screen mode and all the
content jumps upwards and messes up the whole site layout (IE
only-in friefox, the background-image still doesn't center) so
instead I have the background-position set to: 50% 0%.
Thanks a million to anyone who can help me get it centered, I
know there has to be an easy fix but I sure can't figure it out!
The site can be found here:
http://www.lightspacewebdesign.com/sacredsolas

There would be only two ways to make this layout 'work'.
1. Just make everything on that page a graphic. Then there is
no
possibility that resizing the text in the browser will blow
the layout.
This is a very bad idea for obvious reasons.
2. Have the text containing 'graphical box' built in pieces
so that as the
text expands, it can cause the box to expand as well. The
easiest way to do
this is with a top a middle and a bottom image of the box,
using each as the
background image of three stacked containers. Place the text
in the middle
container and as it expands, it will tile the middle
background image
vertically to give the impression of the box expanding. This
approach
doesn't lend itself to your background image, since there is
no way to tile
the background image to fill the newly created space.
Beyond that, I think you are a dead duck. The problem is not
that this is
what you were given to work with - it's that you didn't
understand how
unusable the design was when you accepted it. I think your
best option now
is to go back to the designer and explain to them how this
lovely layout
only works well in print, and not on the web. Show them how
it fails.
Solicit suggestions from them for how to make it work in a
medium where
there is no way to control the size of the text.
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
==================
"afriendofcheese" <[email protected]> wrote
in message
news:[email protected]...
> By "a rigid layout scheme that cannot allow flexibility"
I assume you mean
> that
> everything shouldn't be bound inside the position of the
background-image,
> but
> this is what the designer and client gave me to work
with.and so I have to
> make
> due.
>
> With that in mind, I hope someone out there can help me
out with this!
>

How can I have a background image for reference ?

HI,
I need to register align horizontally and vertically) about 100 images to the first. I don't want to stack or merge them. An ideal way to accomplish this would be to be able to set the first image as a background reference image for all images in the group. There would be left/right buttons so I could advance through the stack, a slider to adjust the visibility of the foreground image, and up/down & right/left arrows so I could move the upper image a pixel at a time in any direction. In this case I don't need to rotate the image, but this would also be something a person might want to control. Then I would move through the group of images, stopping on each one to align the image to the first. One at a time, or after I am done, it would save all the aligned images to a new filename and folder, without changing the transparency of the image or in any way using the background reference image. Without rotating the images, every pixel in the new image would be the same as in the original, except moved. I would start by resizing the canvas of all the images so they have a border area. This way I can move the image around and not lose any of it.
Of course I could put the reference image in the background layer and the image to be adjusted above it on another layer. Then i can use the background as a reference by making the upper image somewhat transparent. Finially I could delete the background layer and save the image with just the adjusted layer. But this would be tedius with 100 images, even worse if there were 1000..
Is there a reference background image capability in Photoshop CC ? Is there a better or different way to do this ? Or can Bridge do it ?

When I first posted this I had selected Photoshop as the community. After it had posted I saw it had changed and again changed it back to Photoshop. it again reset it to Premier Pro. I don't know why. Also, I had selected Refrence image as a tag and that keeps dissappearing. Even worse, there are no replies. What's the deal ?

Resizing Background Image

Similar Messages

Maybe you are looking for