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 Diego Murray
Diego Murray
2,515 Points

Help with CSS

  1. How can I fix my background image? It looks great at 900px in width but any larger and it zooms in on the top portion of the background image. (other options i've tried stretched the image too much.)

  2. How can I fix the blue "Team" and "Contact" title in the navbar?

Here's my work: https://w.trhou.se/rwnf8v1q4j

2 Answers

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Could you explain a bit more exactly what you want to achieve with the links?

The blue color is standard for an unvisited link. What I think you see those 2 blue because you didn't click on it.

I checked your code and I can either suggest you set the color for the link in your "a: link {}" declaration to what you want to change it to.

With the "a:visited" you set the color the link changes to when it is been clicked on.

My experience with visited links: when you use Chrome and you click the link that leads to another page that doesn't exist the color is not to the one you specify with "a:visited". Safari is playing nice with this event. Others I didn't try.

If you clear your browser cache all links will change to blue (except the "HOME", because you set "active" color to gray) then this should be an example you can learn from.

So I suggest you change the "a:link" declaration to the color you want and this should help you get the blue color to go on a vacation :)

About the pics: the pic is stretching 'cos it's a jpg. It has it's sharpness till the size expands - over expands the resolution it's in.

The best way is to have your pics in png format. It plays a bit better with stretching. Export your original pic for the web ("Save for the Web") in the menu if your using Adobe Photoshop. And make sure you tweak it as much as possible -> make sure the size isn't to big ( bigger size, makes the pic to load longer and can lead to page lagging).

Hope I could help.

Pete Cass
Pete Cass
16,656 Points
Pete Cass
Pete Cass
16,656 Points

In response to your questions :

  1. Photo BG : You can use the background position property to position your BG image exactly where you want it.
.element_your_targeting {
 background-position: center;
}

this would position your image in the center of the containing element. You can use keyword values like left, right, bottom ,top. Or percentage or pixel values.

You may find you'll need to change this value with media queries to make sure your image is always excatly where you want it.

Check out MDN for some more info.

  1. As for links. the blue colour is the default colour for any <a> element. Target the all anchor tags and set the colour you want.
a {
   color: #fff  /* also known as white */
}