Dynamically adjust background image?

Alright, here's one i think is a challenge:
I have a background image loaded in a div via css. I use this
div and background across multiple pages. Some pages have more info
than others. Is there a way to dynamically scale the div AND the
background? I know I can do the div, but it cuts the background. I
want to be able to adjust both the background image and the div
according to how many lines are in the page.

Bleh....
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
==================
"Nancy O" <[email protected]> wrote in message
news:g0t6tl$kdt$[email protected]..
> Without seeing your site, I'm guessing you are trying to
"fit" content
> precisely over a large, absolutely positioned background
image or
> photograph. Am I right?
>
>
http://alt-web.com/Backgrounds.shtml
>
>
> --Nancy O.
> Alt-Web Design & Publishing
> www.alt-web.com
>
>
>
>
> "Mack879w" <[email protected]> wrote in
message
> news:g0t2k6$ga7$[email protected]..
>> Alright, here's one i think is a challenge:
>>
>> I have a background image loaded in a div via css. I
use this div and
>> background across multiple pages. Some pages have
more info than others.
> Is
>> there a way to dynamically scale the div AND the
background? I know I
>> can
> do
>> the div, but it cuts the background. I want to be
able to adjust both
>> the
>> background image and the div according to how many
lines are in the page.
>>
>
>

Similar Messages

Dynamically Calling Background Image instead of standard setting

Hi all,
There is a requirement that, based on some condition I have to display shaded background image, say 'zimage1' .so as a result it should print in all pages. If condition fails, we have to display other image, say 'zimage2' in background. If both fails, no need to display background image.
If any body knew the solution please assist me in this regards.
Thanks & Regards,
Nagesh.

Do any one knew how to set Dynamic Background (Watermark) Image instead of going for the standard setting in Page. (by selecting BACKGROUND PictureTab).
I want to pass a variable kind of information to the following fields during runtime.
ie.,
Path: Page->Background Picture.
Name: <Variable image name>
Object: GRAPHICS
ID: BMAP
and other properties like Ouput Mode, Position..etc.
That image should come at backgroudn for all the pages.
Hope, you have understood the issue here.
Please do update me with relevnat ideas, if any.
Thanks & Regards,
Nagesh.

How do I adjust background image, it is too big

Hi I am very new to DW. I am completing a portfolio project that is due very soon. I just realized that the background image that I created in Photoshop is extremely large so when a user scrolls to the right there is empty screen. I would like to have nothing to the right or not even an option to scroll right. hope that makes sense. Is there a way to adjust so that it will only fill the screen instead of going over more? I put in a screenshot. Thanks for your help.

Ben I put that code in but it cleared the background off totally, what did I do wrong? Thank you

Adjusting background image?

I'm pretty new to the creating of homepages, so this might be
a rather basic problem, but anyhow here's my question: I've created
my own background image in Photoshop and imported it to Dreamweaver
as a background image with the script:
background-image:url(front2.jpg);
background-repeat:no-repeat;
The oroblem I have now however is that the image seem much
too big in size for the created webpage, displaying only a corner
of the original image. How do I adjust this?
Thank you very much in advance for any tip you can give me!
/ Sireli

Hi,
try:
background-position= center top;
"Sireli" <[email protected]> escribió
en el mensaje de noticias
news:fs2hoq$fok$[email protected]..
> I'm pretty new to the creating of homepages, so this
might be a rather
> basic
> problem, but anyhow here's my question: I've created my
own background
> image in
> Photoshop and imported it to Dreamweaver as a background
image with the
> script:
>
> background-image:url(front2.jpg);
> background-repeat:no-repeat;
>
> The oroblem I have now however is that the image seem
much too big in size
> for
> the created webpage, displaying only a corner of the
original image. How
> do I
> adjust this?
>
> Thank you very much in advance for any tip you can give
me!
> / Sireli
>

Dynamically swap background image with mouseover

Hello, I need some help with this menu file. My inspiration was a post of Resdesign.
I want to make a rollover that swap the background image for each button.
I tried a lot of methods but I cant find the solution (please check line 111).
Here is my file:
WeTransfer
Thanks a lot!
alex from argentina

Thanks Preran for your answer but I can´t find the way to implement the solution in that post.
I tried this:
// mouseover swap background
sym.$('#newBtn'+i).mouseover(function(){
sym.$("#newBtn"+i).css({'background-image':'url("images/fover.jpg")'});
//sym.getSymbol("#newBtn"+i).$('background').attr('src',info[i].backo);
Thanks!

Self adjusting background image

Check out this background image on the Palm site.
http://www.palm.com/us/index.html
It is cool how it shrinks and stretches to fill the back. Any ideas on how to do it?
Steven Houtzager
intuitionusa.com

The image is handled with CSS...
#bg-blur{width:100%;height:800px;position:absolute;top:0;left:0;z-index:0;opacity:0;filter:alpha(opacity=0);
It is always 100% wide to fill the browser window and 800px tall.

How to set background image in Dynamic Shell Layout

Experts,
Using dynamic shell layout, how can we create a skin like this http://www.2shared.com/photo/OqXfb5jq/layoutissue.html
Issues :
1)Need to set the background to the page - How to set it in dynamic shell layout.
2)Panel box color to be changed
please advice
thnks
jdev 11.1.2.1

Color goes UNDER the background image. Just set it.
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
==================
"StarPilot06" <[email protected]> wrote in
message
news:eqqve6$341$[email protected]..
>I am trying somethign that seems tricky to me...
>
> The image I am using I faded to a solid color on the
bottom half. I set
> the
> background image to to left and NO REPEAT but when the
cell grows with
> content
> and it stretched beyond the image it goes blank
underneath. How do I set
> a
> background color without going over the background
image?
>
> I need them both to be background because I want to use
text over both.
>
> Any ideaS?
>

How is it possible to adjust the background images and the text in Mail?

How is it possible to adjust the background images and the text in Mail?

Here's the solution I used to solve the same problem. If you're not comfortable editing the source files, this might be more than you want to take on--but I've done it to several files with no ill effects. You can follow the instructions on this page and the referenced original post from (he includes a link on the page). Good luck! He's got some great tips on some of his other pages.
http://photo.rwboyer.com/2010/03/15/aperture-3-book-theme-trick/
A warning about editing the Master pages--it only edits them in that book--it doesn't update the theme. So if you go to create another book with those same layouts, you'll have to duplicate the book and replace all the images. An alternative would be to create a "clean" book with no photos in it and then just use that as a starting point each time.

Creating adjustable-size rounded box background image for Moomenu

I have a Moomenu with a horizontally repeating background image:
#moo_sk_menu a:hover{
color: #ffffff;
background-image: url(../images/moomenu1_png32.png);
background-repeat: repeat-x;
However, I would like to create a menu with a rounded box image on mouseover. The above strategy won't work, however, as it is simply a 1 px wide rectangle repeating on the x axis. A rounded box as background won't adjust for the different widths of the menu items. There must be some workaround using three images and nested divs; however I am not sure how to proceed...

/**CSS ROUNDED CORNERS for Mozilla, Webkit, Linux, Opera, IE9**/
#Your-Div-Name {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Trouble: absolute center background image to adjust when window size adjusts

Hello DW experts!
I would really appreciate some help in getting my background image to be perfectly centered, and then adjust to always be in the center when the window size is adjusted. Here is an example of what I am looking for:
[http://www.wpdfd.com/editorial/thebox/deadcentre4.html | http://www.wpdfd.com/editorial/thebox/deadcentre4.html]   I have searched and found a lot of resources online, and I have tried there different options (i.e. background: cover, absolute, z index etc.). Here is a link to the homepage, goal is for the words Apex to show up in the center. It does not only if viewed on a large monitor. Goal is if the monitor is smaller or the person adjusts the window for the word Apex to adjust and remain as centered as possible. There will be content covering it on some pages so it does not have to be perfect.
[http://sellurownhouse.com/ | http://sellurownhouse.com/]    Thanks in advance for any help!
body {
background-color: #000;
margin: auto;
background-image: url(images/wallpaperx.jpg);

body {
     width: 980px; /**adjust as req'd**/
     margin: 0 auto; /** with width, this is centered on screen**/
     background: #000 url(your_background.jpg) no-repeat center center;
Nancy O.

How do I adjust my background image to fit my browser

I have a background image that it 1600 x 1200 and when I try to view in browser, almost half the image gets cut off. How do I adjust the size to fit my browser or even adjust it to fit any browser?

1600 x 1200 is a huge image by web standards. Images don't resize to fill viewport without workarounds (tricks). And while Martin's solution works in some browsers, it's not bulletproof. Downsides may outweigh advantages.
For best cross browser results (including older IE), establish a fixed page width of say 1000px to fit on average displays. Center your page layout.
Open your image in Photoshop or Fireworks and resize it to 1000 x 750. Your image won't fill the viewport but it will fit your page width.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Dynamic URL for background-image

Hi,
When I use the following code, the image gets displayed correctly in the PDF-
      <fo:block border-style="solid" border-width="0.2pt"
               text-align="left" font-size="8pt"
               font-weight="bold" color="white" padding-top="1pt"
               padding-bottom="1pt"
                           background-image="url{'http://localhost:8080/project/images/table_header_center.png'}">
               <xsl:value-of select="tr/td/span" />
               </fo:block>but when I assign the path to a variable like the following-
<xsl:variable name="imgPath"
         select=" 'http://localhost:8080/project/images/table_header_center.png' " />and then use-
<fo:block border-style="solid" border-width="0.2pt"
               text-align="left" font-size="8pt"
               font-weight="bold" color="white" padding-top="1pt"
               padding-bottom="1pt"
                           background-image="url{$imgPath}">
               <xsl:value-of select="tr/td/span" />
               </fo:block>I dont get the image on the PDF. Am I missing something??
Thnxxx.
Sanjeev.

I resolved the issue by passing the context path to the xml.
Thnx for your concerns.

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).

Spry Menu Background image not working in IE

I have created a website using Dreamweaver CS5 and having trouble with my Spry bar in internet explorer. It looks great in chrome, firefox, etc, but in IE there is a white background instead of my background image and the submenus have moved WAY right.. can someone help me!
SpryMenuBarHorizontal.CSS is below:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 800px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 160px;
float: left;
background-image: url(file:///E|/MAIN_website/images/menu_background.jpg);
ul.MenuBarHorizontal li a{
color:#FFF;
ul.MenuBarHorizontal li li{
background-image: url(../images/menu_background1.jpg);
ul.MenuBarHorizontal li li a{
color:#000;
ul.MenuBarHorizontal li li li{
background-image: url(file:///E|/MAIN_website/images/index_06.jpg);
ul.MenuBarHorizontal li li li a{
color:#FFF;
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
color:#33CCFF;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 160px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
font-family: Cambria, Arial, sans-serif;
font-size: 14px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
text-decoration: underline;
/* [disabled]background-image: url(file:///E|/MAIN_website/images/menu_background.jpg); */
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Because I can't see your site and code in context, I will make a guess that this style is throwing off your alignment:
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 160px;
float: left;
background-image: url(file:///E|/MAIN_website/images/menu_background.jpg);
Remove the text-align:center; from the above style.
Instead of centering your list element (li), center the link text (a) itself:
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-align: center;
text-decoration: none;
font-family: Cambria, Arial, sans-serif;
font-size: 14px;
If you don't want the submenu text to be centered, do this immediately after the previous style:
ul.MenuBarHorizontal ul a {text-align: left;}
The sub-submenus are also set up by default to be jogged a bit to the right. You can adjust this style:
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
that causes sub-submenus to fly out to the right of the submenus to which they attach.
Submenus themselves (not the sub-submenus) should fall directly under the top menu item by default, once you remove the text-align: center; on the li item (above).
Beth

Spry Menu Bar - Different Background Image Wanted for menu items

Hi, I've looked everywhere for help with this and just haven't found any answers yet ...
I want my Dreamweaver CS5.5 menu to look like this design I've done in PhotoShop ...
It's a simple one level list with no sub-levels.
Everything is good, except I can only set one background image for all the menu items at this level.
I want the first, last, and all the middle, menu items to use different background images.
I have no idea where or how to insert the code to set a different background image for each individual menu item ...
I know I could use images set one on top another in a column with rollover image swop, but the spry menu opens the door for dynamic content so I'm keen to get it working.
Manchester city council has a great example of this style of menu design working at - http://www.manchester.gov.uk/
They've got funky indenting of the text as well.
~~~~~~
This is the code for my menu list ...
<div class="sidebar1">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Groups</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
         <li><a href="#">Help</a></li>
    </ul>
</div>
This is how I set the background image (but I can only define one image) ...
I set the image background to "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg" through ...
CSS Styles
SpryMenuBarVertical.css
ul.MenuBarVertical a
I then select the background category
and browse to the image file.
doing this changes my CSS code as follows ...
ul.MenuBarVertical li
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 170px;
    margin-top: 4px;
    margin-bottom: 4px;
    background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
ul.MenuBarVertical ul
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 170px;
    left: -1000em;
    top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 95%;
    background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #0000;
    text-decoration: none;
    font: normal 12px Verdana, Geneva, sans-serif;
    background: #EEE url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
~~~~~~
These are the three images I want to apply to the top middle and bottom menu items :
Top menu item background image - "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg"
Middle menu items background image - "Menu-Nav-Bar-Pic-Mid-v1-w170px-h32px.jpg"
Bottom menu item background image - "Menu-Nav-Bar-Pic-Bot-v1-w170px-h32px.jpg"
~~~~~~
As I am unable to set the menu items individually, this is how the menu looks like on my website at the moment ...
~~~~~~
So near yet so far ! I'm hapy with the verdana font, the image size and spacing, but the background images I just can't set them right.
I'd really appreciate any help on this as I'm out of ideas.
Thank you.

The easiest way is to use pseudo elements.
To style the first and last menu items ifferently to the rest, merely add :first-child and :last-child respectivly as follows
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<style>
ul.MenuBarVertical li:first-child a {
    background-color: red;
    color: white;
ul.MenuBarVertical li:last-child a {
    background-color: green;
    color: yellow;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
In your case, in liue of the background colour, you would have an image.
Gramps

Dynamically adjust background image?

Similar Messages

Maybe you are looking for