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 trialFarnoosh M
10,921 Pointsbackground-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.
3 Answers
Dave McFarland
Treehouse TeacherFarnoosh,
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
10,921 PointsThanks 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
10,921 PointsThanks a million Dave :)
Leonardo Hernandez
13,798 PointsLeonardo Hernandez
13,798 PointsCheck ou this link for some background-size documentation. https://developer.mozilla.org/en-US/docs/Web/CSS/background-size