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

General Discussion

Seif Eldein Sayed
Seif Eldein Sayed
3,508 Points
Posted by Seif Eldein Sayed
Seif Eldein Sayed
3,508 Points

CSS design, styling Help

Hello everyone I have two problems, the first is that I need to repeat a pattern as a background for my body tag, but I am considered about the size of loading and also because the pattern is not repeatable or at least I think it isn't. Here

The other thing is I want to change the background picture of a li when this is the correct page so my html is 

 <li class="<?php if ($section == "home"){ echo "on";}?>"><a href="<?php echo BASE_URL?        >index.php">HOME</a></li>

but this over ride the on class

    .navigation ul li{
    display: inline;
    float: left;
    width: 110px;
    padding-top: 22px;
    height: 35px;
    margin-right: 60px;
    background-image: url("../img/nav_off.png");
}


 .on{
    background-image: url("../img/nav_on.png");
}

6 Answers

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

Repeating a background image is as easy as this:

 background: #fff url(/images/background-foo.jpg) center center repeat;

That "repeat" part at the end is what makes it repeat infinitely.

Repeat-x will make it repeat horizontally, repeat-y will make it repeat vertically, and no-repeat will make it appear only once.

For your list item, You could also just use;

      li:hover {  background-image: url("../img/nav_on.png"); }
Seif Eldein Sayed
Seif Eldein Sayed
3,508 Points
Seif Eldein Sayed
Seif Eldein Sayed
3,508 Points

Thanks for replying, I did what you suggested concerning the background but it doesn't look as I want, plus I feel that loading this big image is not good. Here

Concerning the navigation list, yes I do that. But I want to add another feature which is if we are in home page it is on by default without the need to hover on it, so I send a variable containing which li item to be on but for some reason I can't override the behavior of the li

Thanks for your feedback.

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

How are you building this site? Straight HTML? PHP? WordPress? Drupal?

There may be a simple way to override the li on the homepage. If there is already a specific "home" class on the body, then target the li using that as an additional selector.

Seif Eldein Sayed
Seif Eldein Sayed
3,508 Points
Seif Eldein Sayed
Seif Eldein Sayed
3,508 Points

I'm using php I've already written the code in the first comment.

Seif Eldein Sayed
Seif Eldein Sayed
3,508 Points
Seif Eldein Sayed
Seif Eldein Sayed
3,508 Points

Bumping this because I will be away for two days.

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

If There is a specific CSS class on the homepage, target that, then the specific li on that page.