www.webdeveloper.com
Results 1 to 4 of 4

Thread: Automatic Picture Frame

  1. #1
    Join Date
    Jan 2005
    Posts
    361

    Automatic Picture Frame

    Hey all
    I always had this idea to use CSS some how, to wrap selected image into a Picture / Painting frame like this one:
    http://www.shutterstock.com/pic-1806...ackground.html


    Unfortunately I have no idea how to do this.
    My fisrt problem is how to do this in CSS
    and second problem is how to make the thing to be dynamic to all images. Well perhaps i can see a pattern and create a 6x6 table that will scale well but whats next?

    Hope some one can help me out!

    TNX

  2. #2
    Join Date
    Dec 2009
    Posts
    24
    turn the frame into a png and use it this way:

    Code:
    <html>
    <head>
    <title>try</title>
    <style type="text/css">
    
    img {background: url(images/frame.png);
    	width: 263px;
    	height: 200px;
    	padding: 65px 75px;
    }
    
    </style>
    
    </head>
    <body>
    
    <img src="images/yourImage.jpg" /><br />
    <img src="images/yourImage.jpg" />
    
    </body>
    </html>
    I used the frame that you linked to for this, but did not purchase it, as it was for testing purposes only. but it does work. Hope it works for you. I'm going to go delete this frame now.

  3. #3
    Join Date
    Jan 2005
    Posts
    361
    thank you!
    it worked.. although ot only works if my photo has the size of the inner window of the frame. Well I guess I just have to prepare omages to use this to have nice cosmetic affect

    Thank you!

  4. #4
    Join Date
    Dec 2009
    Posts
    24
    Not a problem.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles