back to top
shopping basket

View your basket

Stretched Canvas Print

What our customers are saying:

We have been very satisfied with the quality of the images and with the prompt and efficient service provided.

Read more...

Creating a Frame Around am Image

Creating a Frame Around an Image

PiciScan Web Design Blog RSS Feed

Posted on: Thursday, 16 April 2015

Something quite simple this week, but that does add a nice effect to an image on a webpage. And, again, you need not look very far for an example of this effect. At the base of the page, there is a preview of the latest post on both of our blogs. The picture shown there has a little white frame around and a grey border. But how is this achieved? It's all in the CSS.

.framed-pic  {
width: 50%;
max-width: 180px;
height: auto;
padding: 7px;
border: 1px solid #AFAFAF;
background-color: white;
margin: 0 22px 12px 0;
float: left;
}

The part of the CSS that deals with the size of the image, namely:

width: 50%;
max-width: 180px;
height: auto;

helps the image to stay reponsive.

To create the frame:

padding: 7px;
border: 1px solid #AFAFAF;
background-color: white;

Here, the padding creates space around the image (which you could set as percentages to help keep it responsive) and the background colour fills in this padded space to give the illusion of a white frame. The grey border can be set to whatever colour you prefer, as can the background colour. You could even add as the background, but, I wouldn't recommend it as this would create another round trip for the browser, slowing down load times. If you did want to create a more fancy frame, editing it in your chosen photo editing software first would be the better option.

You could also do that to create the frame I've discussed above, but, this has the advantage that the CSS is being served anyway and the image that needs to be fetched is that little bit smaller. And, anything you can do to save the load on a mobile browser is a help.

Mark founded PiciScan in 2010, and sold it in October 2015 to Web By Numbers Ltd, who now employ him! He likes Star Wars, playing escape games and looking after his bonsai tree.

comments powered by Disqus

The Latest From our Scanning Blog

Christmas 2015

Christmas 2015

Posted: 14 December 2015

It’s nearly the time of year to be going up into the loft and bringing down all the Christmas decorations, locating the tree and seeing if those lights from last year still work, or if you need to buy any more...

Read more

The Latest From our Web Design Blog

Box Sizing: Border-Box

Box Sizing: Border-Box

Posted: 24 March 2016

I first came across box-sizing: border-box when it cropped up in a temporary colleague's CSS. I found it pretty annoying when I picked up work that he'd started as it seemed to get in the way. This was because, as I said in a previous post on margin ...

Read more