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 Sketch Basics Build a Mobile Interface Layer Styling

Posted by Brooklyn Sanden
Brooklyn Sanden
118 Points

How do I insert a background on a layer in Sketch?

In the Second Video, titled "Layer Styling" I am having problems selecting an image, and applying it to a layer as a background image.

The video demonstrates this action from 0:00 to 00:34 seconds in. In the video the instructor clicks 'Window' on the top-toolbar, and then goes down to the dropdown option 'Background'. Here he has an image, and he inserts it in his project as the background image to his rectangle layer.

When I try to do it on my local machine, and click 'Window' on the top toolbar, there is no Background option. I can go to 'Insert' on the top toolbar, and click 'Image' from the dropdown. Then select my image. It creates a new Layer, but does not apply it as a background image like it does in the video.

Please see this image to understand what I am seeing: https://s31.postimg.org/aekrlfxaz/Screen_Shot_2016_07_01_at_2_52_02_PM.png

How do I apply the background image 'ocean' layer as a background image for the layer 'Rectangle'?

Thanks

2 Answers

Martine Bongard
Martine Bongard
1,278 Points
Martine Bongard
Martine Bongard
1,278 Points

Hi Brooklyn!

  1. Simply make sure that the image is on top of the rectangle you want it as a background image for, select both the layers, and click "Mask" from the toolbar. Within this option, you can easily adjust the image position within the rectangle.
  2. Select or create the rectangle you would like to function as your background. From the right sidebar menu, choose "Fill", then "Pattern Fill" (the flower like symbol), and finally "Choose image". The image of your selection will thus fit your rectangle according to your sub-options in this menu.

Hope this was helpful, if you haven't already worked it out by yourself :)

Adam Kahan
Adam Kahan
391 Points
Adam Kahan
Adam Kahan
391 Points

thanks Martine, only thing is, this is not how he shows it in the video...