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
- Download the texture tile images you want to use from the library.
- 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.
Page Builders
Note that the same effects can be achieved when using a page builder like Elementor. You can use the builder’s controls to assign a background image for your picture or the container which holds it, and add padding and margins without inserting custom CSS and HTML code.
See your page builder’s documentation for instructions.
Example 1
A vertical border on either side of the image. Border width is a fixed 40px.
After the CSS is defined, the image is given a class of .borderedpicture when it is inserted on the page with HTML, so it will use your styling. The image in the example was given a rough, red background. The CSS calls for a margin on either side of the image to let the background show on the left and right.
CSS
.borderedpicture {
background-color: #7d7d7d;
background-image: url("yourBackgroundImageAddress.png");
width: 100%;
max-width: 100%;
height: auto;
margin: 40px 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
rgba(0, 0, 0, 0.19);
}
HTML
<img class="borderedpicture" src="yourImageAddress" alt=
"readerTextForYourImage">
Example 2
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 desktop monitor. You can experiment to see what you think.
CSS
.borderedpicture2 {
background-color: #7d7d7d;
background-image: url("yourBackgroundImageAddress.png");
width: 100%;
max-width: 100%;
height: auto;
padding: 3% 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
rgba(0, 0, 0, 0.19);
}
HTML
<img class="borderedpicture2" src="yourImageAddress" alt=
"readerTextForYourImage">
Example 3
Just a small tweak to the CSS creates a decorative, textured frame all the way around your picture. This works best when your image is square.
To create a border on all four sides of your pictures, simply change the CSS padding information from
padding: 3% 0;
to
padding: 20px;
Make the frame wider or more narrow by changing the amount of the padding’s width.
CSS
.borderedpicture3 {
background-color: #7d7d7d;
background-image: url("yourBackgroundImageAddress.png");
width: 100%;
max-width: 100%;
height: auto;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
rgba(0, 0, 0, 0.19);
}
HTML
<img class="borderedpicture3" src="yourImageAddress" alt=
"readerTextForYourImage">
Example 4
This variation will create a class of image called “borderedpicture4” and an outside container called “secondborder”.
I think it looks best when the image is displayed in a large size.
CSS
.secondborder {
background-color: #7d7d7d;
background-image: url("https://cyndikirkpatrick.com/wp-content/uploads/2016/06/eos_autumn3a.png");
width:60%;
padding: 1%;
margin: auto;
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);
}
.borderedpicture4 {
background-color: #7d7d7d;
background-image: url("your texture tile address for the inside border");
display: block;
max-height: 75VH;
width: auto;
margin: auto;
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: 0px 0px 60px -9px rgba(0,0,0,1);
}
HTML
<div class="secondborder">
<img class="borderedpicture4" src="yourImageAddress" alt=
"readerTextForYourImage">
</div>