Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

loading different images for each page using sass

l got 8 html files to build and each has a different background-image. Wondered if it was possible to do this with sass? l was thinking of writing a mixin to do this but there sass don't seem to have a switch statement for me to use(or does it?). So suppose there should be a better way for me to achieve thing of having different background for each page,any ideas how l can do this please?

Just to let you guys know l an using foundation 5 ,sass and compass as a plugin

Guil Hernandez Hampton Catlin Dale Sande

2 Answers

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

I think the simplest way would be to give each page a body class, which would control the background image in the CSS. It really isn't a Sass thing, although you could use Sass to help you build the CSS.

For example, contact.html might have this body class 

<body class="contact-page">

and about us might have

<body class="about-page">

and so on.

And in your CSS, you might have

.contact-page {
  background-image: url(path/to/this/image.jpg);
}
.about-page {
  background-image: url(path/to/this/image/as-well.jpg);
}

And just continue this pattern for however many you need.

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Kelvin Atawura,

I think Kevin Korte's suggestion is on point. You could also maybe namespace your classes and define them in a nested rule to keep things organized. Anything more than that would be overcomplicating things. :)

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

Guil Hernandez only problem l have is l would be putting it all into wordpress after completion, the body bit gets tricky then as l would have to pack my php code with if statements. Also can you please help me with this other question here