/    Sign up×
Community /Pin to ProfileBookmark

Automatic Picture Frame

Copy linkTweet thisAlerts:
May 22.2010

Hey all
I always had this idea to use CSS some how, to wrap selected image into a Picture / Painting frame like this one:
[url]http://www.shutterstock.com/pic-1806883/stock-photo-copper-antique-painting-frame-isolated-on-white-background.html[/url]

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 6×6 table that will scale well but whats next?

Hope some one can help me out!

TNX

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@skullsnestMay 22.2010 — turn the frame into a png and use it this way:

<i>
</i>
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;try&lt;/title&gt;
&lt;style type="text/css"&gt;

img {background: url(images/frame.png);
width: 263px;
height: 200px;
padding: 65px 75px;
}

&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;img src="images/yourImage.jpg" /&gt;&lt;br /&gt;
&lt;img src="images/yourImage.jpg" /&gt;

&lt;/body&gt;
&lt;/html&gt;


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.
Copy linkTweet thisAlerts:
@alexusauthorMay 22.2010 — 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!
Copy linkTweet thisAlerts:
@skullsnestMay 22.2010 — Not a problem.
×

Success!

Help @alexus spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...