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

HTML

Posted by Piers FC
Piers FC
10,402 Points

I am creating a website for a mobile app and I want to have a screenshot of the app going into the header like Instagram

Any suggestions on how I could do this?

I am creating a very basic site and this is the only element of complexity and I may have to leave it out but I would really like to add it.

Ben Singer
Ben Singer
8,621 Points

If you want to take a screenshot of the app, it depends on the device, and assuming I understand your question correctly:

For iOS and Android: Hold the home button and power buttons down at the same time.

For Samsung devices: Swipe across the screen with the edge of your palm.

1 Answer

Julius Dockwarder
Julius Dockwarder
15,041 Points
Julius Dockwarder
Julius Dockwarder
15,041 Points 
<header>
  <h1>My awesome App!</h1>
</header>

I would declare a banner how you described like this and style it as follows. I'm using a header-element because I think it'll be unique on the particular site.

header {
  width: 100%;
  height: 20vh;
  background-image: url("LINK_TO_IMAGE");
  background-position: center;
  background-size: cover;
}

I hope I didn't get you wrong and it'll look like you want it.

~J