Locking div's, banners, and background images

Hello!
I'm trying to figure out how to lock a background image and banner around my body content using div's but am not sure how.
When scrolling I would like only the Header Bar and Body section to move, while the background image and banner always stay put.
In addition, I need to make sure that this happens always, despite screen size and/or zooming.
Any assistance would be greatly appreciated.
Below is a layout of what I am desiring:
1. Header Bar (orange) will move with page scroll.
2. Main Body Area (white) will move with page scroll.
3. BG Image (red) ALWAYS stays put, wrapping around the body area.
4. Banner (blue) sits ATOP the BG Image but AWAYS stays put.
5. BG color (black) in place for when zooming or screen size changes.
I hope this makes sense. And as always, I appreciate the help!

As always, answers to layout questions are contained in your CSS and HTML code. What have you got so far?
Nancy O.

Similar Messages

I need help Centering a div box to a background image using dreamweaver cs5.5.

I need help Centering a div box to a background image using dreamweaver cs5.5. Everything shift left when viewing on different size monitors? See what I mean at
www.woodlandhospice.com

Have you looked at your page with images disabled?
I urge you to re-think this approach to web design because images of text are not indexed by search engines, screen readers or translators. Given the demographic group your site is targeting, you really need to ensure maximum web accessibility for all users.
Navigation, headings and descriptions all need to be in real text -- not images of text.
Ken is right. Absolute positioning is pure poison for such a simple layout. My advice is to start over with one of the pre-built Starter Pages in DW. Go to File > New > Blank page > HTML. Select a layout from the 3rd column and hit CREATE button.
Nancy O.

Ringtones and background images not available after call manager upgrade

Hi,
We have upgraded our call manager from version 8.5 to 10.5. Once after the upgrade we lost all the Ringtones and background images except the two default ringtone and background images. we got 8945 sccp phones(running 9-3-1 firmware) and 9951 sip phones(running 9-4-1 firmware). Both these phones lost these list. However the ringlist.xml is available in the tftp server with all the ringtones and the phones are pointed to the right tftp servers. I tried to restart the tftp servers and tried again, however that didn't help. we are using call manager 10.5 and h323 voice gateway. Could anyone please help on this.
Thanks
Barry

Hi Tony,
I can see the ringtone files in the call manager (osadmin>tftp file mgmt), i have also restarted the tftp services, but it didn't help. I believe you advised to re-upload the ringlist file (Ringlist.xml) and try again. I will try this and update you. Please let me know if you have any other suggestions.
Thanks
Barry

Main Wrapper, Container and background-image repeat problem-and Footer :-)

Hi everyone,
First off, i tried almost every idea i could get to solve this on my own but now im...aaa...
Well, the problem is i have a main wrapper with a background image repeat. A header,menu, body container - which has a left column and right column. I want that main wrapper,body container and both of the columns to grow auto according to content. I tried the height:100%. When i float the columns the text from left column spills over on to the footer. The left column also does not autogrow towards the footer?! I was able to set the footer at the bottom which i want it to remain at the bottom of the main wrapper, but the main wrapper and the columns do not grow automatically...I guess it has something to do with float and the clear properties but what???
body{
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
font-size: 11px;
font-family: verdana;
text-align: center;
background:url(back_index3.png) repeat-x scroll 0 0 #E4E4E4;
#main_wrapper {
width: 959px;
margin:0 auto;
margin-top:80px;
background:url(backslice.png) repeat-y;
height:auto;
min-height:800px;
#header {
width: 959px;
margin-left: auto;
margin-right: auto;
height:119px;
background:red;
padding-top: 0px;
padding-bottom: 0px;
#topmenu {
background-color:#blue;
height:30px;
margin:0px;
width: 959px;
margin-left: auto;
margin-right: auto;
#body_container {
height:100%;
width: 949px;
margin: 0 auto;
#content {
float:left;
width: 645px;
background:yellow;
border-right:1px solid #ffffff;
padding:10px;
height:100%;
text-align:left;
#sidebar {
float:left;
width: 283px;
background:#234234;
height:100%;
#footer {
clear:both;
height:200px;
background-color: #686768;
margin:0 auto;
border-top: 1px solid #F6F6F6;
text-align:center;
width: 100%;
<html xmlns="">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="3css.css" />
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<div id="main_wrapper">
     <div id="header">
      <span id="header_logo">title</span>
     </div>
     <div id="topmenu">
     menu
     </div>
     <div id="body_container">
      <div id="content">
content to be added
      </div>
      <div id="sidebar">
      hallow2
      </div>
     </div>
</div>
<div id="footer">
asd
</div>
</body>
</html>
Thanks in advance if somebody can help me out here.
you can see an image of the problem in the attachement down thr... thnx

<html xmlns="">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="3css.css" />
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<div id="main_wrapper">
     <div id="header">
      <span id="header_logo">title</span>
     </div>
     <div id="topmenu">
     menu
     </div>
     <div id="body_container">
      <div id="content">
content to be added
      </div>
      <div id="sidebar">
      hallow2
      </div>
     </div>
</div>
<br clear="all" />
<div id="footer">
asd
</div>
</body>
</html>
Hope this will work well

HTML Emails and background images in Dreamweaver

Hello. I created a HTML email in Dreamweaver. The original design came out of Indesign and had very specific background art. I removed all the text out of the Indesign and created a jpg. I took this jpg in Photoship and sliced and optimized it. I imported this HTML into Dreamweaver. Here I need to add in all the text (which is variable). I was originally thinking that you can only place background images with CSS. But I was told that you should not use CSS for HTML emails. So instead I left all the background art as normal images inside of a table. At this point I need to add text over these images. They only way I could figure out to do it was to add a div tag right over the image and type into there. This seemed to work fine but when I tested it in some emails all the div tags with text showed up under the table with images. This needed to display over. What is the best way to handle this issue? Thank you in advance.
Melanie

Sorry, but you cannot layer text over images in emails. Simplify your design or make an image with text on it in Photoshop. Use absolute URLs to images on your web server. And give people who can't see graphics and HTML pages in their email client a link to the HTML page on your web server.
How to Code HTML Emails
http://www.sitepoint.com/article/code-html-email-newsletters/
Chart showing how various email clients handle CSS.
http://www.campaignmonitor.com/css/
Download some HTML Email Templates from the links below to get started.
Mail Chimp
http://www.mailchimp.com/resources/html_email_templates/
Constant Contact
http://www.constantcontact.com/email-marketing/html-email-templates/index.jsp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

OS 10.4.4, iLife 6 and Background images issue

I upgraded my Mac from 10.4.3 to 10.4.4 (with Automatic Updates) and the same day purchased and installed the iLife 6.0 package (that updated the 5.x version that came with my Mac).
A day or 2 later I decided to change the background photos on my displays. I had been using photos from my iPhoto library and as I scrolled around looking for appropriate pictures and trying them out System Preferences quit on me. I had to restart in order to bring back the ability to alter the background images. Other programs and operations remained unaffected but I was unable to bring up the "Change Background Image" option on the contextaul menu until I restarted the computer. iPhoto was not running at the time. I restarted the computer and the same issue cropped up several more times, always after scrolling thru and trying several images.
These problems never occurred with 10.4.3 or before or iPhoto 5 or before. I don't know if the problem is with iPhoto or not, but I assume that there is interaction between System Preferences and iPhoto, or at least that System Preferences uses the iPhoto database files.
Any ideas?
TIA!

(I thought the hardware listing was posted with the thread...)
Hardware:
PM G5 Dual 2.7, 2.5GB RAM, ATI Radeon 9650 with 256 MB VRAM, and 2 LCD Cinema Displays (1 23 In and the other 20 Inch). Both Cinema Displays are set to the maximum resolution (1920x1200 and 1680x1050).

Importing A Combo Banner/Menu Bar And Background Image

Hi,
In one Photoshop file, I've created a banner/menu bar, as well as what I would like to use as the background image for what appears on the remainder of the page. The menu items are not in a box of any sort. And everything is on a separate layer. The image that appears below is one I made up as an example of what I'm talking about. Can I import it into Dreamweaver as one file? Or should I make one file for the banner/menu bar, and one for the rest of the page?
Thank you.

Hi,
I believe it is best to import everything individually in most/all circumstances. When you are talking about banner images or background images think about the size of the file you are exporting from Photoshop. A 'Save for Web' image will be a lot bigger if it includes everything on the page, compared to the individual size of your banner, and therefore will increase the page load times etc.
So, you can create a photoshop file with your whole layout on there, but then crop each of the elements on its own before saving for web. Even each individual menu item.

CSS and Background Images

I am trying to create a page using CSS. I have a background
image that tiles like I want it to. Here is the CSS:
padding: 0;
Margin: 0;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position:center;
I want some of my various other divs to lay on top of this
background but have a different background color that overlays the
page background image. Instead of taking the background color I
specify, the main page background above shows through. For example
below, the dark brown background doesn't show:
#nav {
margin-left: 4px;
width: 802px;
height: 26px;
background-color:#211400;
Thanks in advance for helping.

This is what I did for mine:
background-image: url("../images/background.gif");
Erin
"Mike Dockray" <[email protected]> wrote:
>
Can u put floating background images in the CSS.
eg. background: #fff url(images/backgrd.jpg) bottom right no-repeat fixed;
if so what is the context, find the color but not the image, url is relative
to
what ????
(yes , i'm a newbie, first day on the case :)

Jpgs and background images

Hi gang
I have a slight problem with my site, "Chemin de Nostradamus".
http://www.soli-deo.eu
When I made the background images in Photoshop I saved them as jpgs around 100k in size.
When I upped the site to this domain I noticed slow loading times on each background page, too slow for 100k.
Then when checking on the published files I see they have all been converted to .png around 400k, by iweb.
My image quality is the same but now a much bigger file, 400%, thus 4 times slower on loading.
Is there a workaround for this?
Cheers
Jim
Message was edited by: jimpsky

http://www.soli-deo.eu/chemin-de-nostradamus/LeChemin_De_Nostradamus_files/backgroundimage1.png
Is probably not the file you created. My guess is you started with only the smaller image in the upper right and iWeb added the extra black to fit your page dimensions.
You really don't need to set that image as a background. You should be able to make a 20KB .jpg file from your source and just drop it in the location an size it.
You could also edit the file above to reduce its file size and replace the original on your server with it.

Card Layout and Background Images

Hello,
I have an application that uses CardLayout to switch through different layouts. Each layout has a background image. The problem is that since I implemented a CardLayout system, the image has been shifted down about 8 pixels, revealing a grey bar. I have tried setting opacities of my JPanels, but that does not seem to work. What do I need to do to fix this?
Thanks you.

Here is a screenshot of the problem:
http://www.areath.com/images/screen1.bmp
You can see that just below the title bar, there is a grey bar. Before implementing the CardLayout, the placeholder image fit in the frame perfectly. Now, the image and the components on top of it have been shifted down.

XSL-FO and Background Images

I'm using JDK-1.4.2 supplied with XALAN along with Apache FOP to generate PDFs and I'm having trouble adding background images. I want to add the company logo as a background image in the header. My code looks like this:
<fo:static-content flow-name="header"
background-image="url('file:/path/to/company-logo.gif')">
</fo:static-content>But it doesn't seem to work. I scoured the web for info and many sites had various techniques, some of which I tried. None of them worked as they seemed to be be geared towards the commercial FO processors. Are there any good references for FO as it works under FOP? I understand that FOP only covers part of the FO standard. Is it even possible to add background images in FOP?
Cliff

Please help if you can as the problem is not just FOP related. Even if it is these fora are supposed to be general purpose are they not? Would it make a difference if I asked a more general question of how to use XSL-FO to put a background image in a header? If so would it not make sense to follow up if the answer didn't work with the FOP engine? The main reason I don't use the mailing list is that I prefer using a forum. My inbox already gets enough junk from the 10 or so other mailing lists that I'm subscribed to. Also I haven't found a forum dedicated to XSL-FO with enough popularity to ensure resolution o my issue. So I bring the question here hoping to get some good feedback. People stray from the topic all the time and it is up to the moderator to make sure topics do not stray too far. I think my question is on topic enough to warrant an answer.

I'm getting ugly vertical stripes at pictures and background images on my HTC One S.

I like using Firefox on my HTC One S, syncing the browsing history and bookmarks really comes in handy.
But however, sometimes i get ugly stripes above some images. When resizing the site, they sometimes disappear. It happens only with images and css-background images.
A few screenshots: https://www.dropbox.com/sh/tq47ved3p1qe766/0KiMvzEHSD/screenshots/firefoxbug

I think you can thank Apple for this. See this discussion.
Photoshop CC: MacOS 10.10 Yosemite: Graphics driver problem
Nancy O.

When I try to print, I get one page with a header and the background image, another page with the content, and a third page with a footer and background image. How can I make it print properly?

Also, if I print to a .pdf, the background does not show up even if I have the checkbox checked to print background image.
The site I'm trying to print is:
[http://www.puertovallartatours.net/coupons-discounts.htm http://www.puertovallartatours.net/coupons-discounts.htm]

I did not have the HP printer software for Mac OSX installed properly. Once installed the problem went away.

JTree and background image

How do I put background image into jTree?

I've never tried it in a JTree, but this is how it can be done with other JComponents:
http://forum.java.sun.com/thread.jsp?forum=57&thread=316074

Templates and background images

I created a new template using a background image. The
template works fine with one exception, when I create a new html
document based on the template everything works, but i cannot see
the background image. When I test the html in a browser the image
is there. In order to see the background image in the design view
environment I need to add it to the page properites again.
Does anyone know how to fix this frustration.......?

Show us the template page, please.
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
==================
"TLT3" <[email protected]> wrote in message
news:e7i7jk$cm$[email protected]..
>I created a new template using a background image. The
template works fine
> with one exception, when I create a new html document
based on the
> template
> everything works, but i cannot see the background image.
When I test the
> html
> in a browser the image is there. In order to see the
background image in
> the
> design view environment I need to add it to the page
properites again.
>
> Does anyone know how to fix this frustration.......?
>

Locking div's, banners, and background images

Similar Messages

Maybe you are looking for