CSS Background Image help

[mcollins]

Hi guys,
I really hope someone with better knowledge than me of CSS can help out
here on my little issue. I have been reading up on as much css tutorials including
WS3 website searching for my issue.
I have made a graphic background for the template for my website, and am having
difficulty to make the background fixed (no scroll) centred vertically, and alligned
to the top. (My image is 1600x1600 if that makes a difference)

With the CSS below, I thought this would do just the trick, but am finding the
background image seems to want to not play the game I want. Perhaps someone
might see where I have slipped up.

I have another small issue, but I will wait on the hope someone might spare a few
minutes. I will be most grateful.

Code:

body
{
      background-color: #006699;
    background-image: url(images/cmw_bg.jpg);
      background-position: centre;
      background-repeat: no-repeat;
      font-family: Verdana, Helvetica, sans-serif;
    font-size: 11px;
    margin: 0px;
    padding: 0px 0px 70px 0%;
    min-height:100%;
        height: auto;
}

[Luisehahne]

background-attachment: fixed;

Dietmar

[mcollins]

Thank you very much for taking the time to see how to fix the image. I have done exactly as you have said and it worked a treat. Is there anything in this code that is redundant?

Code:

body
{
    background-attachment: fixed;
      background-color: #006699;
    background-image: url(images/cmw_bg.jpg);
      background-position: centre;
      background-repeat: no-repeat;
      font-family: Verdana, Helvetica, sans-serif;
    font-size: 11px;
    margin: 0px;
    padding: 0px 0px 70px 0%;
    min-height:100%;
        height: auto;
}

Part of the same question is to get the image centered on the page vertically. So Top Centre is what I am trying to achieve. Could you point me in the right direction. I hoped what I had in my CSS would have done that, but I guess something in that is not working as it should. As previously mentioned, my background image is 1600x1600.. Thank you very much..

Ciaran

[dbs]

hi,

try:

background-position: top centre;

dbs

[mr-fan]

centre == center....

read it treetimes this topic....

regards martin

[dbs]

  typical copy&past-error 

but the important thing is that "top" (and the right "center")

dbs

[mcollins]

Oh my goodness... I didn't see the typo. Yes that fixed the centre for the bacground image.....
Thank you so very much guys for your help on that one...  It was really messing with me why
it will not do what I needed.

Now there one more question related  to the same sort of issue...

My footer that I have stuck to the bottom of the page has shifted to the righ and in line with the
content. My content is fixed at 800px wide. I thought I had the footer not within the same div
as the wrapper of content, in which then I could understand the footer shifting right.

Here is my markup .CSS

Code:

#main_content
{margin: 20 0 60 0;
min-height:100%;
height:auto;
width: 750px;
display: block;  
position: relative;
padding: 30px 30px 60px 30px;
}

#content h1
{font-size: 20px;
/* 18px is the default minimum font size for which anti-aliasing will occur. */
margin: 0px;
text-decoration: underline;}

#content h2
{font-size: 18px;
/* 18px is the default minimum font size for which anti-aliasing will occur. */
margin: 0px;
text-decoration: underline}

#content .date
{float: right;}

#content .postedBy
{float: left;}

#content .meta
{height: 1em;}

#content p
{text-align: justify;
text-indent: 1em;
line-height: 1.3em;}

.comments
{border-top: 1px dotted #666666;
border-bottom: 1px dotted #666666;
padding: 4px;
text-align: right;
margin-bottom: 2em;
background-image: url(images/comment_edit.gif);
background-repeat: no-repeat;
background-position: center left;}

a
{color: #666666;}

.left
{float: left;}

.right
{float: right;}

.csskeyword
{color: blue;}

.cssvalue
{color: red;}

p.caption
{text-align: center;}

small.super
{vertical-align: top;
font-size: 0.75em;
line-height: 1.3em;}

.nodisplay
{display: none;}


/*  FOOTER SECTION  */
#footer2{clear:both;position:fixed;bottom:0;width:100%;margin:0 auto;}
#company_info{width:100%;font-family:verdana,arial,sans-serif;font-variant:small-caps;padding:1.0em 0 1.0em 0;background:#4c4948;border-top:2px solid #b35d37;font-size:11px;overflow:visible !important /*Firefox*/;overflow:hidden /*IE6*/;}
#company_info p{text-align:center;color:white;font-weight:normal;font-size:11px;}
#company_info a,#company_info a:visited{color:white;text-decoration:none;font-size:11px;}
#company_info a:hover{color:white;text-decoration:underline;font-size:11px;}

Below is part of my markup for .PHP

Code:

<div style="clear:both;"></div>
</div>

                               
<div id="main_content">
<?php page_content(1); ?>
</div>

<div style="clear:both;"></div>
</div>

<div id="footer2">
<div id="company_info">
<p>company name | address | zip code city</p>
<p>telephone no. | fax no. | email address | website address</p>
</div>

</body>
</html>

Thank you guys again for helping.

[dbs]

div company_info is not closed
and div after main_content is 2 times closed

and try: position:absolute;

and without clear both?

[mcollins]

Hi there, thank you for that, but it does not do anything to get the footer over... I will make a screen shot, it may be easier...

[mcollins]

[dbs]

better is show sourcecode with changes.
it is a local installation?

dbs

[mcollins]

Sure, hopefully the complete source may help....
I appreciate you looking at this...

PHP

Code:

<body>
<?php show_menu(1,0,1,true,'<li><span[class]>[a][menu_title] [/a]</span>','</li>','<ul id="nav">'); ?>
<div id="main">
<a name="top" class="nodisplay"></a>
<div id="top_header"> </div>
<div id="header">
<!-- <div class="icon"> </div> -->
<div class="icon"> </div>
</div>

<div id="wrapper">
               
<div id="centre">

<div class="leftcol">
<?php page_content(2); ?>
</div>

<div class="rightcol">
<?php page_content(3); ?>
</div>

<div style="clear:both;"></div>
</div>
                               
<div id="main_content">
<?php page_content(1); ?>
</div>

<div style="clear:both;">
</div>

</body>
</html>

<div id="footer2">
<div id="fade">
</div>
<div id="company_info">
<p>CMW Web Designs | Westlakes | South Australia</p>
<p>PH: 0458811910 | support@cmwwebdesigns.com | www.cmwwebdesigns.com</p>
</div>
<div id="copyright">&copy;2009 CMW Web Designs</div>
</div>

CSS

Code:

body
{background-attachment: fixed;
background-color: #006699;
background-image: url(images/cmw_bg.jpg);
background-position: top center;
background-repeat: no-repeat;
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
margin: 0px;
padding: 40px 0px 50px 0%;
min-height:100%;
height: auto;}

#nav
{width: 801px;
height: 40px;
border-bottom: 1px solid white;
color: white;
background-color: #202020;
opacity: 0.8;
-moz-opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
position: fixed;
top: 0px;
margin-left: -401px;
left: 50%;
margin-top: 0px;
padding: 0px;
z-index: 99;
_position: absolute;
_top: expression((dummy = document.documentElement.scrollTop) + "px");}

#nav li
{display: block;
float: left;
height: 40px;
width: auto;
text-align: center;
line-height: 40px;}

#nav li a
{display: block;
padding-left: 15px;
padding-right: 15px;
line-height: 40px;
color: white;
text-decoration: none;
font-weight: bold;}

#nav li a:hover
{background-color: #666666;}

#main
{width: 800px;
margin-left: auto;
margin-right: auto;
border-right: 1px solid #666666;
border-left: 1px solid #666666;}

#top_header
{margin: 0px;
border-bottom: 1px solid white;
width: 800px;
height: 60px;
background-image: url(images/hero.jpg);}

#header
{background-image: url(images/header_bg.gif);
height: 3px;
padding-top: 1px;
position: relative;}

.icon
{width: 100px;
height: 79px;
margin-top: -30px;
margin-left: 10px;
background-image: url(images/shinola2.gif);
#_background-image: none;
#filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/shinola2.gif');}

#header h1
{position: absolute;
left: 74px;
top: 8px;
color: white;
font-size: 48px;
font-weight: bold;
margin: 0px;}

#header h1.shad
{left: 76px;
top: 10px;
color: black;
opacity: 0.7;
-moz-opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}

#header em
{font-style: normal;
text-decoration: underline;}

#wrapper
{padding-top: 1px;

position: relative;}

#wrapper:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;}

#wrapper {
display: inline-block;}

#wrapper {display: block;}

#centre
{width: 700px;
margin-left: auto;
margin-right: auto;}

.leftcol {
float: left;
padding: 20px 20px;
width: 300px;
border: #ccc 1px solid;
text-align: justify;
margin: 0 0 10px 0;}

.rightcol {
float: right;
padding: 20px 20px;
width: 300px;
border: #ccc 1px solid;
margin: 0 0 10px 0;}

.special {
clear: both;
margin:0px 0 20px 0;
padding: 5px 20px;
border 1px solid #eee;
colour: #444;}

#main_content
{margin: 20 0 60 0;
min-height:100%;
height:auto;
width: 750px;
display: block;  
position: relative;
padding: 30px 30px 60px 30px;}

#content h1
{font-size: 20px;
margin: 0px;
text-decoration: underline;}

#content h2
{font-size: 18px;
margin: 0px;
text-decoration: underline}

#content .date
{float: right;}

#content .postedBy
{float: left;}

#content .meta
{height: 1em;}

#content p
{text-align: justify;
text-indent: 1em;
line-height: 1.3em;}

.comments
{border-top: 1px dotted #666666;
border-bottom: 1px dotted #666666;
padding: 4px;
text-align: right;
margin-bottom: 2em;
background-image: url(images/comment_edit.gif);
background-repeat: no-repeat;
background-position: center left;}

a
{color: #666666;}

.left
{float: left;}

.right
{float: right;}

.csskeyword
{color: blue;}

.cssvalue
{color: red;}

p.caption
{text-align: center;}

small.super
{vertical-align: top;
font-size: 0.75em;
line-height: 1.3em;}

.nodisplay
{display: none;}

.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix { height: 1%;}
.clearfix {display: block;}

#footer2{position:fixed;bottom:0;width:100%;padding:0;}
#fade{height:50px;width:100%;background:transparent url('fade.png') 0 top repeat-x;_display:none;_height:0;}
#company_info{width:100%;font-family:verdana,arial,sans-serif;font-variant:small-caps;padding:1.0em 0 1.0em 0;background:#4c4948;border-top:2px solid #b35d37;font-size:11px;overflow:visible !important /*Firefox*/;overflow:hidden /*IE6*/;}
#company_info p{text-align:center;color:white;font-weight:normal;font-size:11px;}
#company_info a,#company_info a:visited{color:white;text-decoration:none;font-size:11px;}
#company_info a:hover{color:white;text-decoration:underline;font-size:11px;}
#copyright{display:block;display:none;height:30px;width:100%;font-size:11px;color:#999;text-align:center;font-family:verdana,arial,sans-serif;font-variant:small-caps;}
#copyright a{text-decoration:none;color:#999;}
#copyright a:hover{text-decoration:underline;color:#999;}
#copyright a:visited{color:#999;}

[dbs]

the last must be:

</body>
</html>

you should controll: every starting <div> must have a </div>

[mcollins]

Hi there, I originally had the </body></html> at the end, I thought last night it might make a difference. I just didn't sit them back after copying the code over. It didn't help with moving the fotter.
I think I have all the div's closed off....

[dbs]

not think! show! 

[mcollins]

OK... here is the code:

Code:

<?php
if(!defined('WB_URL')) {header('Location: ../index.php');exit(0);}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>

<title><?php echo WEBSITE_TITLE; ?> - <?php echo PAGE_TITLE; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<link href="<?php echo TEMPLATE_DIR; ?>/cmw.css" rel="stylesheet" type="text/css" media="screen" />
</head>


<body>
<?php show_menu(1,0,1,true,'<li><span[class]>[a][menu_title] [/a]</span>','</li>','<ul id="nav">'); ?>
<div id="main">
<a name="top" class="nodisplay"></a>
<div id="hero">
</div>

<div id="header">
<!-- <div class="gear"> </div> -->
<div class="gear"> </div>
</div>

<div id="wrapper">
</div>
               
<div id="centre">
</div>

<div class="leftcol">
<?php page_content(2); ?>
</div>

<div class="rightcol">
<?php page_content(3); ?>
</div>

<div style="clear:both;"></div>
</div>

                               
<div id="main_content">
<?php page_content(1); ?>
</div>

<div style="clear:both;">
</div>

<div id="footer2">
</div>

<div id="fade">
</div>

<div id="company_info">
<p>company| address | address</p>
<p>phone| email| website</p>
</div>

<div id="copyright">&copy;2009 company
</div>


</body>
</html>

[mcollins]

I have had more of a look at the code again just a few mins ago, and have managed to get the footer to stick to the bottom and span accross the page like it should.. I have found a few divs that shouldn't have been in the code, but now in making the footer right, it has thrown some of the content to the left of the screen... lol

I will not give up... for sure not.

[mcollins]

Here is the latest on where I am at.. everything except on bit of content in the middle is thrown to the lft of the page...  Maybe this is something as a hint on why the footer is thrown to the right if I make the content above centre inside the main wrapper...

Code:

<?php

if(!defined('WB_URL')) {header('Location: ../index.php');exit(0);}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>


<head>
<title><?php echo WEBSITE_TITLE; ?> - <?php echo PAGE_TITLE; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<link href="<?php echo TEMPLATE_DIR; ?>/cmw.css" rel="stylesheet" type="text/css" media="screen" />
</head>


<body>
<?php show_menu(1,0,1,true,'<li><span[class]>[a][menu_title] [/a]</span>','</li>','<ul id="nav">'); ?>
<div id="main">
<a name="top" class="nodisplay"></a>
<div id="hero"> </div>
<div id="header">
</div>
<!-- <div class="gear"> </div> -->
<div class="gear"> </div>



<div id="wrapper">
</div>

<div style="clear:both;"></div>
</div>

               
<div id="centre">


<div class="leftcol">
<?php page_content(2); ?>
</div>

<div class="rightcol">
</div>
<?php page_content(3); ?>
</div>

<div style="clear:both;"></div>
</div>
                               
<div id="main_content">
<?php page_content(1); ?>
</div>


<div id="footer2">
<div id="fade">
<div id="company_info">
<p>CMW Web Designs | Westlakes | South Australia</p>
<p>PH: 0458811910 | support@cmwwebdesigns.com | www.cmwwebdesigns.com</p>
<div id="copyright">&copy;2009 CMW Web Designs
</div>


</body>
</html>

[mcollins]

Here is an image to show what is happening to the page:

[dbs]

is not easy to look at your code. makes confuse  
your footer is only a short div. u see?

Code:

<body>
          <?php show_menu(1,0,1,true,'<li><span[class]>[a][menu_title] [/a]</span>','</li>','<ul id="nav">'); ?>
  <div id="main">
            <a name="top" class="nodisplay"></a>
        <div id="hero"></div>
        <div id="header">              <!-- header -->
            <!-- <div class="gear"> </div> -->
            <div class="gear"> </div>
        </div>                         <!-- end header -->
        <div id="wrapper"></div>
        <div id="centre"></div>   <!-- really centre OR center ? -->
        <div class="leftcol">
            <?php page_content(2); ?>
        </div>
        <div class="rightcol">
            <?php page_content(3); ?>
        </div>
        <div style="clear:both;"></div>
        </div>    <!-------- WHAT IS THIS ? take it to the end ---------------------------->
        <div id="main_content">
            <?php page_content(1); ?>
        </div>
        <div style="clear:both;"></div>
        <div id="footer2"></div>
        <div id="fade"></div>
        <div id="company_info">
            <p>company| address | address</p>
            <p>phone| email| website</p>
        </div>
        <div id="copyright">&copy;2009 company</div>

<!-- where is end "main" ? -->
</body>
</html>

[mcollins]

I have had a good clean up of the code, and removed what you have pointed out...
Here is the updated version which has pulled in the content... I have changed a few
more things as you will see in the code.
But the issue seems now that the top of the main content is not making a clear way
under the 2 boxes, and instead following on after the longest box.... LOL... this is
quite a little nuisance this website...
Thank you for helping out so far dbs...

Code:

<?php

if(!defined('WB_URL')) {header('Location: ../index.php');exit(0);}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title><?php echo WEBSITE_TITLE; ?> - <?php echo PAGE_TITLE; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<link href="<?php echo TEMPLATE_DIR; ?>/cmw.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<?php show_menu(1,0,1,true,'<li><span[class]>[a][menu_title] [/a]</span>','</li>','<ul id="nav">'); ?>
<div id="main">
<a name="top" class="nodisplay"></a>
<div id="hero"> </div>
<div id="header">
</div>
<!-- <div class="gear"> </div> -->
<div class="gear"> </div>

<div id="wrapper">

<div style="clear:both;"></div>
</div>
               
<div id="centre">

<div class="leftcol">
<?php page_content(2); ?>
</div>

<div class="rightcol">
</div>

<?php page_content(3); ?>
</div>
                               
<div id="main_content">
<?php page_content(1); ?>
</div>

<div style="clear:both;"></div>
</div>

<div id="footer2">
<div id="company_info">
<p>Website| address | address</p>
<p>phone| email| web address</p>
<div id="copyright">&copy;2009 web
</div>


</body>
</html>

Here is the latest image...

[mcollins]

LOL.. here in Australia... Center= Centre... As for thet div ID, I figured it wouldn't matter as it is just the ID for me to call up in PHP...
Am not sure what you meant by end "Main"?

I have however found exactly where the issue starts for the footer to go off to the right... am taking screenshots as that will explain what I change for the issue to happen... this might help somewhat.

[mcollins]

Ok here are the images I took that will hopefully resolve my issues.

[dbs]

misstake.
i mean not the /div at rightcol.
i mean the /div under the div with clear both.
take this alone /div and go to the end of body with this. u know?

i think all your divs are in one great div names "main" but this main ist not closed.
sorry for my english. ur structure is not good to see with all divs at the left side.
make it like i did and u see better where is div opening and where is this div closed.

dbs

[dbs]

i don't know ur structure.
look at this and make the right changes:

Code:

<body>
<?php show_menu(1,0,1,true,'<li><span[class]>[a][menu_title] [/a]</span>','</li>','<ul id="nav">'); ?>
<div id="main">                           <!--- main --->
        <a name="top" class="nodisplay"></a>
  <div id="hero"> </div>
  <div id="header">                        <!--- header --->
  </div>                                  <!--- end header ??? --->
    <!-- <div class="gear"> </div> -->
  <div class="gear"> </div>

  <div id="wrapper">                     <!--- wrapper --->

  <div style="clear:both;"></div>
</div>                                   <!--- end header ?? end main?? end wrapper??--->

<div id="centre">                         <!--- centre --->

  <div class="leftcol">
        <?php page_content(2); ?>
  </div>

  <div class="rightcol">
        <?php page_content(3); ?>
  </div>

  <div id="main_content">
        <?php page_content(1); ?>
  </div>

  <div style="clear:both;"></div>
</div>                                    <!--- end centre? --->

  <div id="footer2">                      <!--- footer --->
    <div id="company_info">
        <p>Website| address | address</p>
        <p>phone| email| web address</p>
    </div>
    <div id="copyright">&copy;2009 web</div>
  </div>                                   <!--- end footer --->

                                         <!--- here must be a closed div for "main" if this is the end of main--->
</body>
</html>