Simplifying CSS Code with displaying multiple BK Grnd Images?

**slickwilly789** · 03-02-2008, 12:49 AM

Hey guys,

I'm having some trouble simplifying my css code. I have multiple image headers on my webpage. I've set the header images as background images included in a layout div... but everytime i want to change the background for a certain page I have to multiple the same code in my css... and rename the background image varible... to what i need...

I tried this...

PHP Code:


			
.header {
    width: 100%;
    height: 315px;
    float: left;
    background: #141C19;
    background-color: #333333;
    background-position: top center;
    background-repeat: repeat-x;
    background-repeat:repeat-y;}
    
#image1 .header {background-image:url(../images/backgrounds/newspaper.jpg)no-repeat;}
#image2 .header {background-image:url(../images/backgrounds/newspaper.jpg)no-repeat;}
#image3 .header {background-image:url(../images/backgrounds/newspaper.jpg)no-repeat;}

I then call the code up like this in the html..

<div class="header" name="newspaper" align="center">

not workings.. not experienced enough to do this yet...

**chrishirst** · 05:25 AM

Reverse your use of ID's and classes.

HTML Code:

#header {
    width: 100%;
    height: 315px;
    background: #141C19;
    background-color: #333333;
    background-position: top center;
    background-repeat: no-repeat;
}
    
#header.img1 { 
    background-image:url(../images/backgrounds/newspaper.jpg);
}
#header.img2 {
     background-image:url(../images/backgrounds/newspaper.jpg);
}
#header.img3  {
     background-image:url(../images/backgrounds/newspaper.jpg);
}

HTML Code:

<div id="header" class="img1"></div>

with the above code you only need to change the class name for different pages.

why the deprecated align=center ? it will have no effect on a 100% wide element

floating 100% wide elements should not be done as it is a little pointless and could have undesirable effects in some layouts on certain browsers.

You cannot apply repeat-x & repeat-y to the same element. ONLY the later defined rule will be in force, so in your case only repeat-y will be in effect.
The no-repeat in the image rules would not be applied, as the multiple values definition only applies to the shorthand background definition.

eg

Code:

#image1 .header {
    background:url(../images/backgrounds/newspaper.jpg) no-repeat; 
}

**slickwilly789** · 03-02-2008, 11:46 PM

Thanks for the quick reply. It works perfectly in Firefox, but not in IE6

Code:

#header {
    width: 100%;
    height: 315px;
    padding-top: -10px;
    background: #141C19;
    background-color: #333333;
    background-position: top center;
    background-repeat: no-repeat;}

#header.img1 {background-image:url(../images/backgrounds/enviro.jpg);}
#header.img2 {background-image:url(../images/backgrounds/contact.jpg);}
#header.img3 {background-image:url(../images/backgrounds/newspaper.jpg);}
#header.img4 {background-image:url(../images/backgrounds/synergy.jpg);}
#header.img5 {background-image:url(../images/backgrounds/books.jpg);}
#header.img6 {background-image:url(../images/backgrounds/resources.jpg);}
#header.img7 {background-image:url(../images/backgrounds/ink.jpg);}
#header.img8 {background-image:url(../images/backgrounds/swatch.jpg);}
#header.img9 {background-image:url(../images/backgrounds/lines.jpg);}

The only one that works (shows in IE) is

Code:

#header.img1 {background-image:url(../images/backgrounds/enviro.jpg);}

If I change the other pictures to hold the class "img1" they show up. I believe IE is having problems with the numbering of the classes greater than 1... is there anyway around this?

**chrishirst** · 03-03-2008, 02:43 AM

first off get rid of the ../ in the URIs and use root relative addressing.

the ../ means "one folder above the current" so may be correct for some documents but not for others.

Quote:

I believe IE is having problems with the numbering of the classes greater than 1

Test that theory by renaming the classes from 2 onwards without using numbers.

**slickwilly789** · 03-03-2008, 12:26 PM

Quote:

Originally Posted by chrishirst

first off get rid of the ../ in the URIs and use root relative addressing.

the ../ means "one folder above the current" so may be correct for some documents but not for others.

The addressing works. I have the html pages sitting in their own folder as well as the images... so ../ gets the images. Everything works perfectly in Firefox, all the images display correctly.

Quote:

Test that theory by renaming the classes from 2 onwards without using numbers.

Tried it still nothing. I did try this. I moved one of the background codes above all others... so that it would be listed first... and the image displayed... so...

Code:

#header.img2 {background-image:url(../images/backgrounds/contact.jpg);}
#header.img1 {background-image:url(../images/backgrounds/enviro.jpg);}
etccc.
etc..
etc..

the Contact.jpg works when its listed first... but if I switch the enviro with the contact (reverse them) the enviro will work.... but not the contact image... this only has an effect in IE... not safari or FireFox...

**LadynRed** · 03-03-2008, 02:18 PM

The order should make zero difference since you're only using one image per page.
We need to see ALL the code, clearly there is something else going on.

**slickwilly789** · 03:04 PM

The main css file in its entirety

Code:

#Wrapper {
    position: relative;
    margin: 0 auto;
    margin-bottom: 15px;
    background-color: #fff;
    padding: 10px;
    width: 800px;
    }
#footermain {
    width:800px;
    height: 100px;
    position:relative;
    margin-top: 30px;
    float:left;
    background:url(../images/misc/footer.jpg);
    }
    

/*---Header Image Code---*/

 #header {
    width: 100%;
    height: 315px;
    background: #141C19;
    background-color: #333333;
    background-position: top center;
    background-repeat: no-repeat;}

#header.img1 {background-image:url(../images/backgrounds/enviro.jpg);}
#header.img2 {background-image:url(../images/backgrounds/contact.jpg);}
#header.img3 {background-image:url(../images/backgrounds/newspaper.jpg);}
#header.img4 {background-image:url(../images/backgrounds/synergy.jpg);}
#header.img5 {background-image:url(../images/backgrounds/books.jpg);}
#header.img6 {background-image:url(../images/backgrounds/resources.jpg);}
#header.img7 {background-image:url(../images/backgrounds/ink.jpg);}
#header.img8 {background-image:url(../images/backgrounds/swatch.jpg);}
#header.img9 {background-image:url(../images/backgrounds/lines.jpg);} 


#indexTop {
    width: 100%;
    height: 315px;
    float: left;
    background: #141C19;
    background-color: #333333;
    background-image:url(../images/background.jpg)no-repeat;
    background-position: top center;
    background-repeat: repeat-x;
    background-repeat:repeat-y;
    }

    
    #topConstraint {
        width: 800px;
        margin: 0 auto;
        padding-bottom: 10px;
        margin-top: 0px;
        overflow: hidden;
        }

#pagecontact {
    float: right;
    width: 365px;
    height: 75px;
    margin-top:25px;
    display:block;
    background:url(../images/contact.png)no-repeat;
    _background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/contact.png');
    background-position:top right;}

#logo2 {
    float: left;
    height:175px;
    width:400px;
    margin: 0px 0px 0px -20px;
    display:block;
    background:url(../images/Kirby_Web.png);
    _background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/Kirby_Web.png');}

        

    


#BtmMenu {
    margin:0 auto;
    position:relative;
    font-size: 10px;
    text-transform: uppercase;
    border-top: 1px solid #999;
    height: 50px;
    width:800px;}
        
    
/*Misc. Classes*/    

.cleaner {
    clear:both;
    height:1px;
    font-size:1px;
    border:none;
    margin:0; padding:0;
    background:transparent;}
    


/*Side Menu*/

#bottom {
    width: 100%;
    float: left;
    margin: 0 auto;
    }
        
        #bottomConstraint {
            width: 800px;
            padding-bottom: 20px;
            margin: 0 auto;
            }

#interiorContent {
                width: 800px;
                padding: 20px 0px 20px 0px;
                margin: 0 auto;
                }
                
                #leftColumn {
                    width: 230px;
                    float: left;
                    }
                    
                    .navigationWrapper {
                        width: 230px;
                        float: left;
                        margin-bottom: 20px;
                        border-right: 1px solid #DFE3E1;
                        }
                        
                    .navigationTitle {
                        width: 220px;
                        float: left;
                        padding: 5px;
                        }
                        
                        .navigationSubItem {
                            width: 220px;
                            float: left;
                            border-top: 1px solid #DFE3E1;
                            padding: 5px;
                            }
                            
                            .navigationChild {
                                width: 210px;
                                float: left;
                                padding: 0px 0px 5px 10px;
                                }
                                
                                .navigationChildItem {
                                    width: 210px;
                                    float: left;
                                    padding-bottom: 2px;
                                    }
                        
                                .statusSuccess {
                                    width: 480px;
                                    text-align: left;
                                    background: #BAFFAC;
                                    border: 1px solid #006600;
                                    font: 12px arial;
                                    color: #006600;
                                    padding: 10px 10px 10px 25px;
                                    margin: 10px 0 0 0;
                                }
                                
                                .statusNormal {
                                    width: 480px;
                                    text-align: left;
                                    background: #FFFAC9;
                                    border: 1px solid #331006;
                                    font: 12px arial;
                                    color: #331006;
                                    padding: 10px 10px 10px 25px;
                                    margin: 10px 0 0 0;
                                }
                                
                                .statusError {
                                    width: 480px;
                                    text-align: left;
                                    background: #FF9497;
                                    border: 1px solid #990000;
                                    font: 12px arial;
                                    color: #990000;
                                    padding: 10px 10px 10px 25px;
                                    margin: 10px 0 0 0;
                                }
                
                #rightColumn {
                    width: 490px;
                    float: left;
                    padding: 0px 0px 0px 40px;
                    }
                #rightColumn2 {
                    width: 490px;
                    float: left;
                    padding: 0px 0px 0px 40px;
                    }
                #plainColumn {
                    width: 780px;
                    float: left;
                    padding: 0px 0px 0px 0px;
                    margin: 0 auto;
                    
                    }
                
                    #rightColumn a, #rightColumn a:hover, #rightColumn a:visited,  #rightColumn a:hover {
                        margin-left: 0px; background: url(../images/ico_view_all.jpg) no-repeat left center; padding-left: 20px; font-size: 12px; font-weight: bold; color: #ED6613;
                        text-decoration: none;
                    }
                        #plainColumn a, #plainColumn a:hover, #plainColumn a:visited,  #plainColumn a:hover {
                        margin-left: 0px; background: url(../images/ico_view_all.jpg) no-repeat left center; padding-left: 20px; font-size: 12px; font-weight: bold; color: #ED6613; 
                        text-decoration: none;
                    }

                #mainColumn {
                    width: 800px;
                    float: left;
                    padding: 0px 0px 0px 10px;
                    }
                
                    #mainColumn a, #mainColumn a:hover, #mainColumn a:visited,  #mainColumn a:hover {
                        color: #ED6613;
                        text-decoration: none;
                    }
P.subnavItem {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #93A19A;
    margin: 0px;
    padding: 0px;
    }
    
    .subnavItemLink {
        color: #93A19A;
        text-decoration: none;
        display: block;
        }
    
    p.childnavItem {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #93A19A;
        margin: 0px;
        padding: 0px;
        }
        
        .childnavItemLink {
            color: #93A19A;
            text-decoration: none;
            display: block;
            }



/*Lightbox Image Gallery */

#lightbox{
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    line-height: 0;
    }

#lightbox a img{ border: none; }

#outerImageContainer{
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    }

#imageContainer{
    padding: 10px;
    }

#loading{
    position: absolute;
    top: 40%;
    left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
    }
#hoverNav{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #fff;
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100%    
    }

#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }    
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }            
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;    }    
        
#overlay{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
    background-color: #000;
    }

#gallery {
width: 600x;
padding-top: 20px;


}
/* IE 5/6 border erase bug */
* html #gallery {
    width: 100%;
}

/* IE 5 placement bug */
* html #gallery img {
    width: 100%;
}
    

/*------------------------------------------------*/
/*Form Start*/

FORM {
margin: 0px;    
}

.Form {
font-size: 11px;
background-color: #F5F5F5;
border:1px solid #999;
color: #333333;
font-family: Verdana, Arial, Tahoma, Sans-Serif;
}

.FormHeader{
font-family: Verdana, Arial, Tahoma, Sans-Serif;
font-size: 12px;
font-weight: bold;
color: #3b71b1;
}

.FormBody{
font-family: Verdana, Arial, Tahoma, Sans-Serif;
font-size: 11px;
color: #333333;
background-color: #ffffff;
}

.TextBox {
font-size: 11px;
font-family: Verdana, Arial, Tahoma, Sans-Serif;
border: solid 1px #666666;
color: #333333;
}

Option {
font-size: 11px;
color: #333333;
}

Select {
font-size: 11px;
font-family: Verdana, Arial, Tahoma, Sans-Serif;
color: #333333;
}

.Req{
color: #000;
position: relative;
top: 2px;
}

.CheckBox {
font-size: 11px;
font-family: Verdana, Arial, Tahoma, Sans-Serif;
color: #333333;
}



/*Regular Menu CSS*/
/*------------------------------------------------*/


#menubox {

margin: 0 auto;
width: 800px;
}

#menu1, #menu {
position:relative;
    background: #333;
    float: left;
    list-style: none;
    margin: 0 auto;
    margin-top: 95px;
    padding: 2px;
    width: 100%;
    }
    
#menu1, #menu li {
    float: left;
    margin: 0;
    width: 100px;
    padding-right: 6px;
    padding-left: 6px;
}
#menu1, #menu a {
    background: #333 url("http://www.webmaster-talk.com/images/seperator.gif") bottom right no-repeat;
    color: #ccc;
    display: block;
    float: left;
    margin: 0 auto;
    padding: 8px 25px;
    text-decoration: none;
}
#menu1, #menu a:hover {
    background: #2580a2 url("http://www.webmaster-talk.com/images/hover.gif") bottom center no-repeat;
    color: #fff;
    display:block;
    padding-bottom: 8px;}
    
/*Index Page Menu CSS*/
/*------------------------------------------------*/


#menu1 {
    background: #333;
    float: left;
    list-style: none;
    margin: 0 auto;
    margin-top: 10px;
    padding: 5px;
    width: 100%;
    }
    
#menu1 li {
    float: left;
    margin: 0;
    width: 100px;
    padding-right: 14px;
}
#menu1 a {
    background: #333 url("http://www.webmaster-talk.com/images/seperator.gif") bottom right no-repeat;
    color: #ccc;
    display: block;
    float: left;
    margin: 0 auto;
    padding: 8px 25px;
    text-decoration: none;
}
#menu1 a:hover {
    background: #2580a2 url("http://www.webmaster-talk.com/images/hover.gif") bottom center no-repeat;
    color: #fff;
    display:block;
    padding-bottom: 8px;

The HTML

Code:

<body>


    <div id="header" class="img5">
        <div id="topConstraint">
   <a href="../" id="logo2" name="top"></a>
    <div id="pagecontact"></div>
             <div class="cleaner"><span></span></div>
    <div id="menutop">
        <ul id='menu'>

<li><a href="../index.php">Home</a></li>
<li><a href="Aboutus.html">About Us</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="Estimates.html">Estimates</a></li>
<li><a href="Enviro.html">Enviro</a></li>
<li><a href="Resources.html">Resources</a></li>
<li><a href="Contact.html">Contact</a></li>
    </ul>
</div></div></div>

**angele803** · 03-03-2008, 03:09 PM

What happens if you put specific heights on the divs with the background images?

**slickwilly789** · 03-03-2008, 03:33 PM

Quote:

Originally Posted by angele803

What happens if you put specific heights on the divs with the background images?

sorry im still a little new to coding, are you talking about the height: 315px;?

I tried taking that out.. and even using a different value.. no difference...

**LadynRed** · 03-03-2008, 09:21 PM

Ok, after much head-scratching, here's the solution.

Define your #header like this:

Quote:

#header {
/* width: 100%;*/
height: 315px;
background-color: #333333;
background-position: top center;
background-repeat: no-repeat;
}

Then for your classes, you currently have them listed as #header.img1, #header.img2, etc. REMOVE the #header prefix and just leave the classes as
.img1, .img2, .img3 etc.

Once you do that, it will work as you want it to.

**slickwilly789** · 03-03-2008, 09:46 PM

It worked wonderfully! What a problem that was... but hey someone's got to keep you all sharp!