Flexible background image

How can I have a background image that adjusts to the window
size of the user, so it's flexible? Thanks in advance for any
help!

Realistically you can't. Background images will tile (repeat)
or not. Any
method to stretch them is a kludge and will likely be an
eyesore for many
visitors. Better to rethink your design and come up with a
background image
that will tile successfully.
Walt
"connectivityone" <[email protected]> wrote
in message
news:fr9mfm$4tj$[email protected]..
> How can I have a background image that adjusts to the
window size of the
> user, so it's flexible? Thanks in advance for any help!

Similar Messages

Mixed results on iPad and iPhone 6 Plus with background image. How to fix this?

Flash Professional CC
I'm having an issue with adding images on iPhone 6 plus and iPad. I'm getting mixed results with two items: 1) a background image and 2) a button that should appear at the bottom left-hand corner on any device. In one case the background image appears enlarged and only shows about 30% of itself. In the other case, the bottom left-hand button appears about 50 pixels to the left when x=0. I also get different results when I set the following:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
This does not produce the expected results. I would like to have consistent results across iPad and iPhone 6 plus, which seams to be an issue. The immediate fix for this is to leave the images on the stage instead of using addChild. I could then just stretch the background image so that it spans the whole screen. But I want to add the items dynamically for greater flexibility.
Here are two cases:
Case #1:
This an iPhone 6 plus and you should notice 2 things. 1) There is black and white on both sides. The blue background SHOULD APPEAR ACROSS THE WHOLE SCREEN. 2) The red button in the corner SHOULD APPEAR IN THE LEFT MOST CORNER OF THE
SCREEN.
Case #2:
This an iPhone 6 plus and I have set the scale X, Y to the stage.stageWidth/Height:
mc_stageBackground_Main.scaleX = stage.stageWidth;
mc_stageBackground_Main.scaleY = stage.stageHeight;
This results in a close up of the background image.
Here is the code that I'm using:
import com.greensock.TweenLite;
import com.greensock.easing.*;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
//When this is active the background image spans across the device (iPhone 6 plus) correctly. The main logo image does not line up correctly.
/*stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;*/
var main_logo:MC_LOGO_MAIN = new MC_LOGO_MAIN();
var mainBackground_2208: MC_MAIN_BACKGROUND_2208 = new MC_MAIN_BACKGROUND_2208();
var mainBackground_1024: MC_BACKGROUND_1024 = new MC_BACKGROUND_1024();
var mainCorner: MC_MAINCORNER = new MC_MAINCORNER();
var chapters: MC_CHAPTERS = new MC_CHAPTERS();
var _stageWidth = 1024;
if (stage.stageWidth > _stageWidth)
    //Add bigger background if the stage is bigger than 1024
    mainBackground_2208.x = stage.stageWidth/2;
    mainBackground_2208.y = stage.stageHeight/2;
    addChild(mainBackground_2208);
    //Using this code results in a very close up view of the stage on iPhone 6 plus
    /*mc_stageBackground_Main.scaleX = stage.stageWidth;
    mc_stageBackground_Main.scaleY = stage.stageHeight;*/
    //Adds corner to the main screen.
    mainCorner.y = stage.stageHeight;
    mainCorner.x = (stage.stageWidth - stage.stageWidth);
    addChild(mainCorner);
    TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});
    //add logo to sit at 50 pixels from the top of the stage
    /*main_logo.x = stage.stageWidth/2;
    main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);
    addChild(main_logo);
    TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});*/
else
    trace ("The stage is 1024 or smaller");
    //Add 1024 background if stage is 1024 or smaller
    mainBackground_1024.x = stage.stageWidth/2;
    mainBackground_1024.y = stage.stageHeight/2;
    addChild(mainBackground_1024);
    //Adds corner to the main screen.
    mainCorner.y = stage.stageHeight;
    mainCorner.x = (stage.stageWidth - stage.stageWidth);
    addChild (mainCorner);
    TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});
    //adds chapters
    chapters.x = (stage.stageWidth - stage.stageWidth)+75;
    chapters.y = stage.stageHeight - 120;
    addChild(chapters);
    TweenLite.from(chapters, 1,{ height: 0, delay:.5, ease:Elastic.easeOut});
    //adds the Main logo to sit at 50 pixels from the top of the stage
    main_logo.x = stage.stageWidth/2;
    main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);
    addChild(main_logo);
    TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});

On all of the devices go to settings - facetime - iphone cellular calls - oFF, this part of Apple continuity.

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!
>

Background image not scrolling with text

My foreground text will resize with my browser but the background stays stationery, remains in the upper left. How do I fix this? I have included part of my code.
Ideally I would like to anchor text boxes to background image so it will scroll all together. If this can't be done I can use the margins and padding to adjust my text to work with the background I just need it to move with it. I've seen samples of this, which i think may have been done in photoshop but I would like to keep the copy live in DW. FYI, I added "background-attachment:scroll" to the code. I have searched and searched online for a solution to no avail. I am attaching a coupld of PDFs so you can see where I want to go. Any help is greatly appreciated. Thanks a bunch in advance and please be gentle.
body {
     background: #666666; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
     padding: 0;
     text-align: center;
     background-image: url(Images/Background_Radial77.jpg);
     background-repeat: no-repeat;
     margin-right: 0%;
     margin-top: 19%;
     color: #FFF;
     background-color: #FFF;
     background-attachment:scroll
     margin-left: 0%;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 100%;
     margin-bottom: 0;
     margin-left: 0;

My foreground text will resize with my browser but the background stays stationery, remains in the upper left. How do I fix this?
That's how web pages work. Remember, web design is nothing like print design. Printed pages or graphics are static.   Web pages must be flexible to accommodate different displays, text sizes and varying amounts of content.   Trying to precisely position text or other objects over a huge background is a bit like trying to nail Jello to a wall. No matter how hard you try, it will never hold up.
Fixed Background Example -
http://alt-web.com/DEMOS/fixed-background.shtml
Scrolling Divisions Example -
http://alt-web.com/DEMOS/multi-scrollbars.shtml
Your best option is to slice and dice your background image into usable segements in Photoshop or Fireworks. Save images only. Then re-assemble slices in DW to create flexible containers.
Basic Tutorial - Bringing 3 image slices into a CSS layout -
http://alt-web.com/DEMOS/Image-slices-in-a-CSS-based-layout.shtml
Advanced Tutorial -
Taking a Fireworks (or Photoshop) comp to a CSS based layout in DW
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
Good luck with your project,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Pages created from Template not showing background images

I have created a templated and everything looks great, except when I go to create a page using the template. When I start a new page the backbround images are not there. Can anyone help?
Thanks
Jessica

www.HSHpet.net is my website
I didn;t know about templates when I started and now I want to create one to streamline my site and make it easier to manange. So right now each pageis copy and pasted.
Here is the code from my dwt file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Pet Sitting, Dog Walking, Dog Boarding, Cat Sitting, Dog Training, Yorkville, Oswego, Montgomery, Plano, Sandwich, Aurora, Plainfield, Aurora. " />
<title>Home Sweet Home pet services | Pet Sitting | Cat Sitting | Dog Walking | Pet Boarding | Dog Training</title>
<style type="text/css">
.background {
          background-image: url(../378.gif);
          padding: 0px;
          border-top-style: none;
          border-right-style: none;
          border-bottom-style: none;
          border-left-style: none;
          font-family: Georgia, "Times New Roman", Times, serif;
          font-weight: bold;
.table backgroun {
          background-image: url(../336.gif);
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 14pt;
tr td .background1 {
          background-color: #FFF;
          font-family: Georgia, "Times New Roman", Times, serif;
          background-image: none;
          border-top-style: solid;
          border-right-style: solid;
          border-bottom-style: solid;
          border-left-style: solid;
          font-size: 14pt;
          font-weight: normal;
          text-align: left;
blue column {
          background-color: #09F;
          font-family: "Bradley Hand ITC";
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
          background-color: #FFF;
          background-image: url(../435.gif);
.background1 {
          background-image: url(../378.gif);
          border-top-color: #FFF;
          border-right-color: #FFF;
          border-bottom-color: #FFF;
          border-left-color: #FFF;
          padding: 0px;
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 14pt;
          border-top-style: inset;
          border-right-style: inset;
          border-bottom-style: inset;
          border-left-style: inset;
.background1 .background1 td .background tr td ul li {
          text-align: left;
.background11 {
          background-image: url(../378.gif);
          border-top-color: #FFF;
          border-right-color: #FFF;
          border-bottom-color: #FFF;
          border-left-color: #FFF;
          padding: 0px;
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 14pt;
          border-top-style: inset;
          border-right-style: inset;
          border-bottom-style: inset;
          border-left-style: inset;
</style>
<script type="text/javascript">
function MM_validateForm() { //v4.0
if (document.getElementById){
    var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
    for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
      if (val) { nm=val.name; if ((val=val.value)!="") {
        if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
          if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
        } else if (test!='R') { num = parseFloat(val);
          if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
          if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
            min=test.substring(8,p); max=test.substring(p+1);
            if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
      } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
    } if (errors) alert('The following error(s) occurred:\n'+errors);
    document.MM_returnValue = (errors == '');
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18640274-1']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</head>
<body>
<table width="85%" border="5" align="center" cellpadding="5" class="background1">
<tr align="center" valign="middle" class="table">
    <td colspan="2" class="table"><img src="../HSHLogo_White.png" width="350" height="125" alt="Home Sweet Home logo" longdesc="http://www.HSHpet.net" /></td>
</tr>
<tr>
    <td colspan="2" align="center"><table width="90%" border="4" align="center" class="background">
      <tr align="center" valign="middle">
        <td><img src="../dog.jpg" width="150" height="150" alt="golden retriever" /></td>
        <td><img src="../fish.jpg" width="150" height="150" alt="fish in bowl" /></td>
        <td><img src="../cat.jpg" width="150" height="150" alt="DSH tabby" /></td>
        <td><img src="../bird.jpg" width="150" height="150" alt="peach faced love birds" /></td>
        <td><img src="../bunny.jpg" width="150" height="150" alt="bunny" /></td>
        <td><img src="../lizzard.jpg" width="150" height="150" alt="lizzard" /></td>
        <td><img src="../cat&dog.jpg" width="150" height="150" alt="puppy & kitten" /></td>
      </tr>
      <tr align="center" valign="bottom">
        <td colspan="7"><div align="center">
          <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="../index.html" class="MenuBarHorizontal">Home</a> </li>
            <li><a href="#" class="MenuBarItemSubmenu">About Us</a>
              <ul>
                <li><a href="../aboutus.html">About Us</a></li>
                <li><a href="../teammembers.html">Team Members</a></li>
                <li><a href="../15questions.html">15 Questions</a></li>
                <li><a href="../happytails.html">Happy Tails</a></li>
              </ul>
            </li>
            <li><a class="MenuBarItemSubmenu" href="../petsitting.html">Services</a>
              <ul>
                <li><a href="#">Pet Sitting</a>                  </li>
                <li><a href="../k9cleanup.html">K9 Cleanup</a></li>
                <li><a href="../overnightcare.html">Home Boarding</a></li>
                <li><a href="training.htm">Training</a></li>
              </ul>
            </li>
            <li><a href="#" class="MenuBarItemSubmenu">FAQ's & Policies</a>
              <ul>
                <li><a href="../FAQ_PetSitting.html">Pet Sitting</a></li>
                <li><a href="../FAQ_K9Cleanup.html">K9 Cleanup</a></li>
                <li><a href="../FAQ_Boarding.html">Home Boarding</a></li>
                <li><a href="#">Training</a></li>
              </ul>
            </li>
<li><a href="../NewsLinks.html">News & Links</a></li>
            <li><a href="../CPR.html">Pet CPR</a></li>
            <li><a href="../employment.html">Employment</a></li>
            <li><a href="../contactus.html">Contact Us</a></li>
            <li><a href="#" class="MenuBarItemSubmenu">Schedule Service</a>
              <ul>
                <li><a href="https://www.powerpetsitter.net/login.aspx?bid=584">Existing Clients</a></li>
                <li><a href="https://www.powerpetsitter.net/client/check_zipcode.aspx?id=584">New Clients</a></li>
              </ul>
            </li>
          </ul>
        </div></td>
        </tr>
    </table></td>
</tr>
<tr valign="top" class="background1">
    <td class="background"><table width="100%" border="0" class="background1">
      <tr class="background1">
        <td align="center" valign="top"><p class="title">Tips for Conducting a Professional Pet Sitter Interview</p></td>
      </tr>
      <tr>
        <td align="center" valign="top">
          <p align="left">Pet Sitters International (also known as PSI) was founded in 1994 as the first international association for professional pet sitters.             The mission of Pet Sitters International is to foster excellence and continuous learning in the pet-sitting profession by providing the best education and tools of the trade. We are very proud of our PSI membership.        </p>
        </td>
      </tr>
      <tr>
        <td align="center" valign="top"><table width="90%" border="0" align="center" class="background1">
          <tr align="center" valign="middle">
            <td><br/>                <a href="https://www.facebook.com/pages/Home-Sweet-Home-pet-sitting/107491737744" target="_top" title="Home Sweet Home pet sitting"><img src="https://badge.facebook.com/badge/107491737744.2549.1193722049.png" alt="facebook" width="120" height="65" align="absmiddle" style="border: 0px;" /></a></td>
            <td><a href="http://www.addthis.com/bookmark.php?v=250&pub=autiger811" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s7.addthis.com/static/btn/sm-share-en.gif" alt="Bookmark and Share" width="83" height="16" align="absmiddle" style="border:0"/></a>                <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=autiger811"></script></td>
            <td><a href="http://www.addthis.com/bookmark.php?v=250&pub=autiger811" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s7.addthis.com/static/btn/lg-bookmark-en.gif" alt="Bookmark and Share" width="125" height="16" align="absmiddle" style="border:0"/></a></td>
            <td><table width="170" border="0" cellspacing="0" cellpadding="0">
              <tr bgcolor="#000000" valign="top">
                <td width="9" rowspan="2"><img src="http://img.constantcontact.com/ui/images/visitor/tl_brdr2_trans.gif" alt="" width="9" height="9" border="0" /></td>
                <td width="152" height="1" align="center" bgcolor="#000000"><img src="http://img.constantcontact.com/ui/images/spacer.gif" alt="" width="1" height="1" border="0" /></td>
                <td width="9" rowspan="2" align="right"><img src="http://img.constantcontact.com/ui/images/visitor/tr_brdr2_trans.gif" alt="" width="9" height="9" border="0" /></td>
                </tr>
              <tr>
                <td width="152" height="8" bgcolor="#ffffff"><img src="http://img.constantcontact.com/ui/images/spacer.gif" alt="" width="1" height="1" border="0" /></td>
                </tr>
              <tr>
                <td width="170" colspan="3" align="center" style="border-left: 1px solid #000000;border-right: 1px solid #000000;"><div align="center">
                  <form action="http://visitor.constantcontact.com/d.jsp" method="post" name="ccoptin" target="_blank" id="ccoptin" style="margin-bottom:3;">
<font style="font-weight: bold; font-family:Georgia; font-size:13px; color:#000000;">Join Our Newsletter</font><br />
                    <font style="font-weight: normal; font-family:Arial; font-size:10px; color:#000000;">Email:</font>
                    <input type="text" name="ea" size="14" value="" style="font-family: Arial; font-size:10px; border:1px solid #999999;" />
                    <input type="submit" name="go" value="Join" class="submit" style="font-family:Arial,Helvetica,sans-serif; font-size:11px;" />
                    <input type="hidden" name="m" value="1102843860723" />
                    <input type="hidden" name="p" value="oi" />
                    </form>
                  </div></td>
                </tr>
              <tr bgcolor="#000000" valign="bottom">
                <td rowspan="2"><img src="http://img.constantcontact.com/ui/images/visitor/bl_brdr2_trans.gif" alt="" width="9" height="9" border="0" /></td>
                <td width="152" height="8" align="center" bgcolor="#ffffff"><img src="http://img.constantcontact.com/ui/images/spacer.gif" alt="" width="1" height="1" border="0" /></td>
                <td rowspan="2" align="right"><img src="http://img.constantcontact.com/ui/images/visitor/br_brdr2_trans.gif" alt="" width="9" height="9" border="0" /></td>
                </tr>
              <tr>
                <td width="152" bgcolor="#000000"><img src="http://img.constantcontact.com/ui/images/spacer.gif" alt="" width="1" height="1" border="0" /></td>
                </tr>
              </table></td>
            </tr>
          </table></td>
      </tr>
    </table></td>
    <td align="center"><table width="90%" border="1" class="background">
      <tr>
        <td align="center" valign="top" bgcolor="#00AEEF"><p style="font-family: 'Bradley Hand ITC'; font-size: 18pt; font-weight: bold;">Give us a call:</p>
          <p><a href="http://www.ringcentral.com" target="Callback_RingMe" onclick='var wind = window; var winop = wind.open; winop("http://www.ringcentral.com/ringme/?uc=F476D3FEFF03EF8DEB3A4803BAD689C9185666081445,0,&s=no &v=2", "Callback_RingMe", "resizable=no,width=380,height=360"); return false;'><img border="0" src="http://www.ringcentral.com/ringme/F476D3FEFF03EF8DEB3A4803BAD689C9185666081445,0,/1/ringme _6.gif" alt="virtual office phone" /></a></p></td>
      </tr>
      <tr>
        <td align="center" valign="top" bgcolor="#00AEEF"><p style="font-family: 'Bradley Hand ITC'; font-size: 18pt; font-weight: bold;">Send us a message:</p>
          <form id="form1" name="form1" method="post" action="../formtoemailpro.php">
            <p>Your Name: </p>
            <p>
              <input name="Name" type="text" id="Name" onblur="MM_validateForm('Name','','R');return document.MM_returnValue" />
            </p>
            <p>Your Phone #:</p>
            <p>
              <input name="phone" type="text" id="phone" onblur="MM_validateForm('phone','','RisNum');return document.MM_returnValue" />
            </p>
            <p>Your Email Address:</p>
            <p>
              <input name="email" type="text" id="email" onblur="MM_validateForm('email','','RisEmail');MM_validateForm('email','','RisEmail');ret urn document.MM_returnValue" />
            </p>
            <p>I'm interested in:</p>
            <p>
              <select name="services" id="services">
                <option value="mid-day care" selected="selected">Mid-day Dog Walks</option>
                <option value="K9 cleanup">K9 Clean up</option>
                <option value="vacation care">Vacation Care</option>
                <option value="cat care">Cat & Small Animal Care</option>
                <option value="Overnights">Overnight Care (my home)</option>
                <option value="Pet Boarding">Overnight Care (pet sitter's home)</option>
                <option value="Walk & Trains">Walk & Trains</option>
                <option value="other">Other</option>
              </select>
            </p>
            <p>Comments:</p>
            <p>
              <textarea name="comments" id="comments" cols="25" rows="5"></textarea>
            </p>
            <p>
            <img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image"><br><a href="#" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">Reload Image</a><br />
            Verify code: <input type="text" name="captcha_code" size="10" maxlength="6">
            </p>
            <p>
              <input type="submit" name="Submit" id="Submit" value="Submit" />
              <input type="reset" name="reset" id="reset" value="Reset" />
            </p>
          </form>
          <p> </p></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#00AEEF"><p> <span class="center" style="font-family: 'Bradley Hand ITC'; font-size: 18pt; font-weight: bold; text-align: center;">Pet Care Services</span></p>
          <ul>
            <li>Dog Walking, Dog Boarding </li>
            <li>Pet Waste Removal Services</li>
            <li>Bird & Reptile Care </li>
            <li>Walk & Trains</li>
            <li>Cat Sitting</li>
            <li>Small Animal Care</li>
            <li>In Home Overnight Care </li>
            <li>Flexible and Custom Care </li>
            <li>Medications & Injectables</li>
            <li>Dog Training </li>
            <li>Puppies and Older Pets </li>
            <li>Handicapped Pets</li>
          </ul>
          <p style="font-size: 14pt; text-align: center; font-weight: normal;"> </p>
          <p style="font-size: 11pt; text-align: center; font-weight: normal;">For your convinience we accept:</p>
          <p style="font-size: 14pt; text-align: center; font-weight: normal;"><img src="../visa_mastercard.jpg" alt="visa/mastecard" width="100" height="50" /></p></td>
      </tr>
    </table></td>
</tr>
<tr>
    <td colspan="2" align="center" valign="middle"><span class="background2">© 2007-2015 Home Sweet Home pet services</span></td>
</tr>
</table>
<p> </p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Replaceable background image

Is there a way to code a CSS style with a background image
like
background: #FFFFFF url(image.gif) right top no-repeat;
but code it in such a way that the image could be replaced by
a variable
that is in an editable region of a template?
Rick A.
Pleasanton CA

Very good -- I have used template parameters before and
appreciate your
reminding me about them...
RA
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
> Investigate using Template parameters to select
specified editable
> attributes (search DW's F1 help for those terms).
>
> --
> 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
> ==================
>
>
> "Rick Altman" <[email protected]> wrote in
message
> news:[email protected]...
>> My quest is for design-time functionality, and in
the past hour, I have
>> concluded that, based on my particular skill set and
comfort level, the
>> path of least resistance is to simply duplicate the
style in the file and
>> modify it as a one-off. Although if there is a
better way to be able to
>> flexibly choose background images for a given style
at design-time, I'm
>> all ears...
>>
>>
>>
>>
>>
>> --
>> Rick A.
>> Pleasanton CA
>>
>>
>>
>>
>>
>> "Murray *ACE*"
<[email protected]> wrote in message
>> news:[email protected]...
>>> Let's explore this a bit.
>>>
>>> If your question is this -
>>>
>>> "Can I have page-specific background images when
I am using templates"
>>>
>>> then the answer is yes. This would be a
DESIGN-TIME function only,
>>> however, so you would have to specify the
background image as you are
>>> working on the page in DW.
>>>
>>> If your question is this -
>>>
>>> "Can I have a function that allows the visitor
to select a background
>>> image for the page"
>>>
>>> then the answer is yes. This would be a RUN-TIME
function only,
>>> however, and wouldn't really have anything to do
with DW or with
>>> templates.
>>>
>>> Which is it?
>>>
>>> --
>>> 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
>>> ==================
>>>
>>>
>>> "Rick Altman" <[email protected]>
wrote in message
>>> news:[email protected]...
>>>> Is there a way to code a CSS style with a
background image like
>>>>
>>>> background: #FFFFFF url(image.gif) right top
no-repeat;
>>>>
>>>> but code it in such a way that the image
could be replaced by a
>>>> variable that is in an editable region of a
template?
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> Rick A.
>>>> Pleasanton CA
>>>>
>>>>
>>>>
>>>
>>
>>
>

How to specify relative path for background image in xsl

Hi,
I am generating a PDF from Apcahe FOP. I have an xsl for that, in the xsl fo:block I am displaying a background image. When the image path is absolute like..C:\image\logo.png it works fine. But I want to have the image in my WebContent\images folder and my xsl file is in WebContent\xsls folder. So when I try giving the relative path as ../images/logo.png, the image is not displayed.
Can anyone tell how to do this???
Thanks,
Sanjeev.

I have a fo:block like this :
<fo:block border-style="solid" border-width="0.2pt" text-align="left"
                         background-image="url('http://localhost:8080/Project/images/table_header_center.png')"
                         font-size="8pt" font-weight="bold" color="white" padding-top="1pt"
                         padding-bottom="1pt">
                         <xsl:value-of select="tr/td/span" />
                    </fo:block>In the above code you can see that the the background-image="url('http://localhost:8080/Project/images/table_header_center.png')"
has been given as absolute. The images folder is in my WebContent directory. I want this path to be relative to the context of my application , something like background-image="url('../images/table_header_center.png')".
Thanks.
sanjeev.

In linux, saving a background image (set as Desktop)feature doesnt download my image to wallpaper folder..or even to standard "Save download" feature. Can I tell firefox where (what folder) to save my "Set as Desktop" picture?

When I find a suitable picture to use as wallpaper" I often right click and use the menu item "Set as Desktop Background". The file ""example.jpg" is saved in directory\folder "/home/user" rather than for example "/home/user/my wallpaper" or in the directory
"/home/user/Downloads". The latter as being set under the "Downloads" section on the "General" tab in the "Preferences" dialog box.
Is there a configuration file where I can change the default location to save my "Set as Desktop Background" images. Or better still can the menu be customized to launch the application that allows me to set my desktop wallpapers?
I am using the "PCLinuxOS" Linux OS but I have encountered this issue in many if not all the Linux distributions I have sampled.

Don't use "Set as Desktop". Use ''' "Save Image As..." ''' instead, and file it with your other "wallpaper" images so the operating system has access to those images.
IIRC, Firefox saves a "desktop image" to the Profile folder, and it will only save one image, at that. Change the image and the previous one is gone.

Washed out background image on Treo Pro

Hi:
When I set my background image on my today screen (check the box in settings, browse to image - use 320x320 resolution) I get a "washed out" version of the image regardless of its original color, tone or intensity. Images from the preinstalled themes are fine - vibrant and clear - but the user set images are very light (almost like a 50 percent transparency in Photoshop for example). I have tried both .jpg format and .png. Backlight settings do not cure this either.
Any ideas?
Thanks.
Post relates to: Treo Pro T850 (Bell)
This question was solved.
View Solution.

Hi Again:
Upon further investigation, I have discovered that the options for setting background and transparency levels is found through the pictures and videos explorer not the file explorer.
As suggested I have set the transparency to 0 and the image (Crab Nebula through the Hubble space telescope) is as bright and vibrant as it should be.
Thanks again for the direction - it's much appreciated.
Post relates to: Treo Pro T850 (Bell)

Anchored graphic as background image?

I am working with text flowing continuously through a master text frame unto multiple pages and I am trying to anchor a full-page background image (with bleed) onto specific pages. Is this possible?
I want the background image to stay with the relevant heading on each page. However, when I use "Object/Anchored Object/Insert" to do this with "custom" as the anchor option I end up with a frame on the same layer as my text. This is okay, but when I place an image in the frame, it covers the text I have entered in the text frame. I can see the dotted line indicating the anchor connection, but not the text it is anchored to. I can't change the order of objects within the layer because the "Arrange" options are greyed out. Changing the text wrap options does not help.

Thanks Bob! Really good to know. I will stop hitting my head against a brick wall!
Adding backgrounds to master pages doesn't really cut it since I still can't have them flow dynamically with the continually evolving text in this project. (I suspect I might be able to flow backgrounds with text in Word, if it came to it, but of course I chose InDesign to give me more control, particularly over the non-text elements of the layout).

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 to set a background image to fill the entire screen on any device in a spark mobile application

Hi,
I started developing a mobile application with Flex.
I'm trying to set a background image to fill the whole screen. I've been stucked at this point for days now. I tried everything and no solution seems to work for me.
I'm using a TabbedViewNavigatorApplication and i need to set some background images on views.
I need my image to fill the entire screen on any device. i don't need to mantain image aspect ratio, just need it to be fullscreen. This seemed to work when setting a custom skin on the TabbedViewNavigatorApplication, however this blocked all my views for some reason and all components contained in view became invisible.
Can you please tell me how can i achieve this?
Kind regards,
Dan

Basically you need a larger image which can accommodate any device. The trick is to show only what each device can display, so therefore some clipping will occur based on device. Have something centered and towards margins have a gradient or just plane colors that way the stuff in the middle will be visible on every device while nobody will care if you are clipping from the color fill.
C

Background image path changes in Template

I have a template I've created, but whenever I attempt to
create a new page from that template the path to the background
image changes automatically causing it to disappear.
The template displays this path:
body {
background-image: url(../img/bg.gif);
background-repeat: repeat-y;
background-position: center;
background-color: #E8F1FA;
While the page created from the template shows this path:
body {
background-image: url(file:///B|/Web
Development/website/img/bg.gif);
background-repeat: repeat-y;
background-position: center;
background-color: #E8F1FA;
What is causing this? Thanks in advance.

Answered on DW forum.
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
==================
"logicore" <[email protected]> wrote in
message
news:gecn6f$dag$[email protected]..
>I have a template I've created, but whenever I attempt to
create a new page
> from that template the path to the background image
changes automatically
> causing it to disappear.
>
> The template displays this path:
>
> body {
> background-image: url(../img/bg.gif);
> background-repeat: repeat-y;
> background-position: center;
> background-color: #E8F1FA;
> }
>
> While the page created from the template shows this
path:
>
> body {
> background-image: url(file:///B|/Web
Development/website/img/bg.gif);
> background-repeat: repeat-y;
> background-position: center;
> background-color: #E8F1FA;
> }
>
> What is causing this? Thanks in advance.
>
>
>

Gif loader for background image

I simply want to run an animated gif while my background image loads for a slideshow.
I've searched the web and this forum for hours and can't get the various bits of code tips (ajax, jquery) to work because I'm a totaly idiot when it comes to code...i've tried cutting and pasting in many different configurations but can't get anything to work properly.
Can someone help me out to get this to work?
I have this slideshow:
http://www.piquecollaborative.com/fox.html
and want an animated gif to run during load of each page
gif is this:
http://www.piquecollaborative.com/images/loading.gif
here is my code for the page(s)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="Matthew Fox Residence by PIQUE architecture, Peter Jahnke, Eric Meglasson" />
<meta name="keywords" content="pique llc, architecture, emerging architects, young architects, northwest, peter jahnke, eric meglasson, keith ballantyne, collective studio, collected design" />
<title>PIQUE: Fox House</title>
<style type="text/css">
.projectpage {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #333;
body,td,th {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #333;
    font-size: 12px;
body {
    background-image: url(images/fox-01.jpg);
    background-repeat: no-repeat;
#title {
    position:absolute;
    width:350px;
    height:65px;
    z-index:1;
    left: 10px;
    top: 10px;
#apDiv1 {
    position:absolute;
    width:108px;
    height:161px;
    z-index:2;
    top: 3px;
    left: 8px;
#apDiv2 {
    position:absolute;
    width:237px;
    height:160px;
    z-index:3;
    left: 118px;
    top: 3px;
    text-align: right;
#text {
    position:absolute;
    width:351px;
    height:194px;
    z-index:4;
    left: 10px;
    top: 90px;
    background-image: url(images/fox-01.jpg);
#project-text {
    position:absolute;
    width:355px;
    height:300px;
    z-index:5;
    top: 288px;
    text-align: justify;
    left: 13px;
#right-arrow {
    position:absolute;
    width:90px;
    height:330px;
    z-index:6;
    left: 915px;
    top: 270px;
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body class="projectpage" onload="MM_preloadImages('images/arrow-rt-inv.png')">
<div id="title"><img src="images/fox-title.gif" width="350" height="65" /></div>
<div class="projectpage" id="text">
<div id="apDiv2">Fox House<br />
    central Oregon<br />
    single family residence<br />
    4175 sqft<br />
    2010<br />
    Timberline construction, Elemental engineering </div>
<div id="apDiv1">name:<br />
    location:<br />
    type:<br />
    size:<br />
    year:<br />
    collaborators: </div>
<img src="images/line-dot-small.png" width="361" height="5" /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img src="images/line-dot-small.png" width="361" height="5" /> </div>
<div id="project-text">
<p> This home sits on a bluff overlooking rolling sagebrush meadows   in Oregon’s High Desert with views of the Cascade Mountains dominating    the western horizon. The owners, Matthew and Margherita Fox requested   an extremely durable and energy efficient home for their family. The   request for a net zero house necessitated extensive use of photovoltaic   panels, ground source heat-pumps, careful consideration of day   lighting and shading strategies, and a super-insulated structure. </p>
<p>Italian architect and childhood friend Maria Chiara Trevisan   created the original vision for the structure as a gift to the Foxes.    The three masses, originally conceived as parallelepipedo (rectangular   cubes) resting at various angles in the earth, evolved into three   shelled structures clad in stone, a loose reference to the Three   Sisters mountains which dominate the home’s view.</p>
<p>Photos by Nicole Werner, Bob Woodward, Peter Jahnke</p>
</div>
<div id="right-arrow"><a href="fox02.html"><img src="images/arrow-rt.png" alt="" name="Image1" width="48" height="48" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','images/arrow-rt-inv.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
</body>
</html>
can anyone help me get a leg up on this? Sorry to be such a noob. This is not my trade and i have more respect for you all now than ever before! sorry again,

You might want to reconsider the use of absolutely positioned div's for layout purposes...
it often leads to big difficulties.http://www.apptools.com/examples/pagelayout101.php
Regarding your loading gif, try defining a container for the picture
and position your loading gif as a centered non-repeating background for container
and insert your image in the container.

Animated gif layered above background image

I have a static background image which is displayed in a JPanel. I need to display animated gifs at certain positions on the base image. For every new frame of the animation, the paint method is called whcih attempts to load the entire base image + all the new animated images which is extremely slow!. It also means the animated gif keeps on getting loaded, and seldom gets beyond the first frame.
Im sure many people have had to do something like this. Is the solution to draw the gifs on the glasspane (or use layered panes), and to have a seperate paint method? or is their a simple approach like setting a special clip area.

thanks for the help...
The size of the background image is approx 400*400 pixels (gif or jpg), and the icons are 25*25, and have between 1 and 6 frames.
Here comes the code... I havent finished with the mediatracker stuff, but youll get the idea Im sure.
public void paint(Graphics g) {
    MediaTracker tracker = new MediaTracker(this);
    tracker.addImage(image,0);
    try {tracker.waitForID(0);}
    catch (InterruptedException e){}
    g.drawImage(image, 0, 0, this); //draw background image (approx 400*400 pixels)
    int ICON_ID = -1;
    Image img;
    //draw all the icons...
    //all icons have between 1 and 6 frames. 25*25 pixels.
    for (int i = 0; i < icon_IDs.size(); i++) {
      try {
        ICON_ID = new Integer(icon_IDs.elementAt(i).toString()).intValue();
        Point p = dm.getIconPosition(ICON_ID);
        if (isAlarm(ICON_ID)) {        //ITS AN ALARM - use animated gif
          img = getAlarmImage(ICON_ID);
        else                          //NORMAL ICON - no animation
          img = DataDefinition.getImageIcon(dm.getIconType(ICON_ID)).getImage();
        tracker.addImage(img,0);
        try {tracker.waitForID(0);}
        catch (InterruptedException e){}
        int width = DataDefinition.getSize(dm.getIconType(ICON_ID)).width;
        int height = DataDefinition.getSize(dm.getIconType(ICON_ID)).height;
        g.setClip(p.x, p.y, p.x+width, p.y+height);
        g.drawImage(img, p.x, p.y, p.x+width, p.y+height, 0,0,img.getWidth(this),img.getHeight(this),this);
      catch (SQLException sqle) {
        System.out.println("Could not find position of icon : " + ICON_ID);
}

Flexible background image

Similar Messages

Maybe you are looking for