Custom Background Frame for Images


Maybe someone can help me understand how does sites like this did to present the portfolio images:

I mean the images are inside a sort of browser mockup and many websites are doing the same to present templates and webdesign work.

I’m quite good in CSS and html but I need to understand:

1/ Why do they present the images inside the browser using CSS and not creating all the images on photoshop with the frame browser as it looks more simple?

2/ I find their solution more elegant with separate custom frame from image in CSS. But how to achieve this in WordPress?

Do they use a custom frame for each image via shortcodes? Or only CSS? I’m curious to learn and share some tutorials links are welcome here.

I strangely haven’t found a lot of resources on the web about how to create a custom frame background in wordpress.

See also this site is using the same approach:

Fantastic webdesign results!!