[supersssweety]

I need the bg img to a wrapper be different on certain pages, is there a way you can write conditional statements in CSS like
pesudo
if url=about.html
then background-image = about.jpg
else if url=solutions.html
then background-image = soultions.jog

and so on?

[no2pencil]

supersssweety, on 9 Oct, 2007 - 08:35 AM, said:

is there a way you can write conditional statements in CSS

No. You can either use server side execution to test a condition & load the correct css, or declare a specific css for each page.

/* css */
about {
  background-image = about.jpg;
}
solutions{
  background-image = solutions.jpg;
}
/* php code */
if($_SERVER['REQUEST_URI']="about.html") { echo "class=about "; }
else  { echo "class=solutions "; }

This post has been edited by no2pencil: 09 October 2007 - 09:09 AM

[supersssweety]

BAH!

[supersssweety]

ok so here is what I did:

#secondary-wrapper{
	background-color:#fff;
	background-position:top;
	background-repeat:no-repeat;
	background-color:#e6e7e9;
	border:1px solid #717073;
	width:1023px;
	margin:0 auto;	
}
#secondary-wrapper.solutions{
 background-image:url(images/solutions-bg.jpg);
}
#secondary-wrapper.company{
 background-image:url(images/company-bg.jpg);
}
#secondary-wrapper.contact{
 background-image:url(images/contact-bg.jpg);
}
#secondary-wrapper.news{
 background-image:url(images/news-bg.jpg);
}
#secondary-wrapper.benefits{
 background-image:url(images/benefits-bg.jpg);
}
#secondary-wrapper.partner{
 background-image:url(images/partner-bg.jpg);
}
#secondary-wrapper.service{
 background-image:url(images/service-bg.jpg);
}

Internet explorer will only show the one that is stated first, in this case, .solutions, that bg shows, but the company one doesn't, they all show in FF. If I switch company and solutions then IE shows the company bg and not the solutions...wtf...here is how the html looks:

<div id="secondary-wrapper" class="solutions">

<div id="secondary-wrapper" class="company">

[supersssweety]

I got it working like this:

#secondary-wrapper{
	background-color:#e6e7e9;
	border:1px solid #717073;
	width:1023px;
	margin:0 auto;	
}
.solutions{
  background-image:url(images/solutions-bg.jpg);
  background-position:top;
  background-repeat:no-repeat;
}
.company{
  background-image:url(images/company-bg.jpg);
  background-position:top;
  background-repeat:no-repeat;
}
.contact{
  background-image:url(images/contact-bg.jpg);
  background-position:top;
  background-repeat:no-repeat;
}
.news{
  background-image:url(images/news-bg.jpg);
  background-position:top;
  background-repeat:no-repeat;
}
.benefits{
  background-image:url(images/benefits-bg.jpg);
  background-position:top;
  background-repeat:no-repeat;
}
.partner{
  background-image:url(images/partner-bg.jpg);
  background-position:top;
  background-repeat:no-repeat;
}
.service{
  background-image:url(images/service-bg.jpg);
  background-position:top;
  background-repeat:no-repeat;
}

With the html as the same ...I hate CSS

no2pencil, on 9 Oct, 2007 - 08:56 AM, said:

supersssweety, on 9 Oct, 2007 - 08:35 AM, said:

is there a way you can write conditional statements in CSS

No. You can either use server side execution to test a condition & load the correct css, or declare a specific css for each page.

/* css */
about {
  background-image = about.jpg;
}
solutions{
  background-image = solutions.jpg;
}
/* php code */
if($_SERVER['REQUEST_URI']="about.html") { echo "class=about "; }
else  { echo "class=solutions "; }

I just noticed your code, its good but it wouldn't work because the pic for company.html goes to all the company sublinks...so that is 4 more pages the company pic will be on...see?