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

Similar Messages

Proportionaly scaling down background image when restoring down browser window

Hi all, i need some help, i want to minimize(scale or restore down) window to not-fullscreen browser window (and ajusting size of window manually over arrows in the corners of the window) and retain background picture full size (i need to picture proportionally follows screen scaling).
I`m new into flash stuff, so please tell me if it is the code or what, and if you know part of code that will do the job, write me down!
Thanks!

I take it you want a liquid effect. I wrote a site that does that or rather the background of this site does that http://www.droolpigs.com/ . It's fairly simple just tell the backrgound to change width and height on stage resize.
    public class NuPigs2 extends MovieClip
        var holder:btnHolder; // container for nav buttons
        var onStage:*;     // this can be anything
        var ratio:Number;
        var rRatio:Number;
        var newRatio:Number;
        var com:FLVPlayback;
        var bkg:*;
        public function NuPigs2(){
            com = new FLVPlayback();
            setCom("droolPigsWrestling.flv");                     // set the video for player com
            addChildAt(com, 0);
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;    // this is needed for resizing to work
            onStage = com;                                                   // the video player is assigned to onStage
            ratio = onStage.height/onStage.width;
            rRatio = onStage.width/onStage.height;
            addHolder();
            fillBG();
            stage.addEventListener(Event.RESIZE, fillBG);
////////////////////// FILL BG ////////////////////////
// this code makes the video resize with the stage
        function fillBG(evt:Event = null):void {
            newRatio = this.stage.stageHeight/this.stage.stageWidth;
            holder.x = this.stage.stageWidth - (holder.width +25);    // position the buttons on the right
            holder.y = 50;
            if (newRatio > ratio){
                 onStage.height = this.stage.stageHeight;
                 onStage.width = (this.stage.stageHeight * rRatio);
                else {
                  onStage.width = this.stage.stageWidth;
                  onStage.height = this.stage.stageWidth * ratio;

Need help flushing background image to top of browser window

OK, this may be a very common problem, I'm just an idiot. In
Dreamweaver I have a background image in a centered div on the
page. Can anyone help me get that div to the absolute top of that
screen? I've already set the body tag to 'margin=0 padding=0' but I
don't know what else to do. Now when I look at it it's fine on my
pc but the mac is the one that displays the space....Help!
-Thanks, Nathan
Website in question:
www.stormsheltersdirect.com

Your site is asking for a user name and password?

Resize to fit browser window

does anyone know how i can set my Flex app to scale to fit
the browser window . I tried setting the html parameters and
stage.scaleMode = "exactFit" etc.. but neither seems to work
An example would be nice.
kimb

looks like it requires this javascript file: AC_OETags.js
// Flash Player Version Detection - Rev 1.5
// Detect Client Browser type
// Copyright(c) 2005-2006 Adobe Macromedia Software, LLC. All
rights reserved.
var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ?
true : false;
var isWin =
(navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true :
false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ?
true : false;
function ControlVersion()
var version;
var axo;
var e;
// NOTE : new ActiveXObject(strFoo) throws an exception if
strFoo isn't in the registry
try {
// version will be set for 7.X or greater players
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
version = axo.GetVariable("$version");
} catch (e) {
if (!version)
try {
// version will be set for 6.X players only
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
// installed player is some revision of 6.0
// GetVariable("$version") crashes for versions 6.0.22
through 6.0.29,
// so we have to be careful.
// default to the first public version
version = "WIN 6,0,21,0";
// throws if AllowScripAccess does not exist (introduced in
6.0r47)
axo.AllowScriptAccess = "always";
// safe to call for 6.0r47 or greater
version = axo.GetVariable("$version");
} catch (e) {
if (!version)
try {
// version will be set for 4.X or 5.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
version = axo.GetVariable("$version");
} catch (e) {
if (!version)
try {
// version will be set for 3.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
version = "WIN 3,0,18,0";
} catch (e) {
if (!version)
try {
// version will be set for 2.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
version = "WIN 2,0,0,11";
} catch (e) {
version = -1;
return version;
// JavaScript helper required to detect Flash Player PlugIn
version information
function GetSwfVer(){
// NS/Opera version >= 3 check for Flash plugin in plugin
array
var flashVer = -1;
if (navigator.plugins != null &&
navigator.plugins.length > 0) {
if (navigator.plugins["Shockwave Flash 2.0"] ||
navigator.plugins["Shockwave Flash"]) {
var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? "
2.0" : "";
var flashDescription = navigator.plugins["Shockwave Flash" +
swVer2].description;
var descArray = flashDescription.split(" ");
var tempArrayMajor = descArray[2].split(".");
var versionMajor = tempArrayMajor[0];
var versionMinor = tempArrayMajor[1];
if ( descArray[3] != "" ) {
tempArrayMinor = descArray[3].split("r");
} else {
tempArrayMinor = descArray[4].split("r");
var versionRevision = tempArrayMinor[1] > 0 ?
tempArrayMinor[1] : 0;
var flashVer = versionMajor + "." + versionMinor + "." +
versionRevision;
// MSN/WebTV 2.6 supports Flash 4
else if
(navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1)
flashVer = 4;
// WebTV 2.5 supports Flash 3
else if
(navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1)
flashVer = 3;
// older WebTV supports Flash 2
else if (navigator.userAgent.toLowerCase().indexOf("webtv")
!= -1) flashVer = 2;
else if ( isIE && isWin && !isOpera ) {
flashVer = ControlVersion();
return flashVer;
// When called with reqMajorVer, reqMinorVer, reqRevision
returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer,
reqRevision)
versionStr = GetSwfVer();
if (versionStr == -1 ) {
return false;
} else if (versionStr != 0) {
if(isIE && isWin && !isOpera) {
// Given "WIN 2,0,0,11"
tempArray = versionStr.split(" "); // ["WIN", "2,0,0,11"]
tempString = tempArray[1]; // "2,0,0,11"
versionArray = tempString.split(","); // ['2', '0', '0',
'11']
} else {
versionArray = versionStr.split(".");
var versionMajor = versionArray[0];
var versionMinor = versionArray[1];
var versionRevision = versionArray[2];
// is the major.revision >= requested major.revision AND
the minor version >= requested minor
if (versionMajor > parseFloat(reqMajorVer)) {
return true;
} else if (versionMajor == parseFloat(reqMajorVer)) {
if (versionMinor > parseFloat(reqMinorVer))
return true;
else if (versionMinor == parseFloat(reqMinorVer)) {
if (versionRevision >= parseFloat(reqRevision))
return true;
return false;
function AC_AddExtension(src, ext)
if (src.indexOf('?') != -1)
return src.replace(/\?/, ext+'?');
else
return src + ext;
function AC_Generateobj(objAttrs, params, embedAttrs)
var str = '';
if (isIE && isWin && !isOpera)
str += '<object ';
for (var i in objAttrs)
str += i + '="' + objAttrs
+ '" ';
for (var i in params)
str += '><param name="' + i + '" value="' + params
+ '" /> ';
str += '></object>';
} else {
str += '<embed ';
for (var i in embedAttrs)
str += i + '="' + embedAttrs
+ '" ';
str += '> </embed>';
document.write(str);
function AC_FL_RunContent(){
var ret =
AC_GetArgs
( arguments, ".swf", "movie",
"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
, "application/x-shockwave-flash"
AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
function AC_GetArgs(args, ext, srcParamName, classid,
mimeType){
var ret = new Object();
ret.embedAttrs = new Object();
ret.params = new Object();
ret.objAttrs = new Object();
for (var i=0; i < args.length; i=i+2){
var currArg = args.toLowerCase();
switch (currArg){
case "classid":
break;
case "pluginspage":
ret.embedAttrs[args
] = args[i+1];
break;
case "src":
case "movie":
args[i+1] = AC_AddExtension(args[i+1], ext);
ret.embedAttrs["src"] = args[i+1];
ret.params[srcParamName] = args[i+1];
break;
case "onafterupdate":
case "onbeforeupdate":
case "onblur":
case "oncellchange":
case "onclick":
case "ondblClick":
case "ondrag":
case "ondragend":
case "ondragenter":
case "ondragleave":
case "ondragover":
case "ondrop":
case "onfinish":
case "onfocus":
case "onhelp":
case "onmousedown":
case "onmouseup":
case "onmouseover":
case "onmousemove":
case "onmouseout":
case "onkeypress":
case "onkeydown":
case "onkeyup":
case "onload":
case "onlosecapture":
case "onpropertychange":
case "onreadystatechange":
case "onrowsdelete":
case "onrowenter":
case "onrowexit":
case "onrowsinserted":
case "onstart":
case "onscroll":
case "onbeforeeditfocus":
case "onactivate":
case "onbeforedeactivate":
case "ondeactivate":
case "type":
case "codebase":
case "id":
ret.objAttrs[args] = args[i+1];
break;
case "width":
case "height":
case "align":
case "vspace":
case "hspace":
case "class":
case "title":
case "accesskey":
case "name":
case "tabindex":
ret.embedAttrs[args
] = ret.objAttrs[args] = args[i+1];
break;
default:
ret.embedAttrs[args
] = ret.params[args] = args[i+1];
ret.objAttrs["classid"] = classid;
if (mimeType) ret.embedAttrs["type"] = mimeType;
return ret;
I couldn't put them both in the same post as it went over
10000 Bytes.
--Andy

Help with image placement in new browser window.

I need help trying to position images that are being opened
in a new browser window. I have created a photo gallery with
thumbnails that are links to the larger image. Ive used the
behaviors panel to open the new image in a new browser window but
the image is always shown at the top left margins of the new
window. Is there a way to 1. center the image in the new window, 2.
change the background color of the new window that opens.
Any help would be appreciated.
Stu

If, as I read it, you are simply opening the image, it will
always be upper
left and cannot be changed. IF you wnat to position it, you
will need to
create a new html page and position your image on that page,
then call the
page, not the image from your thumbnail link.
In Dreamweaver in the command menu try the "Create Web Photo
Album" command.
It will create all of your pages, links and thumbnails for
you. (requires
Fireworks)
Michael Hager
www.cmhager.com
"Stu127" <[email protected]> wrote in
message
news:eo70n5$qo5$[email protected]..
>I need help trying to position images that are being
opened in a new
>browser
> window. I have created a photo gallery with thumbnails
that are links to
> the
> larger image. Ive used the behaviors panel to open the
new image in a new
> browser window but the image is always shown at the top
left margins of
> the new
> window. Is there a way to 1. center the image in the new
window, 2.
> change the
> background color of the new window that opens.
>
> Any help would be appreciated.
> Stu
>

Flash based website.. stage/background resize to fit browser?

Hi,
I've built a pretty basic portfolio-style website using Flash and Actionscript 3. All is functioning well, with the exception of stage size vs. browser size. Basically, I want the stage/background image to resize to fit the stage, while having the main content stay fixed in the middle. What is the easiest way to go about doing this? Also, if at all possible, a step-by-step guide would be amazing since I'm pretty new to AS3/coding in general.
Thanks so much!

That helps with it resize with the browser, but there is still a considerable gap on either side of the background(striped) image. I know I can handle the top/bottom gap with a little CSS, but how do I make the background stretch all the way left and right? I think even tiling it might work fine, but I'm still unsure of how do do that.
I've attached a screen cap of what's seen in the browser preview.

Wrapper div background image won't appear in browser...

Hi All,
Here's a link to the test site:
http://www.davidcoshdesign.com/test/tee
If you go to 'About' – top right nav, there should be two vertical 'lines' running all the way down the page(s), either side of the main body copy.
All the pages are created from the same template.
It's a repeating background image in the #wrapper div. I can see it DW, but not in any browsers.
I guess it's not linking somehow... but can't figurte it out.
Also, the layouts on the 'Partners and 'Philosophy' pages 'jump' when you go to them. Again, I guess there's an error in the code somewhere...
Any help with these two things would be very much appreciated.
RP

Change this -
#wrapper {
    background-repeat: repeat;
    background-image: url(assets/images/columnedge.jpg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 19px;
    font-weight: normal;
    color: #999;
    text-decoration: none;
    width: 980px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    height: auto;
to this -
#wrapper {
    background-repeat: repeat;
    background-image: url(assets/images/columnedge.jpg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 19px;
    font-weight: normal;
    color: #999;
    text-decoration: none;
    width: 980px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    height: auto;
   overflow:hidden;
You need to clear the floats so that div#wrapper will contain the contents. To fix the jumping, add this to your CSS -
html { overflow-y:scroll; }

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

Faux column background not aligned in smaller browser window...

I'm working on a three-column webpage. I'm using fixed-width columns, with the left and right columns floated (started with a dreamweaver layout). I am also using a background applied to the <body> tag to apply the faux column look, so that the side column backgrounds flow all the way down the page.
My layout is a total of 780px wide, but the background image I'm using is 2000px wide. It's the same image that was used in the previous version of the website, and I can only guess that the image is that wide to "fill" the extra space around the main content when the browser window is wider than 780px. Because the image is so wide, I have it styled to center on the page. When my browser window >= 780px wide, everything looks great... the faux columns line up perfectly with the divs. However, when I make the window less than 780px, things get messy.
My layout elements stay where they are, meaning that the left edge of the container stays aligned with the left edge of the screen and a scroll bar appears at the bottom. However, since my background is set to center itself, it continues to try to center itself in the browser window. Basically, the content is not centered in the browser window, but the background is, causing the faux columns to not line up with the divs. The relevant CSS I have applied is:
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 12px;
    color: #666666;
    background-repeat: repeat-y;
    background-position: center;
    background-image: url(../img/BG-gray.gif);
#container {
    width: 780px;
    margin: 0 auto;
    text-align: left; /* this overrides the text-align: center on the body element. */
Note: everything within the container div stays where it should relative to the container, so I didn't include the CSS for them, though I can post it up later if you really need to see it.
Is there a way to keep everything lined up in a smaller browser window? Or, would it be better to trim down the background image to the same width as the container?
Sorry for the long message, but I'm new at this. Please don't eat me.

Same problem, only worse. That causes the background to show from the very left edge of the image. All my text is in the gray area in the example below. Let me try to clarify...
The background image is something like this (colors are for clarity):
(filler)
Left faux column
Main content goes here. This is always in the center of the browser window.
Right faux column
(filler)
Where the combined width of the blue, white, and red sections is 780px. This is what I want my layout to line up with, the blue and red columns being the faux left and right columns, respectively. The gray areas are "filler" that colors the excess width in browser windows that are wider than the fixed width of the main content. With the background set to centered, the white stripe is always centered in the browser window. As long as the window is wider than my layout, the layout is centered in the browser window as well.
I'm looking for a way to either center the background relative to the layout container, not the browser window, or to keep the layout container centered in the browser window when the window is narrower than the layout.

Can't Flex apps scale to fit browser window?

This has been brought up a couple of times, but seems to be a
mystery: How does one scale all content to fit the browser window,
preserving aspect ratio, and centering the content vertically or
horizontally (depending on whether the window aspect ratio is less
than or greater than the content aspect ratio)?
Since Flash is vector-based, I would have thought this would
be straightforward and encouraged!
Some information in an earlier post, plus experimentation on
my part, has yielded a bizarre and inflexible partial solution -
using StageScaleMode, and sizing the app's base container to
exactly 500x375 pixels, I can get content that scales with
the window size and doesn't have mismatched margins (though I
haven't figured out how to center it yet). In addition, there are
ugly scaling artifacts (look at the drop-shadows as you change the
browser window size).
Again, not being a Flash programmer, I baffled that this
isn't better supported, but I have to admit, most of the Flash apps
I've seen in the wild seem to all be fixed at some ridiculous size
like 640x480 or something. Are there some serious bugs here, or am
I missing something? Is there a better approach?
Here's a simple, complete, example (based on an example from
an earlier thread, but simplified a good bit):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx='
http://www.adobe.com/2006/mxml'
pageTitle="Resize Test"
layout="absolute" autoLayout="false"
addedToStage="event.currentTarget.stage.scaleMode =
StageScaleMode.SHOW_ALL"
>
<mx:Style>
VBox {
cornerRadius: 4;
borderStyle: solid; border-color: #000000; borderSize: 1;
horizontalAlign: center; verticalAlign: middle;
dropShadowEnabled: true;
</mx:Style>
<mx:VBox width="500" height="375"
backgroundColor="#808080"
paddingTop="20" paddingBottom="20" paddingLeft="20"
paddingRight="20">
<mx:VBox width="100%" height="100%"
backgroundColor="#808000">
<mx:Label text="This is some text" fontSize="12"
width="128" textAlign="center"/>
<mx:Button label="Button"/>
</mx:VBox>
</mx:VBox>
</mx:Application>

quote:
Originally posted by:
jpwrunyan
Not bitmaps. Externally loaded images that get converted to
bitmaps. What I said is that 90%+ are online catalogues. Logically
it would be safe to assume they display external images of a set
size. Sorry that was unclear. It would interesting to see an
official survey.
Yeah, I was using "bitmap" to mean raster graphics, whether
the actual source be jpg, png or what have you.
quote:
Originally posted by:
jpwrunyan
And good luck getting anyone from Adobe to pay attention to
this forum let alone comment. Better to contact their support if
you're ever really stuck.
Another reason I'm thinking MS is going to win this war - my
colleague is having great luck in the WPF forums.
quote:
Originally posted by:
jpwrunyan
Another reason I thought of why resizing does not result in
rescaling by default:
HTML and JSP applications don't rescale when you change the
browser size. Just go to hotmail or msn and check. They reposition.
Flex applications are intended to behave the same way but with RIA
capabilities. That is probably the more likely explanation than
bitmaps merely not scaling well. Anyway, this behaviour was a
thought-out decision and I happen to agree with it. By the way,
older Flash applications
do rescale to fit the window by default.
Exactly! That's the big problem, in my view, with the
HTML/JPG based web, and is what a vector-based solution
(discounting raster graphics) should solve.
Firefox, and now IE7, have features to allow you to scale web
pages to overcome, in a stop-gap way, this problem. IE even scales
images and Flash apps, though some Flash suffers problems when
scaled. Firefox does not (yet?) scale images or Flash along with
the other content. Flash-based Elmo games at sesamestree.org, at
640x480, look pretty stupid on my 42" 1920x1080 LCD (played by my
3-year old, not me!), but at least I can now (try) to scale them up
with IE7 for him.
I do not believe this was a thought-out decision, it's just
inertia from the bad old ways of doing things. There should be a
working option to easily scale content to the browser window, and
if Flex doesn't provide one, Microsoft certainly is going to (with
WPF/E) as they have with WPF. I'm not a big MS fan, but I think
they get the way things are going with the proliferation in the
range of screen resolutions and sizes that web content is being
displayed on.
That said, I realize there is more to dealing with different
screen sizes than just scaling - you may have to change the amount
of content on the screen, dependent on what the subject is.
quote:
Originally posted by:
jpwrunyan
Now if you want the Flash Player to be able to import huge
.jpg files with 1000px+ resolution and selectively only load enough
information to make a smaller size bitmap image so you can rescale
with impunity, more power to you. Sounds great. I would love this.
But it still doesn't address what should happen when the image goes
beyond the original size. I know you're only using vector graphics
so it's not an issue for you.
Yep, raster graphics are troublesome. Worst case, a beautiful
picture frame grows to surround the image as one zooms beyond its
original size (insert smiley icon of choice here)
quote:
Originally posted by:
jpwrunyan
Finally to get back on the main topic:
if SWFLoader isn't working well, you could programatically do
the same thing. Have a sub-contaier inside the application
container which adjusts its scale accordingly to the size of the
parent application container. I have done this myself with the
Image class for zooming in and out from images (ironically 1000px+
images which were displayed at much smaller sizes).
<Application resize="adjustSize()"
creationComplete="adjustSize()" paddingLeft="0" paddingRight="0"
paddingTop="0" paddingBottom="0">
<Script>
private function adjustSize():void {
var newScaleX = this.width/content.width
var newScaleY = this.height/content.height
content.scaleX = newScaleX;
content.scaleY = newScaleY;
</Script>
<Box id="content" borderStyle="none" width=400 height=300
/> 
</Application>
Something along the lines of the above should definitely
work. I am just basing it off my own previous code. You may have to
be careful of borders and padding if you decide to add them.
Whether it works better than the other suggestions you'll have to
decide.
Thanks for the code, and I'll try it. I'm new to Flex, and so
I'm still struggling with some things (such as when objects are
available for manipulation).

Template Images Move w/ Different Browser Window Sizing

I need to know if it is possible to "lock" the images I have
in my template so that when the browser window is resized the
elements do not move and relocate themselves. If the window is
sized down I just want it to cut off the images. Anyone have any
suggestions? The help is greatly appreciated.

Did you see my previous extensive reply?
Suggestion 1: it's a bad idea to use file/pathnames that
contain spaces (or
any punctuation other than hyphen or underscore) like this -
background-image: url(../images/IW%20background%20file2.jpg);
../images/top row/toppic3.jpg'
-----------------^
Suggestion 2: The indent icons are NOT appropriate for
general layout. The
have a SEMANTIC meaning (what is contained within them should
be quoted
material)....
<blockquote>
<p><a href="#" onmouseout="MM_swapImgRestore()"
Suggestion 3: When you want help with a layout problem, the
best bet is to
upload the offending page and post a link to it, rather than
to just paste
the code into a reply.
Suggestion 4: All layout problems are related to a) the HTML
markup you have
on the page, and perhaps b) the CSS that cascades into that
markup. Most of
the answers given here will be given referencing HTML/CSS
markup. To
understand the answers that are given, you will need to have
some
understanding of HTML and CSS (and you will *definitely* need
this to work
effectively with DW). So -
The images across the top of your page are simply adjacent
image tags
contained within anchor tags, which are all contained within
a single
paragraph tag, within a blockquote tag, directly within the
body of the
page, e.g.,
<body>...<blockquote><p><a><img></a><a><img></a><a><img></a><p>
The <blockquote> tag is a block tag. A block tag fills
the width of its
container, whatever that might be. This <blockquote>
tag, therefore, will
therefore reach from the left page margin to the right page
margin, because
it is only contained within the <body> tags - i.e.,
there is no container
wrapping the <blockquote> other than the
<body></body> tags. As the browser
viewport width changes, the space between the page's left and
right margins
changes concommitantly, reducing or enlarging the amount of
space in which
the <blockquote> tag sites. Thus, the effective width
of the blockquote tag
is affected immediately by the browser viewport width. In a
similar
fashion, the <p> tag, also a block tag, changes its
width to accommodate the
flexing of the viewport window. Since the images are just
arrayed in
adjacent locations within that <p> tag, if the width of
the <p> tag is less
than the aggregate width of the images, then the images will
wrap to the
next line.
Is that the "motion" you are seeing? If so, it's unrelated to
the
incidental fact that the page is also made from a Template.
You can fix this with a bludgeon or a scalpel.
Bludgeon: Use CSS to give that <p> tag an explict
width, and to set overflow
to hidden, e.g.,
<p style="width:969px;overflow:hidden;">....
Scalpel: Redesign the page layout....
Hope that helps.
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
==================
"dbodrero" <[email protected]> wrote in
message
news:[email protected]...
>I posted the code from one of the pages having the
problem above. Is this
>what is needed to look at or do we need to look into the
code for the
>template page? Thanks.

Resize animation in browser window with toolkit for createjs

Hi. I'.m a flash newbie with little coding experience. I have an animation that I created in flash that I exported to html5 with toolkit for createjs. It looks good, however I would like to have the animation be proportionally sized to the browser window, so that it can be viewed on a variey of devices. My iPhone seems to adjust the size, however when I view it on the desktop, the bottom gets cut off, and remains the same size when I resize the browser window. Is there any way to have the animaton resize according to the browser window?
Thanks
Tom

Great news! I used media queries inside of CSS and got my home page to work on a nice 1280x720 effortlessly However, i have a slideshow script that has the image running 1000x400 and I am wanting to know if there is a way to access the variable of this script:
// JavaScript Document
var mygallery=new fadeSlideShow({
    wrapperid: "slideshow", //ID of blank DIV on page to house Slideshow
    dimensions: [1000, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
    ["slideshow/XavierHeadSlide1.jpg"],
        ["slideshow/XavierHeadSlide2.jpg"], ["slideshow/XavierHeadSlide3.jpg"]
         //<--no trailing comma after very last image element!
    displaymode: {type:'auto', pause:1500, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 2000, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
I want to access the "dimensions" variable in CSS so I can modify the size without having to create a second image that is slighty smaller... I tried setting the slideshow DIV as a CSS class, but it just simply cut off the image.
thanks a bunch for all of your help on this matter.

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.

AP div background image hiding

I've created an AP div, then used a jpeg for the background
image. I placed other AP divs above the background that hold other
graphics (linked buttons)
On my computer, both in Explorer and Firefox, the background
image is visable. I have tested it at several other locations and
all is fine, HOWEVER, on the client's computer the divs with the
background don't appear. I tried the site in Explorer and
Firefox...no go.
Suggestions?
http://www.doctormasters.com
Thanks - David Bird

A warning has been posted here many times about using AP divs
as an
exclusive layout method, yet that's what you have done here.
This will
cause you grief, you know? Here's the right way to think
about your page
and its layout -
http://apptools.com/examples/pagelayout101.php
What browser is your client using?
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
==================
"mobirdman" <[email protected]> wrote in
message
news:fkbbfp$42r$[email protected]..
> I've created an AP div, then used a jpeg for the
background image. I
> placed
> other AP divs above the background that hold other
graphics (linked
> buttons)
>
> On my computer, both in Explorer and Firefox, the
background image is
> visable.
> I have tested it at several other locations and all is
fine, HOWEVER, on
> the
> client's computer the divs with the background don't
appear. I tried the
> site
> in Explorer and Firefox...no go.
>
> Suggestions?
http://www.doctormasters.com
>
> Thanks - David Bird
>

Div background images moving in template

I am using a "stock" css layout (from Dreamweaver). I have a
header div with an image placed in it with text on top. I have made
some content text editable on other parts of the page, however when
I make the page a template the image placed in the div disappears.
I checked the code, and the .jpg is still listed. Any ideas or
suggestions on how to fix this would be appreciated!

Line 30?
Can you upload the page and post a link instead?
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
==================
"VIPGuilford" <[email protected]> wrote in
message
news:[email protected]...
> Ok. here is the code. The reference to the image.jpg is
on line 30. It was
> placed as a background image in Header div in DW.
> and the text was placed on top..thanks for your help
everyone ( sorry for
> all
> the commenting in the code)
>
> <!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" />
> 
> <title>Vacation Palace</title>
> 
> <style type="text/css">
> <!--
> body {
> font: 100% Verdana, Arial, Helvetica, sans-serif;
> background: #FFFFFF;
> margin: 0; /* 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; /* this centers the container in IE
5* browsers. The
> text
> is then set to the left aligned default in the
#container selector */
> color: #000000;
> }
> .twoColFixLtHdr #container {
> width: 780px; /* using 20px less than a full 800px width
allows for
> browser
> chrome and avoids a horizontal scroll bar */
> background: #FFFFFF;
> margin: 0 auto; /* the auto margins (in conjunction with
a width) center
> the
> page */
> border: 1px solid #000000;
> text-align: left; /* this overrides the text-align:
center on the body
> element. */
> }
> .twoColFixLtHdr #header {
> padding: 0 10px 0 20px; /* this padding matches the left
alignment of
> the
> elements in the divs that appear beneath it. If an image
is used in the
> #header
> instead of text, you may want to remove the padding. */
> background-color: #FFFFFF;
> background-repeat: no-repeat;
> background-position: 0px;
> background-image: url(file:///Macintosh
>
HD/Users/davidwasserboehr/Desktop/lesson01/images/cloud_header.jpg);
> }

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

Similar Messages

Maybe you are looking for