Welcome to Dream.In.Code
Become an Expert!

Join 150,184 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,101 people online right now. Registration is fast and FREE... Join Now!




CSS Background wont work

 
Reply to this topicStart new topic

CSS Background wont work

Soon2bWebDS
24 Oct, 2007 - 02:26 PM
Post #1

New D.I.C Head
*

Joined: 17 Oct, 2007
Posts: 7


My Contributions
i've tried everything to get the background to show but nothing works ... i tryed to but this code



CODE
#
background-image: url('/v/vspfiles/assets/images/background.jpg');
#
    background-repeat: no-repeat;


at the end of the body but nothing can anyone help !!!! the code for the page im looking at is this

CODE
/* CSS Document */

body{
    text-align:center;
    margin:0;
    padding:0;
    font-size:12px;
    background:#CCCCCF;
    font-family: Arial, Tahoma, helvetica, sans-serif;
    margin: 15px;
}
/*ul, ol, dl { position: relative;  }*/
#body a{
    text-decoration:none;
}
#body li.last{
    margin:0;
    padding:0;
    border:none;
}
#body a:hover{
    text-decoration:underline;
}

/* Header */

#header{
    width:819px;
    height:193px;
    padding:0;
    margin:0px auto;    
    position:relative;
    text-align:left;
    background:url(../images/template/header_bg.jpg) no-repeat left top;
}
#header h1{
    width:263px;
    margin:0;
    padding:0;
    height:69px;
    position:absolute;
    text-align:left;
    top:23px;
    left:14px;
    font-size:1em;
    text-indent:-9999px;
    
}

#header h1 a{

    display:block;
    width:100%;
    height:100%;
    /*background:url(../images/template/header_bg.jpg) no-repeat left top;*/
    text-align:left;
}
#header h1 a#homepage_title{
    text-indent:0;
    display:block;
    width:384px;
    height:56px;
    font-size:2.2em;

    background:transparent;
    margin-top:1em;
    margin-left:1em;
    text-align:left;
}



/* Horizontal Dynamic Navigation

#horz_nav{
    left:7px;
    margin:0px;
    padding:0px;
    position:absolute;
    text-align:center;
    top:97px;
    width:696px;
    height: 18px;
}

#horz_nav ul{
    
    list-style:none;
    margin:0;
    padding:0;
    text-align:left;
    padding-top:4px;
    margin-right:.5em;

}

#horz_nav ul li{
    text-align:left;
    font-size:1.1em;
    font-weight:normal;
    margin-right:.5em;
    padding-right:.5em;
    display:inline;

}

#horz_nav ul li a{
    color:#717171;
    font-weight: normal;
    font-family:Tahoma, Arial, Sans Serif;
    font-size:9px;
    text-transform:uppercase;
    padding-left:.75em;
}
*/

#phone_number{
    float:right;
    padding-right:1em;
    padding-top:1em;
    font-size:11px;
    color:#A3A3A3;
}

/* Top Navigation  (view cart, my account)*/

#top_nav {
    position:absolute;
    top:54px;
    right:10px;
    width:96px;
    text-align:left;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
}
#top_nav ul{
    list-style:none;
    margin:0;
    padding:0;
}
#top_nav ul li{
    padding-bottom:1em;
}
#top_nav ul li a{
    color:#003399;
    font-weight:bold;
}


/* Search Section CSS begins */

div#search_box{
    padding:0px;
    margin:0px;
    text-align:left;
    width:180px;
    position:relative;
    
}

#display_search_box{
    padding:0px;
    margin:0;
    position:absolute;
    top:136px;
    left: 75px;
    width: 192px;

}
#display_search_box form{
    padding:0;
    margin:0;
    height:50px;
}
#display_search_box table td{
    vertical-align:middle;
    
}
#display_search_box input{
    margin:0;
    vertical-align:middle;
    width:151px;
    font-size:10px;
    

}

#display_search_box img{
    margin:0;
    padding:0;
    vertical-align:middle;
    z-index:100;
    margin-bottom:4px;
    
}

/*-- dropdown menu shop by brand */

#DropDown_SHOPBY_MANUFACTURER {
    padding-left:22px;
    margin-bottom:.5em;
    }
    

#DropDown_SHOPBY_MANUFACTURER select{
    width:145px;
    margin:0;
    padding:0;
    }
    


#content{
    padding:0px;
    text-align:left;
    width:819px;
    margin:0px auto;
    background:#fff url(../images/Template/content_top_right.gif) repeat-y right top;
    
}

#content > *{
    text-align:left;
}



/* Left navigation  */


#left_nav{
    margin:0px;
    padding:0px;
    
    /* turn the following attribute on if you need to position absolutely inside of the left_nav.  Beware: this will screw up the rollover_color_popouts menu in IE7
    
    /*position:relative;*/
    height:100%;
    width:164px;
    background:url(../images/template/left_nav_tile.gif) repeat-y left top;
    padding-left:5px;

}



#left_nav h3{
    margin:0;
    padding:0;
    width:164px;
    height:35px;
    font-weight:bold;
    font-size:12px;
    font-family:Arial, Verdana, Sans serif;
    text-align:left;
    padding-top:1em;
    padding-left:5px;
}


#left_nav ul{
    list-style:none;
    margin:0px;
    padding:0px;
    padding-bottom:1em;
    width:150px;
}



#left_nav ul li{
    background:transparent url(../images/template/left_nav_bullet.gif) no-repeat scroll 0pt 4px;
    font-family:Tahoma,Arial,Sans Serif;
    font-weight:normal;
    margin:0pt 0pt 0.35em 1em;
    padding-bottom:0.4em;
    padding-left:1em;
}

#left_nav ul li a{
    padding-bottom:.1em;
    color:#36D6D6D;
}
#left_nav ul li.nav a{
    padding-bottom:.1em;
    color:#6D6D6D;
    font-weight:normal;
}

#left_nav div.nav_section{    
    padding:0;
    margin:0;
    margin-bottom:1em;
}



#display_promotions_999{
    margin:0px;
    padding:0px;
    text-align:center;
    width:164px;
    margin-top:2em;

}




span.ir{
    display:none;
}
#content #content_area{
    margin:0px;
    padding:0px;
    padding:5px;
    padding-bottom:1em;
    text-align:left;
    display:block;
    width:635px;
}



#content #content_area table{
    text-align:left;
}
#footer{
    margin:0;
    padding:0;
    text-align:center;
    width:819px;
    height:103px;
    position:relative;
    margin:0px auto;
    font-size:.8em;
    color:#000;

    font-family:Arial, Helvetica, sans-serif;
    background:url(../images/template/footer_background.gif) no-repeat left top;
}
* html #footer{
    margin-top:0;

}

#footer_top{
    width:670px;
    color:#A29F9F;
    text-align:center;
    background:none;
    font-size:10px;
    font-weight:normal;
    position:relative;
    padding-top:6px;
    padding-bottom:1em;
    float:right;
}

#footer_top ul{
    list-style:none;
    margin:0px;
    padding:0px;
    text-align:center;
    margin-right:1em;
}

#footer_top ul li{
    text-align:left;
    font-size:1.1em;
    font-weight: bold;
    margin-right:.5em;
    padding-right:1em;
    display:inline;
    border-right:1px solid #C0C0C0;
    
    
}
#footer_top ul li a{
    color:#717171;
    font-weight: normal;
    font-family:Tahoma, Arial, Sans Serif;
    font-size:9px;
    text-transform:uppercase;
    padding-left:1em;
}
#footer_bottom{
    padding:0px;
    margin:0px;
    color:#A29F9F;
    text-align:right;
    background:none;
    font-size:10px;
    font-weight:normal;
    padding-right:9em;
    float:right;
    padding-top:1.5em;
    width:700px;

}



#footer #footer_bottom a{
    color:#818181
}
#footer a{
    color:#A29F9F;
    font-weight:normal;
}

/* #home_page_splash{
    padding:0;
    margin:0 auto;
    width:635px;
    text-align:left;
    font-size:11px;
    line-height:12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    margin-top:1em;
    
}
#home_page_splash #home_page_top{
    width:635px;
    height:258px;
    position:relative;
    background:url(../images/template/home_page_splash.jpg) no-repeat left top;
    margin:0;
    padding:0;
    margin-bottom:1em;
}

.rowcontainer{
    
    float:left;
    width:635px;
}

.home_page_section{
    width:279px;
    height:100px;
    float:left;
    
    
}
#section1{
    background:url(../images/template/ph-01.jpg) top left no-repeat;
}
#section2{
    background:url(../images/template/ph-02.jpg) top left no-repeat;
}


.home_page_section_featured{
    margin-top:1em;
    width:635px;
    height:33px;
    clear:both;
    background:url(../images/template/featured.gif) top left no-repeat;
    
}

.home_page_section p{
    margin-left:9.5em;
}
.home_page_section p a{
    color:#F7941D;
    font-weight:bold;
}
*/


.dropdown_select{
    margin-bottom:1em;
}
.dropdown_select select{
    width:145px;
    margin:0;
    padding:0;
    margin-left:10px;
    font-size:9px;
    border:1px solid #ccc;
    }

/* this is for the rollover_colors_popout link color */
#left_nav .nav_section table td a{
    color:#777777;
}

div#menu0{
    margin-left:1em;
}

#left_nav table.milonictable tr td a{
    color:#333;
}

#display_menu_1 div.subnav {cursor:pointer; background-color:#fff;}
#display_menu_1 div.subnav table.milonictable tr td{ padding:5px;}

User is offlineProfile CardPM
+Quote Post

no2pencil
RE: CSS Background Wont Work
24 Oct, 2007 - 02:31 PM
Post #2

My fridge be runnin OH NOEZ!
Group Icon

Joined: 10 May, 2007
Posts: 7,166



Thanked: 78 times
Dream Kudos: 2425
Expert In: Goofing Off

My Contributions
QUOTE(Soon2bWebDS @ 24 Oct, 2007 - 03:26 PM) *

CODE
/* CSS Document */
/* Header */

#header{
    width:819px;
    height:193px;
    padding:0;
    margin:0px auto;    
    position:relative;
    text-align:left;
    background:url(../images/template/header_bg.jpg) no-repeat left top;
}


How is header referenced in the html?
Are the read permissions on ../images/template/header_bg.jpg correct?
I ask because you reference beyond the current dir.
Try:
CODE

#header {
    background-image: url(../images/template/header_bg.jpg);
    background-repeat: no-repeat;
}

User is offlineProfile CardPM
+Quote Post

Soon2bWebDS
RE: CSS Background Wont Work
24 Oct, 2007 - 02:43 PM
Post #3

New D.I.C Head
*

Joined: 17 Oct, 2007
Posts: 7


My Contributions
i think its referenced in line 48 but i have the entire code down there so you can see everything

CODE
<!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>
<!--
DYNAMIC PAGE-SPECIFIC META TAGS WILL BE PLACED HERE
DO NOT ADD YOUR OWN META TAGS, ONLY PUT CSS/JAVSCRIPT INCLUDES IN YOUR HEAD TAG
-->
<link href="vspfiles/templates/107/css/Imports.css" rel="stylesheet" type="text/css">
</head>
<body id="body"  onload="">
<!-- V-107 -->
<div id="header">
<body background="/v/vspfiles/assets/images/background.jpg">
    <h1 id="display_homepage_title" class="colors_homepage_title"><img src="/clear1x1.gif" style="height: 26px; width: 350px;" border="0" /></h1>
    <div id="phone_number">
         Call Us Toll-Free: 1-888-XXX-XXXX
    </div>
      <div id="top_nav">
        <ul>
            <li><a href="/">Home</a></li>
            <li ><a href="/shoppingcart.asp">View Cart</a></li>    
            <li ><a href="/myaccount.asp">My Account</a></li>
            <li ><a href="/myaccount.asp">Help</a></li>
        </ul>
  </div>                    
                        <div id="display_search_box">
                            <form action="/SearchResults.asp" method="get" name="SearchBoxForm">
                                <table cellspacing="0" cellpadding="0" border="0" width="100%" >
                                <tr>
                                  <td valign="top" ><label></label>
                                  <input type="text" maxlength="20" value="" name="Search"/>
                                   <img src="vspfiles/templates/107/images/Template/btn_go.gif" border="0" style="cursor: pointer;" onclick="document.forms['SearchBoxForm'].submit();"/></td>
                                  </tr>
                                </table>
                            </form>
                
  </div>
</div>

<div id="content">
    <table border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td valign="top" id="left_nav">
        

                    <div id="first_nav" class="nav_section">
                        <h3 Style="color:Menu1_Title_TextColor;<../images/template/header_bg.gif">;">Menu1_Title</h3>
                            <div id="display_menu_1">Display_Menu 1</div>            
                    </div>


                    <div id="second_nav" class="nav_section">
                        <h3 Style="color: Menu2_Title_TextColor;<../images/template/header_bg.gif">;">Menu2_Title</h3>
                            <div id="display_menu_2">Display_Menu 2</div>
                    </div>

                    
                    
                    
                    
                    
                    
                    
                    <div id="display_promotions_999">Display_Promotions</div>
                
                    

                
            </td>
                
            <td id="content_area" valign="top" > </td>
        </tr>
    </table>

</div>

<script language="JavaScript1.2">
<!--
var bookmarkurl=window.location.href.substr(0, window.location.href.indexOf('/', 8) + 1) + '';
if (document.title) { var bookmarktitle=document.title; }
else { var bookmarktitle="";}
var bookmarktext="Bookmark Us"
if (navigator.appName == "Netscape") {
bookmarktext="Bookmark Us (CTRL+D)";
}
else if (navigator.appName == "Opera") {
bookmarktext="Bookmark Us (CTRL+T)";
}
function addbookmark()
{
if (window.sidebar) {
window.sidebar.addPanel(bookmarktitle, bookmarkurl, "");
}
else if (window.external) {
window.external.AddFavorite(bookmarkurl, bookmarktitle);
}
}
//-->
</script>

<div id="footer">
    <div id="footer_top">
        <ul>
            <li><a href="Config_FullStoreURL/aboutus.asp"  > Company Info</a></li>
            <li><a href="Config_FullStoreURL/articles.asp?ID=7"  > Advertising</a></li>
            <li><a href="Config_FullStoreURL/pindex.asp"  > Product Index</a></li>
            <li><a href="Config_FullStoreURL/cindex.asp"  > Category Index</a></li>
            <li><a href="Config_FullStoreURL/help.asp"  > Help</a></li>
            <li class="last"><a href="Config_FullStoreURL/terms.asp"  > Terms of Use</a></li>
        </ul>
    </div>
    <div id="footer_bottom">
        <a href="Config_FullStoreURL/terms.asp"  >Copyright © 2007 Config_CompanyNameLegal. All Rights Reserved.</a>
    
                
                
                
                
                
    
<!--                
   & nbsp;===========================================================================
================
        VOLUSION LINK - BEGIN
   & nbsp;===========================================================================
================
        Customer has agreed per Volusion’s Terms of Service (http://www.volusion.com/agreement_monthtomonth.asp)
        to maintain a text hyperlink to "http://www.volusion.com" in the footer of the website. The link must be standard html, contain no javascript, and be approved by Volusion. Removing this link breaches the Volusion agreement.
    -->
        <br/>Shopping Cart Powered by <a href="http://www.volusion.com" title="Shopping Cart Software"   target="_blank">Volusion</a>.

    <!--
   & nbsp;===========================================================================
================
        VOLUSION LINK - END
   & nbsp;===========================================================================
================
    -->
    </div>        
                
</div>

</body>
</html>

User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/9/09 04:02AM

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month