Photo Frame Background Image

Photo Frame with Background Image on Frame

Clouds in Los Altos.

In the examples on this page, a background image (see below) is added to the styling to give the frame more interest. To keep the background image from repeating vertically, repeat-x is added to the background-image property so that it repeats across the x-axis only. Background positioning is used to vertically align the image at the bottom of the picture container.

Notice how giving different color values and widths to sides of the borders can add depth.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis felis. Sed pulvinar diam et nulla. Praesent mauris risus, lacinia in, consequat et, adipiscing ut, leo. Morbi neque ante, pharetra et, pulvinar ac, facilisis a, augue. Donec sagittis tortor eget libero fermentum dignissim. Quisque et lorem. Fusce et ipsum. Nullam vel sapien nec pede luctus fermentum. Ut feugiat, leo non mattis gravida, felis dui mollis nunc, non auctor diam nisi interdum nisl. Sed a tortor in erat porta laoreet. Donec tempus accumsan lorem. Proin turpis risus, accumsan eu, tempor at, pellentesque a, risus. Sed aliquet. Curabitur a est. Sed in enim. Quisque hendrerit enim sed tortor. Mauris vulputate imperdiet ipsum. Nam laoreet mauris sed risus. Vivamus felis. Donec viverra. Nullam vitae arcu. Mauris at mauris. Praesent elit eros, accumsan a, vehicula et, eleifend quis, mi. Morbi magna neque, luctus vitae, interdum quis, ultricies et, nisi. Curabitur malesuada ullamcorper diam. Nam tempus, dui ut elementum vestibulum, urna justo blandit elit, et viverra nulla ipsum at libero. In turpis tortor, semper vitae, fermentum vitae, eleifend semper, erat. Vivamus quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum mattis, justo vel auctor placerat, mi nisl viverra dui, sed tempor ante diam vel libero. Etiam metus leo, condimentum sed, tempor ut, tincidunt ac, ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla aliquet eleifend tortor. Nulla metus. Mauris tristique sem sed elit. Ut non lectus pretium lorem varius facilisis.

Background image:

Rules Used for the Image Above

div.imagecaption {
  float: right;
  width: 206px;


  margin: 0 1em 1em 1em;
  padding: 15px 15px 20px 15px ;


  text-align: center;
  border-color: #ccc #2f4f4f #2f4f4f #ccc;
  border-width: 1px 5px 5px 1px;
  border-style: solid ;
  background: url(chapter11c.gif) repeat-x 0 100%;

^{3, 4}


  }
 
div.imagecaption img {
  border-color: #000 #ccc #ccc #000;
  border-width: 3px;
  border-style: solid;
  }

-----
¹width = image width plus space for the image border

²Pad more at bottom to make room for the graphic to show.

³Set the image to repeat across the x axis.

⁴Align to vertical bottom; 100% places bottom of image at bottom of padding area.

Photo Frame with another Background Image on Frame

Here's another interesting approach which combines the image and frame with another background image to add even more interest. This is the background image:

background image

Clouds in Los Altos.

Styles Used

div.imagecaption3 {
  float: right;
  width: 202px;
  margin: 0 1em 1em 1em;
  padding: 10px 10px 70px 10px;


  background: #036 url(chapter11.gif) repeat-x 0 100%;

^{2, 3}


  font-style: italic;
  font-variant: small-caps;
  font-size: .76em ;
  color: #fff;
  text-align: center;
  }
 
div.imagecaption3 img { 
  border: 1px solid #fff; 
  }

-----
¹Add more bottom padding if using a larger image.

²repeat-x keeps the image from repeating vertically.

³To vertically align image, use 0 100%. To horizontally align image, use 100% 0.

Resources

Floatutorial : Max Design's Tutorials on Floating Elements for Layout