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 Build a Simple Website Styling Content Writing CSS

Janire Santibáñez
Janire Santibáñez
6,736 Points

I cannot set my button background

Hello!

I am following the instructions required in my style.css but when I add the following code nothing happens, I cannot see the background color in "Browse Our Cupcakes" so I cannot keep on working in my website :-(

Please find the code below:

.btn { color: #FAF3BC; background: #4FB69F url('/Users/janire/Desktop/Programacion/css/css/imgcss/texture.jpg') no-repeat right top; padding:15px 30px; margin: 40px 0px; border-radius: 25px; text-transform: uppercase; }

.btn:hover { background-color: #4CC4A7; }

Anyone could help me? Thanks in advance.

4 Answers

Jacob Miller
Jacob Miller
12,466 Points

Couple things: If you are using the texture file Treehouse provides, it should be a .png, not a .jpg. If you are using a jpg texture, jpg's don't support transparency, so you won't be able to see your background color underneath it.

Secondly, make sure your url is relative to your main html file. When linking to an image or file, start your url from the directory that your html file is in. Most people have a folder with all their html files in it, then inside that folder they have an "img" folder for images, "css" folder for css files, etc. So it that's the case, your url should look like url("img/texture.png"). Starting from the location of the html file, ask yourself where you have to go from there to get to your img, and that's how you should write your url.

Blayne Holland
Blayne Holland
19,321 Points

It may be the path your passing to the image. Starting with / means your starting form the document root where ever that might be.

I would just create a new folder for your images and use a relative path for the CSS code ie. background: url(IMG/myphoto);

Patrick Donahue
Patrick Donahue
9,523 Points

in .btn try background-color or background-image

Janire Santibáñez
Janire Santibáñez
6,736 Points

Thanks everyone!

The problem was the path that I was using... I am new in the platform and sometimes I get lost but step by step I am getting used to it...

Love this community :-)