Search code examples
htmlcssphotoshoppsd

Custom Shaped Photoshop Slices to HTML

I am trying to create a html page that shows a profile picture behind a heart frame, I Have got the PSD with the heart frame.

The profile picture is going to be rectangle shaped and should fit in behind the frame without overlapping it, If i'm to create slices it'll be rectangular and the picture won't fit into the frame correctly, Modifying the profile picture such as cropping it to fit into the frame will not be a solution as the actual pictures that are going to be shown there will be based on user uploads, and a normal rectangular picture.

Is there a way the slice tool could be used to create a slice of the heart (the white space in between the frame) , so that i could use the background of that slice as the profile picture? Because all I am getting are rectangular slices at the moment.

Thanks.

enter image description here

Solution

  • You can do that by changing the heart frame picture using Photoshop, so the inside of the heart should be transparent and the outside is white

    Than you can use CSS to set tow backgrounds for the element that holds the profile picture, the first background is the heart picture, the second is the profile photo.

    see this link to learn how to use multiple backgrounds http://www.css3.info/preview/multiple-backgrounds/