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 trialLee Cockcroft
5,147 Pointscss 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
18,788 PointsThose 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
231,198 PointsThere'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;
}