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

Jeffrey Hall
Jeffrey Hall
9,065 Points
Posted by Jeffrey Hall
Jeffrey Hall
9,065 Points

CSS Background Image Issue

Hi all,

So I'm trying to build out my first website on my own and am trying to use a specific paper background to put behind my paragraphs. However, I can't seem to figure out how to make the image cover the entire text with the image without making it repeat or appear incomplete.

I'm currently using the following code in the class .news

.news p { background-image: url("img/paper_03.gif"); background-size: contain; background-repeat: no-repeat; }

This leaves the image truncated and only covering up 1/4 of the paragraph.

I've tried background-size: cover to no avail either. Any suggestions would be greatly appreciated!

Thanks,

Jeff

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jeffrey,

What result did you get with background-size: cover;? That should have did it for you.

2 Answers

Jesse Zelaya
Jesse Zelaya
13,599 Points
Jesse Zelaya
Jesse Zelaya
13,599 Points

Perhaps adding the background-clipping property?

background-clipping: content-box;

Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points
Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points

Try making a empty div to contain the background image. Give that div a set desired height, and place the background property inside of it. You can then place your text inside the div and position it as you like.