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!
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
maayan malka
2,454 Pointsslick one-pagers: how to place images in the back
hi all!
how do you build a website that has a main image on the back that can scale to all screens, and has the text in front. here are some examples:
http://crated.com/landing http://mylakemap.lt/?lang=en
Thanks!
3 Answers
John Steer-Fowler
Courses Plus Student 11,734 PointsHi maayan malka,
Like Chandan rightly said, you can set this as a background image using css. You can also use css to set the image to 100% width so that it is responsive depending on the screen size.
maayan malka
2,454 Pointstried image in background in the CSS: background-image:url(..); but it get's fixed to the background when I scroll down the page..
John Steer-Fowler
Courses Plus Student 11,734 PointsYou can set a background image for a specific div and not just for the whole page. Then you can size the div to how you want.
Remember to set it to no-repeat so that it does not repeat the background image
background-repeat: no-repeat;
maayan malka
2,454 Pointsok got it! thanks!
John Steer-Fowler
Courses Plus Student 11,734 PointsYour welcome. Try it out, and remember if any answers help you, to upvote them and select a best answer when your question is solved.
Keep up the good work
Chandan K. Sah
Courses Plus Student 12,665 PointsChandan K. Sah
Courses Plus Student 12,665 PointsTry to use the image as a background, you will be able to add content above that image. Hope this work for you.