Background image not scrolling with text

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

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

Similar Messages

Background image not showing behind text

At the moment I am using a table as I haven´t yet found
out how to make the same effect in css. I have a background image
style="BACKGROUND: url(images/box_bg.gif) repeat-x" in a td which
for some reason is overridden by the text so the background of the
text is white not the background image. The webpage where it can be
seen is
http://www.britishalliance.com/test.html
Thanks a lot

That's b/c you've set the background color:
.ftforminput {
BACKGROUND: #ffffff; COLOR: #c03; FONT-FAMILY:
Verdana,Arial, Helvetica;
FONT-SIZE: 11px; FONT-WEIGHT: bold
}Take out the background, you'll be fine."Hydrowizard"
<[email protected]> wrote in message
news:ear4i1$5si$[email protected]..
> At the moment I am using a table as I haven?t yet found
out how to make
> the
> same effect in css. I have a background image
style="BACKGROUND:
> url(images/box_bg.gif) repeat-x" in a td which for some
reason is
> overridden by
> the text so the background of the text is white not the
background image.
> The
> webpage where it can be seen is
http://www.britishalliance.com/test.html
> Thanks a lot
>

I cannot get my background image to scroll with my page.

My background stays in place as my page/text scroll over it. I am on Dreamweaver CS3. And I have tried in the body css to set the "Attachment" to "scroll" to "fixed" (seams to be stuck here) and to nothing. (which I understand is automatically scroll setting)
(Also no-repeat, Horizontal - center, Vertical - top, also tried vertical to "0 pixels) Nothing is working, and it is 4 hours later.

Sue,
My take on this is that you WANT your background to scroll normally.
Change this in your CSS:
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: medium;
    color: #333333;
    background-attachment: fixed;
to this:
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: medium;
    color: #333;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How to stop browser background image from scrolling?

So is there a way (an easy way) to stop browser background image from scrolling with the page?
Thanks
m

If it's a single image, add this code to center the page horizontally:
parent.document.body.style.backgroundPosition='50% 0%';
http://www.wyodor.net/_Demo/tmf/Duckmenu.html
http://www.wyodor.net/_Demo/duckmenu/duckassets/Spoorbackground.gif

Fixed background image not wanted

Hi all,
I am having a problem that has me stumped. I have a background image applied to a div and even though I haven't specified anywhere in the css for this image to be fixed position, it will not scroll with the rest of the text. I have tried to apply background-attachment css of scroll etc, but nothing is changing.
Here is the page in question - http://www.sheffieldstudent.co.uk/test/studentstrology_may2011.html
CSS is here: http://www.sheffieldstudent.co.uk/test/_css/student.css
Any ideas? Thanks.
PS: Sorry for the slow DL speed but I haven't compressed the images yet.

As for the text resize layout problem, I see what you mean. I don't know any other ways of accomplishing the same design without using background images for the navigation. Would there be a better way?
Sure - each text block would need to be in its own container, each with its own background image. That way, when the block expands vertically, the text doesn't overlap other background images. Your background images would have to be designed to allow this vertical expansion, however, which could be tricky or impossible depending on the complexity of the image.

How can I have a browser image that scrolls with images on top of it scrolling in tandem -

How can I have a browser image that scrolls with images on top of it scrolling in tandem - so the background is a hexagon pattern with small images inside some hexagons and I want them all to be scrollable as a user uses the browser scroll bars. At the moment the background image jumps when I preview so the small hexagons all become out of alignment. Any tips appreciated. I have browser image set to tile - pinned at the middle and set to scrolling - the small images are not pinned -

Thanks for your answer - The images on the top layer are also links and change to show they're links on rollover - so I wanted to keep them as separate graphics - and it works to a point but when I preview the page in a browser the tiled browser image always moves no matter how I pin it and then everything becomes unaligned. Any further suggestions appreciated.

My touchpad will not scroll with the current version of foxfire.

The screen in foxfire will not scroll with the sliding of my finger on right side of the touchpad on my lenovo thinkpad or the navigation button. It does work with all other programs including windows explorer and google chrome.

OK, this is the original poster again. The trackpad scrolling problem has been sporadic. Now I have realized that I have this problem (in Firefox 7.0 and 7.01) WHEN THERE IS A PDF DOCUMENT OPEN IN ONE OF THE TABS. When there is a .pdf open, trackpad scrolling works fine in *that* tab but not in any of the other Firefox tabs that are open. When I close or move away from the .pdf file, then the scrolling function returns in the other tabs. Is there something about the Acrobat plug-in (ver. 9.4.5) that isn't working correctly in Firefox 7.x?

JTable: having first N columns not scroll with the rest of columns

Hi All,
I'm having trouble wording this properly (hence my inability to google for the solution)...
What I am trying to do is:
* Have a table with N number of columns (for example 100 columns).
* The table is enclosed by scroll pane, so scrolling left and right will show different columns
* I want first X number of columns (say 2 columns) to be always visible (i.e. they should not scroll with the rest of the columns)
Is there a way to accomplish this with one JTable?
Thanks and best regards,
-Pavel

I found the answer here:
http://forum.java.sun.com/thread.jspa?threadID=665435&messageID=3951902
Edited by: ptxyz on Jan 25, 2008 8:06 AM

Help with background image (Not sure how to ask this..........)

I have just started to try and make my first site. I designed it in Photoshop first as I learned in many tutorials. I don't know why my background image looks like this when I scale down below 100%, but at 100% or "fit all"&"fit width" it doesn't change and I can't move it with the hand tool or scroll it. I'm sorry, I'm just learning.
Thank you.

Hello,
in addition, I tried this (page properties = translated from my German DW) too an the only difference had been this "missing end bracket".
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ioneglines.com</title>
<style type="text/css">
body {
background-image: url(myImage.png);
background-repeat: no-repeat;
</style>
</head>
<body>
</body>
</html>
... before you insert your image as a background image, you have to give it the dimensions, you want to see in your file. Please use try and error method.
Hans-Günter

Background images which change with scrolling, just how is it done?

These fabulous sites, were featured on Adobe Muse's Site of the Day
http://www.streetreach.org/
http://www.lauranet.nl/
Brilliant sites. What they have in common is a background image (of sorts) that changes with scrolling, I just cant get my brain around how it's done?
Can anyone point me in the right direction?
Thanks

Start with some of these:
http://tv.adobe.com/watch/muse-feature-tour/adobe-muse-parallax-scrolling-may-2013/
www.youtube.com/watch?v=5OOLEztI-so
www.youtube.com/watch?v=8m2Lg241e3A
www.youtube.com/watch?v=gZI_K1TXqOM
I got these (and MANY more) by Googling, "Muse Parallax Scrolling"
Good luck.

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

Background image not displaying

I'm developing pages that will each have a different background image. i've defined a div with the bg image in it and put that div in the code, but the bg image doesn't show up. i've also tried adding a bg color to the div and that doesn't show up either, so i'm sure it's not a path or file name issue. css & code below.
@import url("./whitespace-reset.css");
@charset "UTF-8";
body {
    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;
    font-family: Verdana, Arial, Helvetica, sans-serif;
#container {
    width: 761px; /* the auto margins (in conjunction with a width) center the page */
    border: 0;
    text-align: left; /* this overrides the text-align: center on the body element. */
    height: 871px;
    margin: 0;
    padding: 0;
    background: #FFFFFF;
#header {
    height: 148px;
    width: 761px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
#leftside {
    width: 158px;
    float: left;
    margin-top: -38px;
    padding: 0px 0px 0px 0px;
#leftside .menu img {
    display: block;
    margin: 0;
#leftside ul.menu {
    padding: 0px 0px 0px 0px;
    font-style: none;
    margin: 0;
#leftside ul.menu li {
    display: inline;
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
#leftspacer {
    width: 31px;
    float: left;
    height: 723px;
    margin-top: -38px;
    padding-right: 10px;
    background-image: url(images/home_spacer_left.jpg);
    background-repeat: no-repeat;
#top {
    margin-top: 0px;
    height: 38px;
    padding: 0px 0px 0px 0px;
#top ul.menu {
    margin-top: 0px;
    margin-left: 189px;
    float: left;
    padding: 0px 0px 0px 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    list-style: none;
#top ul.menu li {
    display: inline;
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
#bottom {
    height: 22px;
    left: 468px;
#bottom ul.menu {
    margin-top: 300px;
    margin-right: -23px;
    float: left;
    margin-left: -61px;
    list-style: none;
#bottom ul.menu li {
    display: inline;
    list-style: none;
    float: left;
#mainContent {
    margin: 0px 0px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
    padding: 0 0 0 0;
#facilitiesContent {
    background: #990000 url(images/facilities_bg.jpg) repeat;
    padding: 0;
    height: 208px;
    margin: 0;
    width: 573px;
#footer {
    padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:#c0b7b2;
    height: 22px;
#threepix {
    margin-left: 189px;
    margin-right: 0px;
    height: 114px;
#col1 {
    position: relative;
#col1-a {
    position: absolute;
    width: 275px;
    right: 0px;
    top: 0px;
#col1-b {
    position: absolute;
    right: 0px;
    width: 275px;
    top: 0px;
#pixcopyleft {
    margin-left: 189px;
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 10px;
#pixcopyright {
    font-size: 1em;
    margin-left: 189px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 10px;
#footer ul.menu {
    margin-left: 189px;
    margin-right: 0px;
    margin-top: -22px;
    padding: 0px 0px 0px 0px;
    float: left;
#footer ul.menu li {
    display: inline;
    list-style: none;
    padding: 0px 0px 0px 0px;
    float: left;
#footer p {
    margin: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    padding: 10 0;
img.imageleft {
    float: left;
    margin-left: 0px;
    padding: 5px 5px 5px 5px;
img.imageright {
    float: right;
    padding: 5px 0px 5px 5px;
    text-align: right;
.imagecenter {
    text-align: center;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 0px;
    padding: 5px 5px 5px 5px;
.fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0px;
    font-size: 1px;
    line-height: 0px;
h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 3px;
<!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>Core PIlates Studio </title>
<link href="core.css" rel="stylesheet" type="text/css" />
<body bgcolor="#c0b7b2" onload="MM_preloadImages('images/nav_main_ourteam_roll.jpg')">

<script type="text/javascript">

</script>
<meta name="description" content="Core Pilates Studio is a classical, fully equipped pilates and Gyrotonic studio convenienly located near Vassar College in Poughkepsie, NY. We offer classical pilates, Gyrotonic and Gyrokinesis in private, semi-private and group sessions." />
<meta name="keywords" content="core pilates studio, pilates, core, gyrotonic, gryokinesis, joeseph pilates, pilates in poughkeepsie, pilates in ny, pilates in new york" />
</head>
<body onload="MM_preloadImages('images/nav_main_home_roll.jpg','images/nav_main_programs_roll.j pg','images/nav_main_schedule_roll.jpg','images/nav_main_rates_roll.jpg','images/nav_main_ ourteam_roll.jpg','images/nav_main_contactus_roll.jpg')">
<div id="container">
   <div id="header">
    <img src="images/home_header.jpg" align="left" /><a href="index.html"><img src="images/home_logo_core.jpg"></a>
</div>
<div id ="top">
<ul class="menu">
      <li><a href="facilities.html"><img src="images/subnav_studio_facilities_down.jpg" class="menu"></a></li>
       <li><a href="rates.html"><img src="images/subnav_studio_rates_up.jpg" class="menu"></a></li>
       <li><a href="hours.html"><img src="images/subnav_studio_hours_up.jpg" class="menu"></a></li>
       <li><a href="policies.html"><img src="images/subnav_studio_polocies_up.jpg" class="menu"></a></li>
       <li><a href="directions.html"><img src="images/subnav_studio_directions_up.jpg" class="menu"></a></li>
       <li><a href="contact-us.html"><img src="images/subnav_studio_contactus_up.jpg" class="menu"></a></li>
       <li><img src="images/subnav_studio_back.jpg" class="menu"></li>
</ul>
</div>
<div id="leftside">
<ul class="menu">
      <li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/nav_main_home_roll.jpg',1)"><img src="images/nav_main_home_up.jpg" name="home" width="158" height="39" border="0" id="home" /></a></li>
      <li><a href="programs.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('programs','','images/nav_main_programs_roll.jpg',1)"><img src="images/nav_main_programs_up.jpg" name="programs" width="158" height="39" border="0" id="programs" /></a></li>
      <li><a href="the-studio.html"><img src="images/nav_main_thestudio_down.jpg"></a></li>
      <li><a href="schedule.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('schedule','','images/nav_main_schedule_roll.jpg',1)"><img src="images/nav_main_schedule_up.jpg" name="schedule" width="158" height="39" border="0" id="schedule" /></a></li>
      <li><a href="rates.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rates','','images/nav_main_rates_roll.jpg',1)"><img src="images/nav_main_rates_up.jpg" name="rates" width="158" height="39" border="0" id="rates" /></a></li>
      <li><a href="contact-us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact us','','images/nav_main_contactus_roll.jpg',1)"><img src="images/nav_main_contactus_up.jpg" name="contact us" width="158" height="39" border="0" id="contact us" /></a><a href="our-team.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our team','','images/nav_main_ourteam_roll.jpg',1)"><img src="images/nav_main_ourteam_up.jpg" name="our team" width="158" height="39" border="0" id="our team" /></a></li>
      <li><img src="images/nav_main_space_below.jpg" /></li>
      <li><a href="mailto:[email protected]"><img src="images/home_email.jpg" /></a></li>
      <li><img src="images/home_address.jpg" /></li>
      <li><a href="special-programs.html"><img src="images/home_logo_special.jpg" /></a></li>
   </ul>
</div>
<div id="leftspacer"></div>
<div id="facilitesContent">
<div id="pixcopyright"><img src="images/images/facilaties_page_images_03.jpg" class="imageright">
      <h1 align="right">What is Pilates?</h1>
      <div align="right">Whether you're a world class athlete, a couch potato, recovering from an injury, new to excercising, old, young or in between you can benefit from Pilates.</div></div><br /><br />
    <div id="pixcopyright"><img src="images/images/facilaties_page_images_03.jpg" class="imageright">
    <h1 align="right">What is Pilates?</h1>
       <div align="right">Whether you're a world class athlete, a couch potato, recovering from an injury, new to excercising, old, young or in between you can benefit from Pilates.</div></div><br /><br />
</div>
<br class="clearfloat" />
<div id="footer">
   <ul class="menu">
       <li><img src="images/nav_bottom_left_space.jpg"></a></li>
       <li><a href="index.html"> <img src="images/nav_bottom_home.jpg"></a></li>
       <li><a href="programs.html"> <img src="images/nav_bottom_program.jpg"></a></li>
       <li><a href="the-studio.html"> <img src="images/nav_bottom_thestudio.jpg"></a></li>
       <li><a href="schedule.html"> <img src="images/nav_bottom_schedule.jpg"></a></li>
       <li><a href="rates.html"> <img src="images/nav_bottom_rates.jpg"></a></li>
       <li><a href="our-team.htm"> <img src="images/nav_bottom_ourteam.jpg"></a></li>
       <li><a href="contact-us.html"> <img src="images/nav_bottom_contactus.jpg"></a></li>
   </ul>
</div>
</div>
</body>
</html>

Start by fixing the code errors.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.elixir.biz%2Fcore%2Ffacilitie s.html
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. elixir.biz%2Fcore%2Ffacilities.html
Your document type doesn't match your HTML closing tags. Modify > Page properties > Encoding > choose either HTML or XHTML (transitional) and hit Apply.
Images require an alt attribute for better web accessibility. If you want to skip this for now and add them later, that's OK.
but your code won't validate until you add them to each image.
When you've fixed the code errors, repbulish the page and see if that fixes the problem.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Background image not repeating in IE6

I have a background image in a cell of a 1x1 table -
http://savanabar-leros.com/art7tables.shtml
the image is set to repeat x and y.
In FF2 and IE7 it displays as expected.
In IE6 the background image is not repeated
For the moment I've increased the size of the image to
compensate - but
obviously I would like to know what I have done wrong. It's a
very temporary
fix anyway as increasing the text in IE6 shows the text
dropping out the
bottom of the background image.
Jo

I was trying to find this the other day - something to do
with /75 being the
percentage of transparency I think.
Frankly I would love to use an "easy way out" - I have tried
and failed
despite having been given some excellent help - how oh how
please do I do
this?
Jo
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
> What you see there *is* using the htc files. If I would
remove them, the
> transparency disappears, but the background image tiles.
Why don't you
> take the easy way out, and make the background image
have a reduces
> opacity and contain the underlying image bits as well?
>
> --
> 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
> ==================
>
>
> "josie1one" <joleros[nospam]@yahoo.com> wrote in
message
> news:[email protected]...
>> But... it I remove the htc file it is not
transparent - and yet yours is.
>> I got in a mess with the transparency and there are
two versions... with
>> the htc file and the ie2.css fix. Removing one of
them seemed to prevent
>> transparency.
>> Did you *only* remove the htc file and nothing else?
If so, I don't know
>> what to do <whimper>
>>
>> --
>> Jo
>>
>>
>> "Murray *ACE*"
<[email protected]> wrote in message
>> news:[email protected]...
>>>
http://www.murraytestsite.com/savana.html
>>>
>>> You can see that indeed the png image is not
tiling to fill the table.
>>> If I remove the htc files from the CSS, it does
do so. I conclude that
>>> there must be something in the htc file code
that is causing this to
>>> happen....
>>>
>>> --
>>> 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
>>> ==================
>>>
>>>
>>> "josie1one" <joleros[nospam]@yahoo.com>
wrote in message
>>> news:[email protected]...
>>>>
http://savanabar-leros.com/images/screen.jpg
>>>> Thanks for looking.
>>>>
>>>> --
>>>> Jo
>>>>
>>>>
>>>> "Murray *ACE*"
<[email protected]> wrote in message
>>>> news:[email protected]...
>>>>> Post a screenshot of what you are
seeing, please Jo....
>>>>>
>>>>> --
>>>>> 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
>>>>> ==================
>>>>>
>>>>>
>>>>> "josie1one"
<joleros[nospam]@yahoo.com> wrote in message
>>>>>
news:[email protected]...
>>>>>> I've cleared my cache but still
seeing non-repeating background on
>>>>>> both computers in IE6. Must be me -
thanks Murray.
>>>>>>
>>>>>> --
>>>>>> Jo
>>>>>>
>>>>>>
>>>>>> "Murray *ACE*"
<[email protected]> wrote in message
>>>>>>
news:[email protected]...
>>>>>>> You're talking about the
translucent reddish rectangle? Looks fine
>>>>>>> to me in IE6.
>>>>>>>
>>>>>>> --
>>>>>>> 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
>>>>>>> ==================
>>>>>>>
>>>>>>>
>>>>>>> "josie1one"
<joleros[nospam]@yahoo.com> wrote in message
>>>>>>>
news:[email protected]...
>>>>>>>> Really? I've now reduced the
size of the image if you wouldn't
>>>>>>>> mind testing. Displays
perfect in FF2 even with Ctrl+ but not on
>>>>>>>> two computers in IE6. In
fact it seems to cycle through several
>>>>>>>> backgrounds before
displaying a narrow background.
>>>>>>>>
>>>>>>>> --
>>>>>>>> Jo
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> "Murray *ACE*"
<[email protected]> wrote in message
>>>>>>>>
news:[email protected]...
>>>>>>>>> It's repeating for me in
IE6, Jo.
>>>>>>>>>
>>>>>>>>> --
>>>>>>>>> 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
>>>>>>>>> ==================
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> "josie1one"
<joleros[nospam]@yahoo.com> wrote in message
>>>>>>>>>
news:[email protected]...
>>>>>>>>>>I have a background
image in a cell of a 1x1 table -
>>>>>>>>>>
http://savanabar-leros.com/art7tables.shtml
>>>>>>>>>> the image is set to
repeat x and y.
>>>>>>>>>>
>>>>>>>>>> In FF2 and IE7 it
displays as expected.
>>>>>>>>>>
>>>>>>>>>> In IE6 the
background image is not repeated
>>>>>>>>>>
>>>>>>>>>> For the moment I've
increased the size of the image to
>>>>>>>>>> compensate - but
obviously I would like to know what I have done
>>>>>>>>>> wrong. It's a very
temporary fix anyway as increasing the text in
>>>>>>>>>> IE6 shows the text
dropping out the bottom of the background
>>>>>>>>>> image.
>>>>>>>>>>
>>>>>>>>>> --
>>>>>>>>>> Jo
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>
>>>>
>>>
>>>
>>
>>
>
>

CSS : Background image not appearing on header

Hi Guys,
I need help with the background color of my header, for some reason, it's appearing in dreamweaver but NOT in the browser (FF, Chrome)
If you have firebug, you can check the source from the link below.
http://oneworldlc.ph/contact.php
<body>
<div id="main_container">

<div id="top_nav">
    <div id="nav">
      <div id="nav_container">
        <ul>
          <li><a href="contact/index.html">Home</a></li>
          <li>|</li>
          <li><a href="#">About Us </a></li>
          <li>|</li>
          <li><a href="#">Company</a></li>
          <li>|</li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
</div>

<div id="contact_banner">
    <div id="contact_logo">
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <h2 align="center">Merging cultural gaps between Americans and BPO centers in the Philippines</h2>
      <p align="center" class="emphasis_red">We provide FREE training</p>
    </div>
</div>
<div id="page-wrap">
    <p align="center"><img src="images/contact_07.png" alt="Contact One World Learning Center Inc." width="180" height="44" /></p>
    <p> </p>
    <h1 align="center">One World Learning Center Inc.</h1>
    <p align="center" class="georgia_16px_559cbe">21st Floor, Robinson's Cybergate Tower 3, Pioneer St.</p>
    <p align="center" class="georgia_16px_559cbe">Mandaluyong City 1550</p>
    <p align="center"><span class="georgia_16px_559cbe">Phone: +63 917 887 7424</span><br />
    </p>
    <div id="contact-area">
      <form method="post" action="contact/contactengine.php">
        <table>
          <tr>
          <td> </td>
            <td><em>
              <label for="Name" class="left"><strong>              Name:</strong></label>
              (required)<br />
              <br />
              <input name="Name" type="text" value="First Name, Last Name" />
            </em></td>
          </tr>
         <tr>
            <td> </td>
            <td><em>
              <label for="Tel" class="left"><strong><br />
              Contact Number:</strong></label>
              (required)<br />
              <br />
              <input type="text" name="Tel" />
            </em></td>
          </tr>
          <tr>
            <td> </td>
            <td><label for="Email" class="left"><strong><em><br />
            Email:</em></strong></label>
            <em>(required)</em><br /><br /><input name="Email" type="text" value="[email protected]" /></td>
          </tr>
          <tr>
            <td> </td>
            <td><label for="Message" class="left"><strong><em><br />
            Message:</em></strong></label>
            <em>(required)</em><br /><br /><textarea name="Message" rows="20" cols="20">Type your message here</textarea></td>
          </tr>
        </table>
        <div id="captcha-area">
          <?php
                    require_once('contact/recaptchalib.php');
                    $publickey = "6Lcd3AgAAAAAAAshrQD48fz1uOm_KrgeRBEnsU9e";
                    $privatekey = "6Lcd3AgAAAAAALNv3Uga2Pi7tHi08wODv-fsXR_N";
                    # the response from reCAPTCHA
                    $resp = null;
                    # the error code from reCAPTCHA, if any
                    $error = null;
                    # are we submitting the page?
                    if ($_POST["submit"]) {
                      $resp = recaptcha_check_answer ($privatekey,
                                                              $_SERVER["REMOTE_ADDR"],
                                                              $_POST["recaptcha_challenge_field"],
                                                              $_POST["recaptcha_response_field"]);
                      if ($resp->is_valid) {
                         echo "You got it!";
                         # in a real application, you should send an email, create an account, etc
                      } else {
                         # set the error code so that we can display it. You could also use
                         # die ("reCAPTCHA failed"), but using the error message is
                         # more user friendly
                         $error = $resp->error;
                    echo recaptcha_get_html($publickey, $error);
                    ?>
        </div>
        <input type="submit" name="submit" value="Submit" class="submit-button" />
      </form>
    </div>
</div>
</div>
</body>
Here's the css:
@charset "utf-8";
/* CSS Document */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }#main_container #top_nav {
     height: 35px;
     background-color: #000000;
#main_container #top_nav #nav {
     font-family: Georgia;
     height: 35px;
     width: 940px;
     margin-right: auto;
     margin-left: auto;
#page-wrap h1 {
     font-family: Georgia;
     font-size: 26px;
     font-style: normal;
#footer {
     background-color: #000000;
     color: #FFFFFF;
     text-align: center;
#footer_owl_cont p    {
     margin-left: 120px;
#footer_owl_cont    {
     float: left;
     width: 481px;
     clear: both;
     margin-left: 239px;
     background-image: url(images/owl_footer.gif);
     background-repeat: no-repeat;
     background-position: left center;
     height: 142px;
     color: ffffff;
     background-color: transparent;
#sidebar #sidebar_cont_2 {
     margin-top: 255px;
#pitch_container {
     height: 150px;
     background-color: #000000;
     margin-right: auto;
     margin-left: auto;
     color: #FFFF00;
     font-family: Arial;
     font-style: italic;
     width: 900px;
     margin-top: 100px;
#body_container {
     margin-right: auto;
     margin-left: auto;
     width: 940px;
     padding-top: 30px;
#footer_owl_cont .georgia_14px_559cbeCopy a    {
     color: #FFFFFF;
     text-decoration: none;
#footer_owl_cont .georgia_14px_559cbeCopy a:hover    {
     text-decoration: underline;
#main_container #top_nav #nav ul li a {
     font-family: Georgia, sans-serif;
     color: 559cbe;
     text-decoration: none;
#main_container #top_nav #nav {
     color: 559cbe;
     text-decoration: none;
#main_container #top_nav #nav #nav_container {
     clear: both;
     float: left;
     margin-top: 10px;
#main_container #top_nav #nav #nav_container a:hover {
     text-decoration: underline;
#main_container #top_nav #nav #nav_container a {
     color: #559CBE;
     text-decoration: none;
     font-family: Georgia;
#main_container #top_nav #nav ul {
     list-style-type: none;
#main_container #top_nav ul li {
     display: inline;
     padding-right: 2.5px;
     padding-left: 2.5px;
#copyright   {
     width: 940px;
     margin-right: auto;
     margin-left: auto;
     height: 148px;
     color: 559cbe;
#main_container   #header_container {
     background-image: url(images/bg_header.jpg);
     background-repeat: repeat-x;
     background-position: center top;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: #000000;
#main_container #header_container #header_main {
     height: 354px;
     width: 940px;
     margin-right: auto;
     margin-left: auto;
     background-color: transparent;
     background-image: url(images/header_bg2.png);
     background-repeat: no-repeat;
     background-position: right;
#main_container #header_container #header_main #submit_cont {
     float: left;
     margin-top: 233px;
     margin-left: 435px;
     font-size: 18px;
     font-family: Georgia;
     font-style: italic;
#main_container #header_container #header_main #submit_cont a {
     color: #FFFF00;
     text-decoration: none;
#main_container #header_container #header_main #submit_cont a:hover {
     text-decoration: underline;
#sidebar {
     float: left;
     width: 380px;
     clear: both;
#maincontent {
     width: 540px;
     margin-left: 400px;
     font-family: Georgia;
     line-height: 1.6em;
#sidebar #banner_1_cont {
     height: 235px;
     width: 380px;
     background-image: url(images/banner_1_q1.jpg);
     background-color: transparent;
     background-repeat: no-repeat;
     background-position: center center;
     clear: both;
     float: left;
#sidebar #banner_1_cont p {
     font-family: Georgia;
     font-size: 13px;
     font-style: italic;
     color: #000000;
     margin-top: 175px;
     margin-left: 15px;
     position: relative;
#maincontent ol {
     list-style-position: inside;
#maincontent h3 {
     font-size: 26px;
#pitch_container ul li {
     font-family: Georgia;
     font-size: 26px;
     font-style: italic;
     line-height: 1.6em;
     color: 1e1e1e;
I hope you can enlighten me guys, am I missing something which makes it NOT to appear in Dreamweaver?
Regards,
Sid

Thanks for the response Gary. However, the 35px that you're seeing is actually for the #nav. I recreate the css and tried to remove some of the heirarchy thing. Here's the updated copy. I even tried to remove the #main_container. Same thing happens, the bg image is still not appearing? I tried changing the file type to JPG but to no avail. I think I'm overlooking something which is causing the issue.
@charset "utf-8";
/* CSS Document */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }#top_nav {
     height: 35px;
     background-color: #000000;
#nav   {
     font-family: Georgia;
     height: 35px;
     width: 940px;
     margin-right: auto;
     margin-left: auto;
#page-wrap h1 {
     font-family: Georgia;
     font-size: 26px;
     font-style: normal;
#footer {
     background-color: #000000;
     color: #FFFFFF;
     text-align: center;
#footer_owl_cont p    {
     margin-left: 120px;
#footer_owl_cont    {
     float: left;
     width: 481px;
     clear: both;
     margin-left: 239px;
     background-image: url(images/owl_footer.gif);
     background-repeat: no-repeat;
     background-position: left center;
     height: 142px;
     color: ffffff;
     background-color: transparent;
#sidebar #sidebar_cont_2 {
     margin-top: 255px;
#pitch_container {
     height: 150px;
     background-color: #000000;
     margin-right: auto;
     margin-left: auto;
     color: #FFFF00;
     font-family: Arial;
     font-style: italic;
     width: 900px;
     margin-top: 100px;
#body_container {
     margin-right: auto;
     margin-left: auto;
     width: 940px;
     padding-top: 30px;
#footer_owl_cont .georgia_14px_559cbeCopy a    {
     color: #FFFFFF;
     text-decoration: none;
#footer_owl_cont .georgia_14px_559cbeCopy a:hover    {
     text-decoration: underline;
#nav ul li a   {
     font-family: Georgia, sans-serif;
     color: 559cbe;
     text-decoration: none;
#nav   {
     color: 559cbe;
     text-decoration: none;
#nav_container    {
     clear: both;
     float: left;
     margin-top: 10px;
#nav_container a:hover    {
     text-decoration: underline;
#nav_container a    {
     color: #559CBE;
     text-decoration: none;
     font-family: Georgia;
#nav ul   {
     list-style-type: none;
#top_nav ul li {
     display: inline;
     padding-right: 2.5px;
     padding-left: 2.5px;
#copyright   {
     width: 940px;
     margin-right: auto;
     margin-left: auto;
     height: 148px;
     color: 559cbe;
#header_container     {
     background-image: url(images/bg_header.jpg);
     background-repeat: repeat-x;
     background-position: center top;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: #000000;
#header_main   {
     height: 354px;
     width: 940px;
     margin-right: auto;
     margin-left: auto;
     background-color: transparent;
     background-image: url(images/header_bg2.png);
     background-repeat: no-repeat;
     background-position: right;
#submit_cont    {
     float: left;
     margin-top: 233px;
     margin-left: 435px;
     font-size: 18px;
     font-family: Georgia;
     font-style: italic;
#submit_cont a    {
     color: #FFFF00;
     text-decoration: none;
#submit_cont a:hover    {
     text-decoration: underline;
#sidebar {
     float: left;
     width: 380px;
     clear: both;
#maincontent {
     width: 540px;
     margin-left: 400px;
     font-family: Georgia;
     line-height: 1.6em;
#banner_1_cont {
     height: 235px;
     width: 380px;
     background-image: url(images/banner_1_q1.jpg);
     background-color: transparent;
     background-repeat: no-repeat;
     background-position: center center;
     clear: both;
     float: left;
#banner_1_cont p {
     font-family: Georgia;
     font-size: 13px;
     font-style: italic;
     color: #000000;
     margin-top: 175px;
     margin-left: 15px;
     position: relative;
#maincontent ol {
     list-style-position: inside;
#maincontent h3 {
     font-size: 26px;
#pitch_container ul li {
     font-family: Georgia;
     font-size: 26px;
     font-style: italic;
     line-height: 1.6em;
     color: 1e1e1e;

My background image not loading after 32765 px. My page total height is 129866px.

I am developing a website . When i open my website in Firefox it does not load background properly. It stops at 33,565 px from top. when i load it more time it stops on same situation. Can you please asssit me where i am wrong or it is bug of Fifefox. Is there any salutation of this problem.
Many Thanks
Bhhpendra

This is an old problem in Firefox on Windows that apparently is not solved yet. See:
* [https://support.mozilla.org/en-US/questions/950826 Firefox suddenly stops showing background]
* Likely related: [https://support.mozilla.org/en-US/questions/960717 "This image cannot be displayed because it contains errors"]
I'm not aware of any excellent workarounds. In some cases, you can place a background-color behind the image that will be acceptable once the image stops rendering. In other cases, you may be willing to fix the image to a shorter container and scroll the text within that container.

Background image not scrolling with text

Similar Messages

Maybe you are looking for