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 How to Make a Website Adding Pages to a Website Add Iconography

Farnoosh M
Farnoosh M
10,921 Points
Posted by Farnoosh M
Farnoosh M
10,921 Points

background-size not working

Hi I'm trying to get the background-size change but I can't get it to work. Instead of resizing the image it's just leaving it at 100%. Would appreciate some suggestions.

Leonardo Hernandez
Leonardo Hernandez
13,798 Points

Check ou this link for some background-size documentation. https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

3 Answers

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Farnoosh,

You've run into one of the tricky little problems with the background shorthand property. Even though background-size is NOT part of the background shorthand property, if you do use the shorthand property AFTER setting the background-size the web browser defaults the background-size property back to its default setting.

Here's a note from the Mozilla Developer Network on this subject:

> Note: If the value of this property is not set in a background shorthand property that is applied to the element after the background-size CSS property, the value of this property is then reset to its initial value by the shorthand property.

You can read more about the background size property at: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

To fix this, put your more general selector -- ul.contact-info a -- AFTER the three other links selectors that set the background. Or, alternatively, replace the background property with the background-image and background-repeat properties in those 3 styles.

Farnoosh M
Farnoosh M
10,921 Points
Farnoosh M
Farnoosh M
10,921 Points

Thanks for the documentation Leonardo. I've tried the exact same thing like:

a {background-size:20px 20px;}

but it doesn't work. The background image stays exactly the same size. This is what I have been trying to do:

<!-- HTML:

<h3>Contact Details</h3> <ul class="contact-info"> <li class="home"><a href="http://www.website.com">Home Page</a></li> <li class="mail"><a href="mailto:me@something.com">me@something.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=me">@mytwitter</a></li> </ul>

-->

/* CSS */

ul.contact-info { list-style:none;

}

ul.contact-info a{ text-decoration:none; color:black; font-weight:bold; font-style:italic; display:block; min-height:20px; background-size:20px 20px; padding:0 0 0 30px; margin:10px 0;

}

ul.contact-info li.home a { background: url ('http://jtkyourhonestshop.com/images/HouseBlack.png') no-repeat ;

}

ul.contact-info li.mail a { background: url ('http://www.designityourselftv.com/wp-content/uploads/2013/04/080766-glossy-black-icon-business-envelope1.png') no-repeat ;

}

ul.contact-info li.twitter a { background: url ('http://www.withoutspaceandlight.com/Resources/img/icon-twitter.png')no-repeat ;

}

Farnoosh M
Farnoosh M
10,921 Points
Farnoosh M
Farnoosh M
10,921 Points

Thanks a million Dave :)