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

HTML Build a Simple Website Styling Content Writing CSS

Eliot Murton
Eliot Murton
7,315 Points
Posted by Eliot Murton
Eliot Murton
7,315 Points

Adding texture to button?

Hi. I am following one of the tracks for how to create a website. I am following the instructions to make a button and to add texture to it using a saved image. When I do not add texture I have a button without texture (as expected). When I add texture the button is gone completely and it is simply an anchored comment that remains.

Without texture but successful in creating a button:

'''

.btn { color: #FAF3BC; background-color: #4FB69F; }

'''

Full code as advised in video but no button to speak of:

'''

.btn { color: #FAF3BC; background-color: #4FB69F url('img/texture.png') no-repeat right top; }

'''

What am I doing wrong?

4 Answers

Andreas cormack
.a{fill-rule:evenodd;}techdegree seal-36
Andreas cormack
Python Web Development Techdegree Graduate 33,011 Points

Hi Eliot

I think you code is wrong.Instead of having background on its own you have got background-color see below. it should be

html .btn { color: #FAF3BC; background: #4FB69F url('css/img/texture.png') no-repeat right top; }

Jason Montoya
Jason Montoya
6,550 Points
Jason Montoya
Jason Montoya
6,550 Points

Eliot,

Although background-color is a true CSS property, this property won't work for this task because it does not allow a background image to be plugged in like you need.

Like Andreas noted above, the standalone background property would be the better bet because plugging in the url for this property is allowed.

Something such as:

.btn { color: #FAF3BC; background: #4FB69F url('img/texture.png') no-repeat right top; }

Hope this helps.

Eduardo Mejía
Eduardo Mejía
36,816 Points
Eduardo Mejía
Eduardo Mejía
36,816 Points

Jason an Andreas are right. With the background property, you can take this: background-color: #4FB69F; background-image: url('img/texture.png'); background-position: right top; background-repeat: no-repeat;

And change it to this: background: #4FB69F url('img/texture.png') no-repeat right top;

You can't do this: background-color: #4FB69F url('img/texture.png') no-repeat right top;

I'm not an English speaker, así que espero te ayude. :)

Eliot Murton
Eliot Murton
7,315 Points
Eliot Murton
Eliot Murton
7,315 Points

Thanks guys. Got it working now.