Picture Frames and Borders Using CSS and HTML
Texture Tiles As Backgrounds For Photos
You can add a very simple border to the top and bottom of your images or you can create an elaborate layered frame.
Your photo portfolio page can be jet black, stark white, or embellished with background colors and textures that present your photos in a lush setting.
The surroundings shouldn’t overwhelm your photos but well-suited color and texture can enhance their impact.
This requires some knowledge of CSS and HTML but if you are comfortable cut-and-pasting code into your pages, then filling in some blanks to suit yourself, your web presentation can become as unique as you are.
General Instructions
- Copy the texture tile images you want to use from the library, and save them to your computer.
- From there, upload the texture tile graphics to your web site.
- Add CSS code that defines how those textures will be used.
- Add some HTML to a page or a template to see the new styling appear.
Top and Bottom Border, Picture Will Change Size To Fit Its Container
As written, the CSS code will create a slender border at the top and bottom of your pictures. You can customize the width by changing the padding percentage in your CSS code.
Because the picture’s width is 100% of the available area, its size will automatically change to suit the device your visitor is using.
I think this particular style works best when your page is broken into two columns or more on a computer, so the picture isn’t forced to stretch across an entire monitor. You can experiment to see what you think.
1) Cut-and-paste this into your CSS code.
It will create a class of image called “borderedpicture.”
background-color: #7d7d7d;
background-image: url(texture tile graphic’s address);
display: block;
width: 100%;
max-width: 100%;
height: auto;
size: cover;
padding: 3% 0 3% 0;
margin: 1% 0 1% 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
2) Cut-and-paste this into your HTML code where you want a bordered picture to appear.
Any picture tagged with this class will have the border you defined in the CSS code. Fill in the picture address and alt text just as you normally would.
<img class="borderedpicture" src="putyourpicturesaddresshere" alt="putyourpicturesalttexthere" />
Frame – Border On All Four Sides, Picture Will Change Size To Fit Its Container
Just a small tweak to the CSS creates a decorative, textured frame all the way around your picture.
To create a border on all four sides of your pictures, simply change the CSS padding information from “padding: 3% 0 3% 0” to:
padding: 3%;
Make the frame wider or more narrow by changing the percentage value of the padding’s width.
Frame – Two-layer Frame, Rounded Corners, Picture Will Change Size To Fit Its Container
This frame uses a handful of CSS definitions. Just as before, you can tweak its look by changing the values in the CSS. You’ll need to choose, copy, and upload two coordinating texture tiles for this one.
1) Cut-and-paste this into your CSS code.
It will create a class of image called “borderedpicture” and an outside container called “secondborder”.
background-color: #7d7d7d;
background-image: url(your texture tile address for the outside border);
display: block;
padding: 4%;
margin: 1% 0 1% 0;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px 7px 7px 7px;
border: 1px solid #000;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img.borderedpicture {
background-color: #7d7d7d;
background-image: url(your texture tile address for the inside border);
display: block;
width: 100%;
max-width: 100%;
height: auto;
size: cover;
padding: 2%;
margin: 0;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px 7px 7px 7px;
border: 1px solid #61201e;
box-shadow: -webkit-box-shadow: 0px 0px 60px -9px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 60px -9px rgba(0,0,0,1);
box-shadow: 0px 0px 60px -9px rgba(0,0,0,1);
}
2) Cut-and-paste this into your HTML code where you want a framed picture to appear.
Any picture tagged with this class will have the border you defined in the CSS code. Fill in the picture address and alt text just as you normally would.
<div class="secondborder">
<img class="borderedpicture" src="putyourpicturesaddresshere" alt="putyourpicturesalttexthere" />
</div>