Css background repeat

I'm using css to repeat a background image horizontally
across a table that
stretches 100% within a div.
Is there a way to constrain the background image to only tile
75% of the
entire table width? Or whatever percent I choose.
Thanks,
-D-

No, not as long as it's the background of something with 100%
width.
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
==================
"-D-" <[email protected]> wrote in message
news:e6son7$gmn$[email protected]..
> I'm using css to repeat a background image horizontally
across a table
> that
> stretches 100% within a div.
>
> Is there a way to constrain the background image to only
tile 75% of the
> entire table width? Or whatever percent I choose.
>
> Thanks,
> -D-
>
>

Similar Messages

CSS Problem - Background repeat & Max/Min Width

I have the problem at lower resolutions that the content div sticks out of the main document.
Or in fact, the content isnt sticking out, its the background repeat that is in the right of the screen thats pushed into the doc.
And also the background repeat isnt always repeating till bottom. It doesnt matter how big a negative margin is.
How can i let the background repeat right stick to the end of the document instead of the width of screen?
How can i let the repeat continue so it goeas all the way down?
Here's the CSS:
@charset "utf-8";
/* CSS Document */
/* Main Floats */
html,body {
     height:auto;
     min-width:800px;
     width:auto;
     background: #FFFFFF url(../Art/Background.png) no-repeat center;
     background-attachment:fixed;
     color:#000;
     margin:auto;
#BackGrRepeat1{
     float:right;
     height:auto;
     width:auto;
     min-width:800px;
     background: transparent url(../Art/greenfade_right.png) repeat-y right top;
     background-attachment:fixed;
     margin-right:-0px;
     margin-top:-10px;
     margin-bottom:-150px;
#BackGrRepeat2{
     float:left;
     height:auto;
     width:auto;
     min-width:800px;
     background: transparent url(../Art/greenfade_left.png) repeat-y left top;
     background-attachment:fixed;
     margin-left:-0px;
     margin-top:-10px;
     margin-bottom:-150px;
#WContainer{
     margin: 10px auto;
     width:80%;
     background:none;
     min-height:50%;
     line-height: 130%;
#WHeader{
     padding: .5em;
.TabbedPanelsContentGroup{
     min-width:600px;
.VTabbedPanels .TabbedPanelsTabGroup {
     float: left;
     width: 172px;
     background: none;
     margin: 0;
     margin-left:-3em;;
.VTabbedPanels .TabbedPanelsContentGroup {
     margin-left: 172px;
     min-height:18em;
     padding: 2em;
     border-left: solid 1px #999;
     border-bottom: solid 2px #999;
     border-top: solid 1px #999;
     border-right: solid 2px #999;
#WFooter{
     clear: both;
     margin: 0;
     padding: .5em;
/* Text Styles */
h1{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color:#05692E;
font-weight: bold;
font-style:italic;
font-size: 3em;
line-height:105%;
h2{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color:#078330;
font-weight: bold;
font-size: 2em;
line-height:105%;
p{
font-family: "Verdana", verdana, arial, helvetica, sans-serif;
font-size: 1em;
margin-top: 0;
.small{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
font-size: .7em;
text-align:center;
/* Menu Buttons */
.TabbedPanelsTabGroup ul{
list-style-type: none;
padding: 0px;
margin: 0px;
.TabbedPanelsTabGroup li{
list-style-type: none;
padding: 0px;
margin: 0px;
.Button a{display:block;}
.Button a:hover{background-position:left bottom;}
a.Button {display:none}
/* Text Images */
.floatright
float: right;
width: 100%;
margin: 5px auto;
background-color: #fff;
padding: 5px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
div.floatright img
border-top: 2px solid #555;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 2px solid #555;
.floatleft
float: left;
width: 100%;
margin: 5px auto;
background-color: #fff;
padding: 5px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
div.floatleft img
border-top: 2px solid #555;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 2px solid #555;
/* Message Screens */
#message{
     margin: 50px;
     min-height:18em;
     padding: 2em;
     border-left: solid 1px #999;
     border-bottom: solid 2px #999;
     border-top: solid 1px #999;
     border-right: solid 2px #999;

I think you're going about this the wrong way. When you float content, it is removed from the normal flow. That's why your floated right background doesn't reach page bottom.
Look at this DEMO of a centered liquid layout page.View source in browser.
http://alt-web.com/TEMPLATES/CSS2-Liquid-Page.shtml
Using my demo as an example, you could place a repeating, solid light-green image in the body to give the page its borders. Add another repeating background to the #wrapper division.
Add a 3rd background image or light color to the #content division.
Use floats for sidebar content only.
Hope this helps.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

CSS - background image repeat-y

Hello,
QUESTIONThis works great in IE v6.0. How can I get the
background position to work in Firefox 2.0?
Instead of a tiled background that I can control where it
begins to tile within a DIV, in Firefox 2.0 it displays
the image once and doesn't tile like it does in IE. Argh!
background-image:
url(images/SideNav/side_nav_bottom_repeat.gif);
background-repeat: repeat-y;
background-position: 0% 218px;
I just went through a CSS training video and applied some of
the things taught.
It was very helpful thanks you. However it worked in IE but
not in Firefox.
http://movielibrary.lynda.com/html/modPage.asp?ID=279
5. Adding Colors and Backgrounds
Movie: Positioning backgrounds
Is there a work around for Firefox?

Zero is zero no matter what units you have on it. I am not
aware of any
mixed unit issue like that.
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
==================
"Alexander Ross" <[email protected]> wrote in message
news:f0rkhi$kht$[email protected]..
>I have some vague recolection about weird behaviors with
mixed units. Try:
>
> background-position: 0px 218px;
>
> If not, post a link to your page
>
>
>> background-image:
url(images/SideNav/side_nav_bottom_repeat.gif);
>> background-repeat: repeat-y;
>> background-position: 0% 218px;

CSS- Background img not showing up in container

Hello, I am new to css but not to webpages. I used to design
pages using tables and now I want to learn and design using css.
But I'm having trouble and I figure its a quick fix. Note this
website is not on line I am doing my test use IE 7 and Firefox ver
2 PC Ver.
Q: I'm trying to design a website for a client and I am have
trouble try to get my background img to show up in my #container.
Here is sample of my basic layout. Hope some could help me.
@charset "utf-8";
body {
background-color: #271a0b;
background-image: url(../images/bgStrip.gif);
background-repeat: repeat-x;
#container {
width: 100%;
height: 900px;
overflow: hidden;
background-image: url(/images/backGround.jpg);
background-repeat: no-repeat;
background-position: 0;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<link href="asset/screen.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="container">Content for id
"container" Goes Here</div>
</body>
</html>
body background is working. Note: Got the codes samples from
CSS Cookbook, good book learning allot but can't seem to get it to
work. Hope some could help me.

If the page in question is one level below the root of the
site, and if the
images folder is at the same level as the root of the site,
then both links
would be correct.
Also, since background-position defaults to "0", there's no
reason to
restate it.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Virginia Carter" <[email protected]>
wrote in message
news:[email protected]...
> Without seeing the page on the web, it's somewhat
difficult to see exactly
> where the problem is, but this is curious:
>
> body {
> background-color: #271a0b;
> background-image: url(../images/bgStrip.gif);
> background-repeat: repeat-x;
> }
>
> #container {
> width: 100%;
> height: 900px;
> overflow: hidden;
> background-image: url(/images/backGround.jpg);
background-repeat:
> no-repeat;
> background-position: 0;
> }
>
> It's looking in two different places for those images:
>
> ../images and /images
>
> Check that and then see if you still have troubles.
>
> --
>
> Virginia Carter
> Carolina Web Creations
> ======================
> www.carolinawebcreations.biz
>
> borgru12 wrote:
>> Hello, I am new to css but not to webpages. I used
to design pages using
>> tables and now I want to learn and design using css.
But I'm having
>> trouble and I figure its a quick fix. Note this
website is not on line I
>> am doing my test use IE 7 and Firefox ver 2 PC Ver.
>>
>> Q: I'm trying to design a website for a client and I
am have trouble try
>> to get my background img to show up in my
#container. Here is sample of
>> my basic layout. Hope some could help me.
>> @charset "utf-8";
>>
>> body {
>> background-color: #271a0b;
>> background-image: url(../images/bgStrip.gif);
>> background-repeat: repeat-x;
>> }
>>
>> #container {
>> width: 100%;
>> height: 900px;
>> overflow: hidden;
>> background-image: url(/images/backGround.jpg);
background-repeat:
>> no-repeat;
>> background-position: 0;
>> }
>>
>>
>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
>> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>> <html xmlns="
http://www.w3.org/1999/xhtml">
>> <head>
>> <meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
>> <title>Untitled Document</title>
>>
>> <link href="asset/screen.css" rel="stylesheet"
type="text/css" />
>> </head>
>>
>> <body> <div id="container">Content for
id 'container' Goes Here</div>
>>
>> </body>
>> </html>
>>
>>
>> body background is working. Note: Got the codes
samples from CSS
>> Cookbook, good book learning allot but can't seem to
get it to work. Hope
>> some could help me.
>>

Css background-position problem

Hello, I get a problem with this style:
<style type="text/css" media="screen">
html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
body {
background-color:#ffffff;
background-image:url(images/myimage.jpg);
background-position: center bottom;
background-repeat:repeat-x;
</style>
In ie7 works fine, in firefox 2 the bottom position doesn't
work...
Any suggestion ?
Thanks
howdy

Hello, this is the page, simply copy and paste.
<!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>test background</title>
<style type="text/css" media="screen">
html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
body {
background-color:#ffffff;
background-image:url(
http://img179.imageshack.us/img179/2401/backgroundkc8.jpg);
background-position: center bottom;
background-repeat:repeat-x;
#layer1{
text-align: center;
width: 300px;
margin-right: auto;
margin-left: auto;
border: 2px double #003333;
</style>
</head>
<body>
<div id="layer1">Lorem ipsum dolor sit amet,
consectetuer adipiscing
elit. Quisque cursus, justo a tincidunt volutpat, dui orci
feugiat
justo, at varius odio est quis turpis. Integer nisl enim,
condimentum
et, eleifend et, posuere quis, risus. Nam convallis. Integer
diam dui,
accumsan mattis, dignissim at, dictum rutrum, justo. Praesent
lacinia.
Cras a diam. Aenean quis elit. Duis mauris erat, aliquet nec,
malesuada
laoreet, aliquam sit amet, magna. Ut turpis metus,
sollicitudin ac,
fermentum non, pretium eu, augue. Nunc faucibus, leo eu
pharetra
ultrices, sem augue ultricies risus, at egestas velit lectus
ac velit.
Suspendisse pretium nibh dapibus turpis. Praesent felis mi,
vestibulum
eu, pellentesque et, consequat eu, ante. Nulla accumsan enim
et pede.
Suspendisse potenti.
Donec eget nulla. Proin et est. Integer volutpat, dolor
scelerisque
bibendum egestas, lacus dui venenatis odio, vitae varius
massa eros sit
amet ligula. Curabitur tellus. Curabitur ultricies volutpat
tellus. In
sodales. Duis cursus mi eu dui placerat porta. Mauris laoreet
turpis at
nunc. Vivamus volutpat, metus dignissim accumsan hendrerit,
turpis
turpis aliquet nulla, non viverra dui dui quis quam. Mauris
sem nunc,
laoreet in, elementum vitae, tempor a, libero. Cras ac turpis
sit amet
risus cursus ultrices. Sed id quam.
Nulla tortor ligula, adipiscing nec, ornare eu, gravida in,
justo. Sed
elementum vestibulum lectus. Mauris lectus mauris, convallis
nec,
posuere quis, lacinia at, felis. Vestibulum ante ipsum primis
in
faucibus orci luctus et ultrices posuere cubilia Curae;
Aenean cursus
quam eget dui. Maecenas sapien. Aenean pellentesque lobortis
mi. Quisque
tempor ipsum in libero. Pellentesque habitant morbi tristique
senectus
et netus et malesuada fames ac turpis egestas. Class aptent
taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos.
Quisque lacus tellus, ornare quis, euismod et, lacinia sed,
justo. Proin
auctor nisi sed tortor. Fusce in justo et nisl fermentum
vehicula.
Quisque urna felis, lacinia at, viverra in, fermentum ut,
lacus. Duis
tempus. Morbi bibendum libero vitae diam faucibus placerat.
Praesent eu sapien. Sed ut velit quis magna lobortis
malesuada.
Phasellus dignissim risus ac est. Pellentesque semper sem.
Donec porta
nulla nec quam. Pellentesque aliquet risus id quam. Proin
tincidunt erat
nec nunc. Praesent euismod fringilla ipsum. Donec ornare.
Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia
Curae; Sed leo.
Proin non nisi non neque porta tempus. Proin varius velit eu
sapien.
Pellentesque pulvinar arcu id ante. Nunc eu diam. Phasellus
euismod,
felis in scelerisque pharetra, diam augue eleifend mi, a
rutrum mauris
arcu nec orci. Proin sed erat. Pellentesque et libero.
Aliquam ante
velit, ultrices ut, fermentum ac, cursus ut, est. Etiam vitae
nisl ac
metus cursus viverra. Proin non felis. Donec massa. Nullam
quam lectus,
pulvinar eget, condimentum at, tristique in, quam. Proin
vehicula
elementum diam. Proin sapien. Praesent suscipit, lorem at
dapibus
fringilla, orci elit facilisis lacus, at dictum augue velit
quis enim.
Mauris eu mauris. Aliquam rhoncus fermentum pede. Vestibulum
gravida
vulputate mauris.
Pellentesque consectetuer. Cras tellus justo, iaculis vitae,
semper at,
scelerisque porta, tortor. Pellentesque at mi sed tellus
pellentesque
ultricies. In quis pede. Integer vel tortor at dui elementum
suscipit.
Praesent interdum posuere odio. Integer mollis mattis ipsum.
Duis id
metus ut nulla molestie sagittis. Suspendisse faucibus urna
vel metus.
Sed bibendum, dolor sit amet rhoncus rutrum, lorem turpis
pharetra
tortor, quis viverra neque lorem eget massa. Lorem ipsum
dolor sit amet,
consectetuer adipiscing elit. Suspendisse vestibulum arcu
vitae odio.
Fusce enim lacus, porttitor nec, scelerisque non, viverra eu,
enim. Sed
mauris. In hac habitasse platea dictumst. Duis porta mauris
quis orci.
Donec suscipit turpis eu dui egestas suscipit. Suspendisse
potenti. Cum
sociis natoque penatibus et magnis dis parturient montes,
nascetur
ridiculus mus. In hac habitasse platea dictumst.
Cras in arcu a mi iaculis ultricies. Pellentesque sed lorem
at sem
euismod blandit. Nullam pede lacus, interdum eu, aliquam a,
pretium vel,
sem. Pellentesque fringilla leo feugiat nibh. Cras non enim.
Donec
luctus ante vel diam. Mauris volutpat sapien eget nunc. Donec
nec lectus
nec leo iaculis fringilla. Sed felis magna, cursus et,
hendrerit sit
amet, pretium at, sapien. Vivamus ornare neque facilisis
arcu. Vivamus
nisi leo, varius ac, sodales ut, dapibus eget, eros.
</div>
</body>
</html>

CSS Background Shifts Down

So, i am working on my school's website in my Web Development Course, and everything seems to be going fine. I have enctountered a problem, i have a divider holding a table that is our navigation bar, and below it the content of the site. When it is in the design/code view, it looks fine as displayed in Figure 1
then when it is previewed in any browser, or in live view, it moves it down like 10ish pixels...there is no margins on any of the div either.
and here is the code for you to look at.
<!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>Belmont High School - Home</title>
<style type="text/css">

</style>
<script src="/Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
</head>
<body class="oneColFixCtr" onload="MM_preloadImages('file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/Home_DOWN.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/home_OVER.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/aboutus_DOWN.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/aboutus_OVER.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/departments_DOWN.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/departments_OVER.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/sports_DOWN.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/sports_OVER.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/guidance_DOWN.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/guidance_OVER.png')">
<div id="container">
<div class="header" id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="148" id="bhs_header" title="Belmont High School Slideshow">
    <param name="movie" value="movie/header_slideshow.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    
    <param name="expressinstall" value="/Scripts/expressInstall.swf" />
    
    
    <object type="application/x-shockwave-flash" data="movie/header_slideshow.swf" width="800" height="148">
      
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="/Scripts/expressInstall.swf" />
      
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      
    </object>
    
</object>
</div>

<div id="navigation">
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><a href="index.html" target="_top" onclick="MM_nbGroup('down','group1','home','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/Home_DOWN.png',1)" onmouseover="MM_nbGroup('over','home','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/home_OVER.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/home_UP.png" alt="Home" name="home" width="80" height="30" border="0" id="home" onload="" /></a></td>
      <td><a href="index_aboutus.html" target="_top" onclick="MM_nbGroup('down','group1','aboutus','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/aboutus_UP.png',1)" onmouseover="MM_nbGroup('over','aboutus','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/aboutus_OVER.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/aboutus_DOWN.png" alt="About Us" name="aboutus" width="80" height="30" border="0" id="aboutus" onload="" /></a></td>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','depts','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/departments_DOWN.png',1)" onmouseover="MM_nbGroup('over','depts','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/departments_OVER.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/departments_UP.png" alt="Departments" name="depts" width="80" height="30" border="0" id="depts" onload="" /></a></td>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','sports','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/sports_DOWN.png',1)" onmouseover="MM_nbGroup('over','sports','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/sports_OVER.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/sports_UP.png" alt="Sports" name="sports" width="80" height="30" border="0" id="sports" onload="" /></a></td>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','resources','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/resources_DOWN.png',1)" onmouseover="MM_nbGroup('over','resources','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/resources_OVER.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/resources_UP.png" alt="Resources" name="resources" width="80" height="30" border="0" id="resources" onload="" /></a></td>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','guidance','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/guidance_DOWN.png',1)" onmouseover="MM_nbGroup('over','guidance','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/guidance_OVER.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/guidance_UP.png" alt="Guidance" name="guidance" width="80" height="30" border="0" id="guidance" onload="" /></a></td>
    </tr>
</table>
</div>

<div class="bubble" id="bubble">
<p>Mission Statement</p>
<i><p><font size="3">The mission of Belmont High School is to develop contributing
<br>members of society who are communicators and life long learners.</br></font></p></i>
<p>Statement Of Purpose</p>
<i>
<p><font size="3">Belmont High School establishes a learning environment which promotes intellectual and creative growth and social, emotional and physical development. The professional staff, with the support of the residents of the Shaker Regional School District, recognizes and accepts the responsibility to foster academic excellence in all areas of curriculum and to develop young adults who possess skills, knowledge, and social responsibility. Belmont High School realizes that learning is lifelong and that our goals include present day and lifelong learning opportunities.</font></p>
<p><a href="http://www.maps.google.com" target="_blank">Directions</a>
    </p>
</i></div>

<div class="content" id="content">
<div class="left">
<table width="200" height="421" border="0">
<tr>
    <td width="65" height="21" align="right" scope="col">Quick</td>
    <td width="125" scope="col">Links</td>
</tr>
<tr>
    <td height="42"> </td>
    <td>Teacher Pages</td>
</tr>
<tr>
    <td height="42"> </td>
    <td>Student Handbook</td>
</tr>
<tr>
    <td height="42"> </td>
    <td><p>Plato (Summer Recovery Program)</td>
</tr>
<tr>
    <td height="42"> </td>
    <td> </td>
</tr>
<tr>
    <td height="42"> </td>
    <td> </td>
</tr>
<tr>
    <td height="42"> </td>
    <td> </td>
</tr>
<tr>
    <td height="42"> </td>
    <td> </td>
</tr>
<tr>
    <td height="42"> </td>
    <td> </td>
</tr>
<tr>
    <td height="42"> </td>
    <td> </td>
</tr>
</table>
</div>
<div class="center" id="center">
    Welcome to Belmont High School!
    <p>We take pride in our school and our community. This site is your online resource for information about us as well as recent news and upcoming events. </p>
    <p>Located in Belmont, New Hampshire, Belmont High School was built in 1998 and services approximately 467 students.<br />
    </p>
<p>The student body is made up of students from the towns of Belmont and Canterbury.
The high school is part of the Shaker Regional School District.</p>
    <font color="#999999"><p>THE CAKE IS A LIE!!!</p></font><img src="images/serving-the-communities.png" width="350" height="30" alt="Serving The Communities Of Belmont And Canterbury" /><br> </br>
    <br> </br>
    This site was created by the students in Mr. Fricks Website Development Course
</div>

<div class="right" id="right">
<table width="201" border="0">
<tr>
    <th width="10" scope="col"> </th>
    <td width="181" scope="col">Announcements:</td>
</tr>
</table>
<ul>
On Saturday, May 14th from 9am-12:30pm at Bedford High School auditorium there will be a NH MILITARY SERVICE ACADEMY DAY.</ul>
<ul>Year books are now on sale for $35.00 reserve your copy today.</ul>
<ul>Senior Breakfast 6/3</ul>
<ul>Congratulations to Mr. Hill for receiving the 2010 NH JumpStart Teaching Award</ul>
<ul>The BHS Robotics team qualified for the 2011 VEX Robotics World Championship</ul>
<ul>Congratulations to Mr. Acquilano " Class M Athletic Director of the Year".</ul>
<ul>Congratulations to Mr. Wormald on being selected as one of the five finalist for the 2010 Great American Teacher of the Year</ul>
</div>

</div>

</div>

<script type="text/javascript">

</script>
</body>
</html>

Browsers add their own default margins and padding to markup elements. You may want to use a Reset CSS. Or add a universal selector rule to the top of your CSS code:
* {margin: 0; padding: 0}
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

CSS Background Image issue in IE(6)

Not sure what's causing this, but I basically have an image
to create faux columns across my page, but the background image
isn't extending to the bottom of the page in IE (6) as it is
correctly in safari and firefox.
The page is here :
link here
The relevant CSS is :
#contentWrapper {
background-image:url(vehiclecolumns.gif);
background-repeat:repeat-y;
#outerWrapper #contentWrapper #rightColumn1 {
float: right;
padding: 15px 10px 10px 10px; /* Sets the padding properties
for an element using shorthand notation (top, right, bottom, left)
width: 754px;
text-align:justify;
#outerWrapper #contentWrapper #content {
margin: 26px 775px 0 0; /* Sets the margin properties for an
element using shorthand notation (top, right, bottom, left) */
padding: 15px 10px 10px 10px; /* Sets the padding properties
for an element using shorthand notation (top, right, bottom, left)
text-align:justify;
#outerWrapper #contentWrapper .clearFloat {
clear: right;
display: block;
Any ideas?
Cheers.

#contentWrapper {
background-image:url(vehiclecolumns.gif);
background-repeat:repeat-y;
overflow:hidden;
zoom:1;
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Iain71" <[email protected]> wrote in
message
news:gaq8f2$pod$[email protected]..
> Not sure what's causing this, but I basically have an
image to create faux
> columns across my page, but the background image isn't
extending to the
> bottom
> of the page in IE (6) as it is correctly in safari and
firefox.
>
> The page is here :
>
>
http://www.mph.uk.com/vehicles701.php
>
> The relevant CSS is :
>
> #contentWrapper {
> background-image:url(vehiclecolumns.gif);
> background-repeat:repeat-y;
> }
> #outerWrapper #contentWrapper #rightColumn1 {
> float: right;
> padding: 15px 10px 10px 10px; /* Sets the padding
properties for an
> element
> using shorthand notation (top, right, bottom, left) */
> width: 754px;
> text-align:justify;
> }
> #outerWrapper #contentWrapper #content {
> margin: 26px 775px 0 0; /* Sets the margin properties
for an element
> using
> shorthand notation (top, right, bottom, left) */
> padding: 15px 10px 10px 10px; /* Sets the padding
properties for an
> element
> using shorthand notation (top, right, bottom, left) */
> text-align:justify;
> }
> #outerWrapper #contentWrapper .clearFloat {
> clear: right;
> display: block;
> }
>
> Any ideas?
>
> Cheers.
>

CSS Background image

At
http://www.robinbachnia.com/index1.htm,
you'll see the content lies in a table cell. I want the background
image to be centered in this cell, non-repeat, etc. Can you show me
what I'm doing wrong, and solution? It will be a template change
I'll apply, once I get it right.
Thanks

This is what you now have in the page -
body{
background: url(images/darknia_cssbgd.jpg) center no-repeat
fixed; }
the syntax is wrong. It should be -
body{
background: url(images/darknia_cssbgd.jpg) no-repeat center;
(in this shorthand CSS, the repeat style has to come before
the position
style, and you do not need the 'fixed' style)
Making that change will get you EXACTLY what you are
specifying - a
background image that sits in the center of the page without
repeating. Is
that what you want?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Bushido" <[email protected]> wrote in
message
news:fob9ql$4s0$[email protected]..
> Hi Murray. I moved the style sheet to head of document,
and uploaded. I
> still
> see a white background. Also, the NIA background image
sits a little too
> high,
> you may see. I want it well below the menu. Any ideas?
>
http://www.robinbachnia.com/css_bgd_test.htm
>

CSS Background frustrations

Hi Guys,
I've come across an issue I regularly have and am determined
to find out why
and to solve it.
Basically, the problem is applying background images to divs.
Works fine in
IE but never in FF.
FireFox takes it's positioning from the top left hand corner
of the browser
window (or body tag) and *not* the div to which the style is
applied.
Why O Why does it do this. Have I missed something?
Currently working on the following which demonstrates the
issue:
http://www.scstechsolutions.co.uk/06/blank.asp
I have looked at the CSS Specs and taken a quick tour though
the newsgroup
and it would seem that this should work... Don't think it
likes me :-(
Many thanks
Justin

Good luck, Justin. The observation you made about the
position of the
background element when using fixed is exactly the reason why
IE is the
outlier, once again.
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
==================
"Justin Reid" <[email protected]>
wrote in message
news:[email protected]...
> That did the job nicely thanks Murray, I didn't know
that about
> 'background-attachment:fixed'.
> As for the background position, I was trying loads of
things and just got
> carried away...
>
> Many thanks for your help.
>
> Justin
>
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:[email protected]...
>>> FireFox takes it's positioning from the top left
hand corner of the
>>> browser window (or body tag) and *not* the div
to which the style is
>>> applied.
>>
>> Using 'background-attachment:fixed' on any element
other than the body
>> tag is dangerous for this very reason. I'm not sure
why you want to use
>> it with this layout, though. And why you are using
>> 'background-position:inherit' also seems a bit
strange to me.
>>
>> Why doesn't something like this work?
>>
>> #container {
>> width:760px;
>> margin:0px auto;
>> height:100%;
>> background-color:#91948a;
>> border-right:#75766f 1px solid;
>> border-left:#75766f 1px solid;
>> }
>> #container #head {
>> background-color: #75766f;
>> border-bottom:#d4e112 solid 2px;
>> }
>>
>> #content1a {
>> width:739px;
>> height:382px;
>> margin:10px auto;/*just showing where the area is*/
>> /*background-attachment: fixed;*/
>> background-image: url(../images/container.gif);
>> background-repeat: no-repeat;
>> /*background-position:inherit;*/
>> }
>> #content2 {
>> width:739px;
>> height:382px;
>> /*background-attachment: fixed;*/
>> background-repeat: no-repeat;
>> background-image: url(../images/crossed.jpg);
>> }
>>
>>
>> --
>> 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
>> ==================
>>
>>
>> "Justin Reid"
<[email protected]> wrote in message
>> news:[email protected]...
>>> Hi Guys,
>>>
>>> I've come across an issue I regularly have and
am determined to find out
>>> why and to solve it.
>>>
>>> Basically, the problem is applying background
images to divs. Works fine
>>> in IE but never in FF.
>>> FireFox takes it's positioning from the top left
hand corner of the
>>> browser window (or body tag) and *not* the div
to which the style is
>>> applied.
>>>
>>> Why O Why does it do this. Have I missed
something?
>>>
>>> Currently working on the following which
demonstrates the issue:
>>>
http://www.scstechsolutions.co.uk/06/blank.asp
>>>
>>> I have looked at the CSS Specs and taken a quick
tour though the
>>> newsgroup and it would seem that this should
work... Don't think it
>>> likes me :-(
>>>
>>> Many thanks
>>>
>>> Justin
>>>
>>
>>
>
>

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;

CSS Background Image - where is it?

Hello, Have placed a fixed background image within my
CSS...it looks fine when I look at it in Dreamweaver. The problem
is when I upload to my webspace the image isn't there. Any ideas?
These are the attributes:
background-attachment: fixed;
background-image: url(images/home.gif);
background-repeat: no-repeat;
background-position: 1px;

dulcettones" <[email protected]> wrote in
message
news:f3m22g$kpu$[email protected]..> Sorry...the
URL is:
> www.notjustthenews.co.uk
> The image in question goes in the top left corner and
changes depending on
> the section you're viewing.
Remove: background-attachment: fixed; and you'll see the
image shows up on
the index page. You need to remove that on each of the rules
you have set
for the #top divs... some of them are missing the white
background color
also.
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
Spry Widget Examples
http://www.dreamweaverresources.com/spry-widgets/

CSS Background properties

Hi there and thanx for helping me out.
I'm having trouble with my background properties in CSS.
I used CS3's Two Columns, Header & Footer, Fixed template
to build my
site.
I have a background which I want to use. It must not repeat
and also
must be fixed and not scroll with the page.
When using this:
background-image: url(../graphics/background.jpg);
background-repeat: no-repeat;
The image shows perfectly well
BUT, when adding:
background-attachment: fixed;
my background does not appear and has disappeared.
Can someone please help me? This happens with both FireFox
and IE.
Thank you so long.
Deon

Try something like this. Good luck, Tom
table
margin-top: auto !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: auto !important;
width: 850px !important;
height: 100% !important;
text-align: left !important;

CSS background cover vertically?

i want to do a site with a large background image, but when the browser its to small the image repeat itself.
does anybody have a nice idea of how to fix it?
should i use a color gradient to mix them?
or set the size or the proportion of the image to something?
is there a css background property to cover vertically?

I don't like to use extra large images for backgrounds as they take up too much bandwidth which creates slower loading pages. Also, you can't predict how small or large your end user's viewport is so your image may not display appropriately on many web devices (mobile phone, tablet, laptop, ultra-wide).
The best backgrounds for web pages are small seamless tiles or gradient slices that repeat horizontally and vertically to fill the browser's viewport, regardless of size.
body {
background-image: url(BG-image,jpg;
To repeat an image vertically
body {
background-image: url(BG-image,jpg;
background-repeat: y;
To repeat an image horizontally
body {
background-image: url(BG-image,jpg;
background-repeat: x;
More on backgrounds:
http://alt-web.com/Backgrounds.shtml
http://w3schools.com/css/css_background.asp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Css Background Gradient

i have a css background gradient... but when i scroll, the gradient stick in the loading height.
what can i do to have the gradient correct always?
html {
    height:100%;
body {
    height:100%;
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: -moz-linear-gradient(top, rgba(84,84,84,0.9) 0%, rgba(0,0,0,0.9) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(84,84,84,0.9)), color-stop(100%, rgba(0,0,0,0.9)));
    background: -webkit-linear-gradient(top, rgba(84,84,84,0.9) 0%, rgba(0,0,0,0.9) 100%);
    background: -o-linear-gradient(top, rgba(84,84,84,0.9) 0%, rgba(0,0,0,0.9) 100%);
    background: -ms-linear-gradient(top, rgba(84,84,84,0.9) 0%, rgba(0,0,0,0.9) 100%);
    background: linear-gradient(top, rgba(84,84,84,0.9) 0%, rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6545454', endColorstr='#e6000000', GradientType=0 );
    margin: 0;
    padding: 0;
    color: #000;

Don't know about the Javascript - you basically would need to create a listener that would detect when the window size changed and the reapply the CSS gradients. One issue with that approach is that it can become a bit of a resource hog.
For approach #2 check out: http://www.designbyfire.com/ - scroll and look at the bottom of his text content - he's using a transparent png graphic to create a kind of fade gradient effect (it's very subtle). Take a look at the source to see how he did it. Also this might be helpful:
http://www.1stwebdesigner.com/inspiration/beautiful-gradient-effects-on-web-design-researc h-part-2/ - a bunch of sites that use this technique for background gradients.
But basically create a gradient graphic in Photoshop (you only need a small sliver graphic as we can repeat it across the x-axis). Then in your CSS do something like this:
body{
background:#ccc url("path/to/gradientImage.jpg") bottom repeat-x;
Change the background color (#ccc) to match the top of your gradient image color. "bottom" tells the browser to attatch the graphic to the bottom of the body tag, "repeat-x" tells the browser to repeat it across the x-axis (horizontal). If you've done it right, your background image will blend into the background color creating a nice gradient effect.

Trouble with css background

Hey guys, I am having trouble with some code. I have nested divs inside of a container dive for the body copy, but I am having trouble with the background of the container div going behind the nested divs. I only have this issue with the background when I go to float the nested divs.
Below is a copy of my html and a copy of my linked css style sheet.
<!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>Welcome to Optimus Lens</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<style type="text/css">
#sector {
     background-repeat: no-repeat;
     background-position: left;
     width: 869px;
     margin-top: -51px;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
#oag {
     width: 574px;
     margin-left: 23px;
     float: left;
     /* [disabled]position: relative; */
#small_col {
     width: 279px;
     margin-right: 23px;
     float: right;
     /* [disabled]position: static; */
</style>
</head>
<body onload="MM_preloadImages('images/home_over.jpg','images/our_mission_over.jpg','images/products_over.jpg','images/news_over.jpg','images/order_over.jpg','images/contact_over.jpg')">
<div id="CONTAINER">
       <div id="header"><img src="images/header_top.png" width="916" height="39" />
       <img src="images/header_logo.jpg" width="916" height="95" />
      <img src="images/header_image.jpg" width="916" height="266" />
       <img src="images/header_bar.jpg" width="916" height="9" />
</div>
      <div id="menuContainer">
     
                <ul>
                <li>
                <img src="images/fold_left_top.png" width="22" height="35" /><img src="images/menu_left.jpg" width="197" height="35" />
                </li>
                <li>
                    <div class="menu n1"><a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/home_over.jpg',1)"><img src="images/home_up.jpg" alt="home" name="home" width="66" height="35" border="0" id="home" /></a></div></li>
                <li>
                  <div class="menu n2"><a href="mission.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Our Mission','','images/our_mission_over.jpg',1)"><img src="images/our_mission_up.jpg" alt="Our Mission" name="Our Mission" width="124" height="35" border="0" id="Our Mission" /></a></div></li>
                <li>
                    <div class="menu n3"><a href="products.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/products_over.jpg',1)"><img src="images/products_up.jpg" alt="products" name="Products" width="98" height="35" border="0" id="Products" /></a></div></li>
                <li>
                    <div class="menu n4"><a href="news.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','images/news_over.jpg',1)"><img src="images/news_up.jpg" alt="News" name="News" width="77" height="35" border="0" id="News" /></a></div></li>
                <li>
                    <div class="menu n5"><a href="order.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Order','','images/order_over.jpg',1)"><img src="images/order_up.jpg" alt="Order" name="Order" width="77" height="35" border="0" id="Order" /></a></div></li>
                <li>
                  <div class="menu n6"><a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/contact_over.jpg',1)"><img src="images/contact_up.jpg" alt="Contact" name="Contact" width="80" height="35" border="0" id="Contact" /></a></div></li>
                <li>
                  <img src="images/menu_right.jpg" width="197" height="35" /><img src="images/fold_right_top.png" width="22" height="35" /> </li>
                </ul>
      </div>
       <div id="header_bottom"><img src="images/fold_left_bottom.png" width="22" height="38" /><img src="images/header_bottom.jpg" width="916" height="38" /><img src="images/fold_right_bottom.png" width="22" height="38" />
    </div>
     <div id="bodycopy">
       <div id="sector">
      <img src="images/home/sector_top.png" width="869" height="341" alt="sector frames" />
      </div>
       <p> </p>
       <div id="oag">
      <img src="images/home/oag_join.png" width="574" height="281" alt="save with oag" />
      <p> </p>
      <img src="images/home/bottom.png" width="574" height="132" />
      </div>
      <div id="small_col">
      <img src="images/home/optimize_small.png" width="279" height="132" />
      <p> </p>
      <img src="images/home/intuition_small.png" width="279" height="132" />
      <p> </p>
      <img src="images/home/intuition_small.png" width="279" height="132" />
      </div>
     </div>
    <div id="footer"><img src="images/footer.png" width="916" height="52" />
</div>
</div>
</body>
</html>body {
     margin: 0px;
     background-image: url(images/background_fade_04.jpg);
     background-repeat: repeat-x;
     background-position: top;
     background-color: #DCDCDC;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
#box1 {
     background-image: url(images/bodycopybox_01.png);
     background-repeat: no-repeat;
     background-position: left;
     height: 54px;
     width: 869px;
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
#box2 {
     background-image: url(images/bodycopybox_02.png);
     background-repeat: repeat-y;
     background-position: left;
     width: 869px;
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
.bodycopybox {
     padding-right: 40px;
     padding-left: 40px;
.bodycopyboxheader {
     padding-right: 40px;
     padding-left: 40px;
     font-weight: bolder;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     color: #21368b;
#box3 {
     background-image: url(images/bodycopybox_04.png);
     background-repeat: no-repeat;
     background-position: left;
     height: 31px;
     width: 869px;
     margin:0 auto;
#box4 {
     background-image: url(images/bodycopybox_03.png);
     background-repeat: no-repeat;
     background-position: left;
     height: 31px;
     width: 869px;
     margin:0 auto;
p {
     margin: 0px;
#header_bottom {
     width: 960px;
     margin:0 auto;
#CONTAINER {
     width: 100%;
     margin:0 auto;
#header {
     width: 916px;
     margin:0 auto;
#menuContainer {
     width: 960px;
     margin:0 auto;
     height: 35px;
#menuContainer ul{
     list-style:none;
     height:35px;
     margin:0;
     padding:0;
#menuContainer li{
     float:left;
     height:35px;
     margin:0;
     padding:0;
#menuContainer li a{
     text-align:center;
     float:none;
     height:35px;
     margin:0;
     padding:0;
div.menu{position:relative;}
.n1{
     width:66px;
     float:left;
     display:inline-block;
     clear:both;
.n2{
     width:124px;
     float:left;
     display:inline-block;
     clear:both;
.n3{
     width:98px;
     float:left;
     display:inline-block;
     clear:both;
.n4{
     width:77px;
     float:left;
     display:inline-block;
     clear:both;
.n5{
     width:77px;
     float:left;
     display:inline-block;
     clear:both;
.n6 {
     width:80px;
     float:left;
     display:inline-block;
     clear:both;
#bodycopy {
     background-color: #FFFFFF;
     width: 916px;
     padding: 0px;
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
#footer {
     width: 916px;
     margin:0 auto;
     padding: 0px;

Try this:
#CONTAINER {
width: 900px;
margin:0 auto;
background: #FFF;
overflow:hidden; /**float containment**/
/**There is no need for #sector division, you can delete it.**/
#oag {
width: 574px;
float: left;
margin-left: 25px;
#small_col {
width: 279px;
float: right;
margin-right: 25px;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Css background repeat

Similar Messages

Maybe you are looking for