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

Design

Lee Cockcroft
Lee Cockcroft
5,147 Points
Posted by Lee Cockcroft
Lee Cockcroft
5,147 Points

css background image

Hi All,

Wondering if anyone can help me.

Ive studied css for quite a while now, and currently learning bootstrap. ! thing i really want to do but haven't difficulties.IS a background image, which is faded out and text on top.

For example this website https://www.jxt.com.au/ uses a image in the background with text on top but the image really is in the background.

Any ideas?

2 Answers

Boonsuen Oh
Boonsuen Oh
18,788 Points
Boonsuen Oh
Boonsuen Oh
18,788 Points

Those can be achieved by utilising CSS gradient, which you can use to add gradients on the top of your background image. More information please read the CSS Tricks' article.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

There's nothing special about that background.

The image itself is just dimmed and faded. Click Here to see the image itself. The CSS to display it would be:

header {
    background: url(https://www.jxt.com.au/themes/jxt-2016/img/banner/home/Action-Guide-Banner.jpg) no-repeat center top;
}