Different background image (div) on each page of site complicated by template

Hope I can explain this: Below are specifics
- Using Dreamweaver cs5.5
- Making the pages from a template.
- Each page will have a different backround image; but the image is contained in a div tag (div name is .mainbackground) which runs behind the main core of the site, the image is not in the <body>
- The div .mainbackground is EDITABLE
- I have already made a specific css class to assign to that div on each page so that the image is different on each page.
- On the template page the div .mainbackground has no image class assigned to it (thus no background image)
- Since that div is editable I can then go into each page and assign the desired image class to it - works great. EXCEPT...... & here's my main question:
- In the code all of the other regions are contained IN that above mentioned div of .mainbackground SO that means that:
- if I need to update the structure of the pages I will have to remove the Editable region that controls the background image which would be - removing the .mainbackround editable region. Then go back to my template, make changes and save everything - thus all the changes will carry through to my other pages. This is good and bad because I would get all the structural changes but I would also loose all of the text specific to those pages.
-Then when I'm finished I would have to go back and first add an editable region back to the .mainbackground class and then re-apply the background classes back to the .mainbackground to fix the images on the pages again...
The site is very small site so I can deal with it but am I going about this all wrong?
Is there some template feature I'm not getting? I would like to keep using the template feature, and i do want a different pic on each page.....
I have attached a picture showing one page so you can see the background image - which will be different on each page.

If your Template has embedded CSS within the <head> tags, and the <head> has an editable region defined, you should be able to change styles in child pages.
TEMPLATE CODE:
<head>
<style type="text/css">
.mainbackground { }
</style>
</head>


CHILD PAGE CODE:
<head>
<style type="text/css">
.mainbackground {
background-image:url(page2-BG.jpg)
</style>
</head>
Give it a try.
Nancy O.

Similar Messages

Different background images for 1st / all other pages

Hello
I'm trying to set up my templates. Basically not a problem, except for the graphics-part:
Page 1 of my letters should have a specific background image, while all following pages need a different one.
Is this possible?
thanks much in advance!
david

See Letterhead and follower sets:
http://www.freeforum101.com/iworktipsntrick/viewtopic.php?t=182&mforum=iworktips ntrick
Peter

Accordion using different background images on panels

Hi,
I'm creating an accordion in Dreamweaver cs3 which has seven
panels. I would like to use a different background image for each
panel. I have only managed to use a single image, that ends up on
all the panels. Any ideas on this?

It worked!!! a BIG hug to U..
quote:
Originally posted by:
Newsgroup User
I haven't done this, but I would think it would be pretty
easy by copying
the .AccordionPanelTab style code and pasting it over and
over and then
changing the class names to .AccordionPanelTab1,
.AccordionPanelTab2, etc.
Of course, you would also change the div references in your
pages.
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development
"Kimson76" <[email protected]> wrote in
message
news:fkudd1$1hp$[email protected]..
> Hi,
>
> I'm creating an accordion in Dreamweaver cs3 which has
seven panels. I
> would
> like to use a different background image for each panel.
I have only
> managed to
> use a single image, that ends up on all the panels. Any
ideas on this?
>
> .AccordionPanelTab {
> height: 30px;
> background-image:
>
url(file:///Macintosh%20HD/Users/kimson.ekman/Desktop/web%20development/challeng
> er_purple/images/7.jpg);
> background-repeat: repeat-x;
> background-color: #122541;
> border-top: solid 0px #1C3B5A;
> border-bottom: solid 0px #1C3B5A;
> margin: 0px;
> padding: 0px;
> cursor: pointer;
> -moz-user-select: none;
> -khtml-user-select: none;
>

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

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

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

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

How to add different background image for submenu items???

Hi all,
I'm pretty new to web design and CSS in particular. Here's my problem...
I've got a Spry horizontal menu bar (untouched as yet), and I want to have a different background image for my submenu items than that of my menu items. From searching the internet I think that I need to apply a class to the submenu item (please correct me if I am wrong).
How would I go about doing this and how would I assign the class to just the submenu items?
Also ideally I want to have my first and last menu items to have rounded corners on one side (therefore making a rounded edge menu bar), is it possible to have a different background image for individual menu items? If so, how?
Really appreciate any help!

Thanks for the link! I've managed to sort the background issue, and it seems to be working fine!
Just one little issue left to tackle...
I want my text to be centered in my top menu items BUT aligned left in my drop down menu items. I have managed this but the text hugs the left hand side. I've tried adding a little margin to the left but that doesn't seem to affect anything???
Here's my CSS... Any ideas which class I should be targeting or why adding the margin isn't working would save my tearing the rest of my hair out! thanks! (screenshot attached).
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* 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;
    cursor: default;
    width: auto;
/* 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;
    list-style-type: none;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 120px;
    float: left;
    height: 24px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    background-repeat: repeat-x;
    background-color: #333333;
    background-image: url(../images/navbar_bg.jpg);
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #000000;
    border-left-color: #666666;
ul.MenuBarHorizontal li li
    list-style-type: none;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
    height: 24px;
    background-color: #333333;
    background-image: none;
    padding: 0;
    margin: 0;
    left: -1px;
ul.MenuBarHorizontal li li a
    list-style-type: none;
    position: relative;
    text-align: left;
    cursor: pointer;
    float: left;
    height: 24px;
    background-image: none;
    font-size: 12px;
    font-weight: normal;
    border: 0px 0 0;
    width: 120px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
/* 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;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 120px;
    position: absolute;
    left: -1000em;
    height: 24px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
/* 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;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    height: 24px;
    width: 120px;
    margin-top: -5%;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 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;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal li a
    display: block;
    cursor: pointer;
    text-decoration: none;
    font-style: normal;
    text-transform: capitalize;
    text-align: center;
    white-space: normal;
    padding: 0px;
    height: 24px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 20px;
    margin: 0px;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal li a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #000000;
    background-image: url(../images/navbar_bg_hover.jpg);
    background-repeat: repeat-x;
    line-height: 22px;
ul.MenuBarHorizontal li li a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #000000;
    background-image: none;
    background-repeat: repeat-x;
    width: 120px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
/* 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-repeat: repeat-x;
    background-position: 95% 50%;
    background-color: #333333;
    background-image: url(../images/navbar_bg.jpg);
/* 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-repeat: repeat-x;
    background-position: 95% 50%;
    background-color: #000000;
    background-image: url(../images/navbar_bg_hover.jpg);
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;
/* 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 image obscures the auto page numbering

I have an 80 page book that I want to have automatic page numbering. All pages have a background image that bleeds off the page. The background image changes on every page.
The document is currently set up with individual image boxes on each page rather than on the master page. The problem i have is with the image obscuring the page numbering on each page. Trying to correct this I went back into the master pages to lay down a master image box bleeding off the page and the automatic page numbering on the layer above it. Testing this on a test document everything works fine. But as soon as i attempt to go into a regular page and change that master image the numbers disappear.
What is the proper way to change an image from the applied master page so that it doesn't obscure the page numbers?

Great suggestion for using layers, I'm accustomed to using them all the time in Illustrator and forgot about that option in this case. It worked perfectly to place the page numbers on the master page on a second layer positioned on top and applying master page to all document pages. It brought the numbers up to the top level.
Thanks so much for the solution.

Using a different default component state within each page state

I am using a custom component in multiple page states but would like to have a different default state (for the same custom component) within each page state.
Is there anyway to use a different default component state within each page state .
When I change the default state at a component level it seems to go across all my page states. Any solutions?
Thank you

I guess I can just add that interaction for that component!
I think my brain is just catching up

Background image of custom master page just shows for 1 second.

Hi,
I have created a custom master page from a html code and I have applied to it on my site collection, but when I open it on the web browser the background image just show up for a second or less and then the background turns white.
I'll aprecciate any suggestions in order to solve this.
Regards.

Hi,
According to your post, my understanding is that Background image of custom master page just shows for 1 second.
I recommend to change the class to use .main-content.
.main-content
background-color:#F4F2E5;
background: url('/Style%20Library/Images/image.png');
background-repeat: no-repeat;
background-;
You can also use a contol called cssregistration. Add a line that looks something like this, right below the existing csslink:
< SharePoint:CssLink runat="server" Version="4" /> (under this you add:)
< SharePoint:CssRegistration runat="server" name="/Style%20Library/Scripts/style.css" After="coreV4.css" />
Here is a similar thread for you to take a look at:
http://social.technet.microsoft.com/Forums/en-US/929c9fe6-a222-43a9-9551-985c0f20756d/background-image-in-sharepoint-2010-master-page?forum=sharepointcustomizationprevious
Best Regards,
Linda Li
Linda Li
TechNet Community Support

Why is there a scroll bar though I set the background image to "scale to page size"?"

Why is there a scroll bar though I set the background image to "scale to page size"?"

The current build of iTunes may occasionally draw the scroll bar off the edge of the screen. It should be possible to resize the window to reveal the scroll bar.
You can restore much of the look & feel of the previous version with these shortcuts:
Ctrl-B to turn on the menu bar.
Ctrl-S to turn on the sidebar.
Ctrl-/ to turn on the status bar.
Click the magnifying glass top right and untick Search Entire Library to restore the previous search behaviour.
You can also open the menu bar temporarily by pressing Alt.
tt2

Background image in a portal page??

Hi,
How can I set a background image or watermark in a portal page instead of the plain background that comes by default.
Regards
Sreeram

Ofcourse Chris, very true. I should have mentioned the workaround in the previous post itself. Infact the solution is based on your suggestion in the previous post.
Every community page that is generated by the portal has a <div> element with a unique id. The id of div element is made up of the following string "pt-portal-content-" followed by the object id of the community page (which is unique). This <div> element has the style portalContent set to it by default.
I knew the page I would want the background to be applied to. And I knew the portlets that would go only on this page. These portlets are content portlets created from the publisher.
So in the presentation template code for one of these portlets I included a javascript function and set the background property of the div element, conditionally checking the div element's id to make sure that it is the community page I wanted to modify. And this javascript function is registered to the onload event.
Regards
Sreeram

How can I put a background image in headers in PAGES

It seems I cannot put a background image in headers. I want a background gradient to go behind the text. I have to place it on the "page" "behind" the header on every sheet instead. Other than creating a graphic that is both (bitmapped) text and image, what can I do? Or is there some way to create an object that has edittable text over the image. Thanks, Peter

If you are referring to Pages app, it is easy:
Open your document
Go to Menu >> View >> Show Layout
You will see headers, body and footers laid out with edges
Click inside the header
Open your Media browser
Drag your graphics (or photo) into the header
Be sure to PRESS AND HOLD COMMAND (APPLE) KEY while you do this!!!
If you don't pres the key, the picture will be pasted outside the header!
I think the Command key press was what was screwing you up here...
This applies to Numbers and iWeb as well, BTW

How to set tray's background image in the custom page layout?

Hi all,
I've developed custom page layout with custom iView tray implementation. I've applied my layout into my page and added some iViews. Those iViews are URL isolated so they are rendered as an iframe. My problem is that an iframe background containing iView content overcast my background image which I have set in my iView tray implementation. Is it possible to set transparent background for an iframe in this scenario?
I would be grateful for helpful answers.
Best Regards,
Michał M.

Hi Tamil,
That's right, I've already used layout tag library do develop custom tray design but my problem concerns iView's isolation method . URL isolation renders iView's content in an iframe which has its own background. I've read some articles about getting transparent iframes but I'm not sure how could I achive this in SAP EP? Is it possible?
Best Regards,
Michal M.

Background image for BPF web page

Hi all,
I'm building a web page that shows a BPF. I would like to set an image as backgroung for this web page.
In the BPC help I have read that the image should be located in /webfolders/<appset>AppSetPublications\BPFBackground folder on the server.
Does anyone know how to upload there the image? The only way I see is using BPC for excel, but it only allows to upload excel files, no images.
Thanks and regards,
Ana

Hi Ana,
You will have to add a new webpage in BPC Web content library.
Using the BPF object in the webpage, you can select your BPF and can also add the respective background image to it.
Hope this helps you.
Regards,
Nithya

Lightroom 5.2 - Background Image on a Two-Page spread in the Book Module

Is there a way i can make the Background image spread in the two-page spread in the Book Module. Currently i see the same Background image repeating which is annoying. Or is there a workaround. I'm using LightRoom 5.2. Please Advise.

I have an even simpler method. I use MyPublisher to print my books. I select their page layout for a two-page spread, drag and drop the image. DONE! I understand that most people have their favorite places to have work done. I have been extremely pleased with MyPublisher.com, so I haven't even tried the book module in Lightroom.

Different background image (div) on each page of site complicated by template

Similar Messages

Maybe you are looking for