CodingForums.com - How did they do this? ( live web cam feed as background for website

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - How did they do this? ( live web cam feed as background for website (http://www.codingforums.com/showthread.php?t=275074)

How did they do this? ( live web cam feed as background for website

http://www.rachelcomey.com/

changed their background to be a live kitten feed. This is just such a cool friggin idea, I was wondering if anyone understood how they did this?

It is done with some very detailed CSS and an embedded url that points to a base base64 string. There is some scripting going on around it as well. Cool? Not sure about that. It is very distracting, and I know my users would complain about it.

Here is the CSS for what appears to be the applicable code:

Code:

/* CMS Home Page */

/*body.cms-home { background:url(../images/homepage/rc_fpo_still.jpeg) center center fixed no-repeat; background-size:cover; -moz-background-size: cover; -webkit-background-size: cover;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/homepage/rc_fpo_still.jpeg', sizingMethod='scale');

        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/homepage/rc_fpo_still.jpeg', sizingMethod='scale')";

 }*/

.cms-home .subtitle {}

.cms-index-index .subtitle {}

.video-bg { background:#000; }

.video-bg #flash-loader { background:url(../images/loader-white.gif) 0 0 no-repeat; display:block; height:16px; left:20px; position:fixed; top:20px; width:16px; z-index:99999; }

.video-bg #flashcontent { height:100%; left:0; position:fixed; top:0; width:100%; z-index:-1; opacity:0; filter:alpha(opacity=0); }

.video-bg .header-menu *,

.video-bg .nav-container *,

.video-bg .header-container .welcome-msg *,

.video-bg .header-container .account-links,

.video-bg .header-container .account-links *,

.video-bg .header .links *,

.video-bg .header .block-subscribe,

.video-bg .header .block-subscribe *,

.video-bg #search_mini_form *,

.video-bg .header .welcome-msg,

.video-bg .header .login-link *,

.video-bg .footer-container * { border-color:#fff !important; color: #fff !important; }

.video-bg .header .topcart-wrap, .video-bg .header .topcart-wrap .block-cart { border-color:#fff; }

.video-bg .header .topcart-wrap > a { color:#fff; }

.video-bg .header-container .gradient {

        padding-top:0 !important;

        top:-100%;

        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICAgIDxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNyIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);

        background: -moz-linear-gradient(top,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 25%, rgba(0,0,0,0) 100%); /* FF3.6+ */

        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.7)), color-stop(25%,rgba(0,0,0,0.7)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */

        background: -webkit-linear-gradient(top,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 25%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */

        background: -o-linear-gradient(top,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 25%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */

        background: -ms-linear-gradient(top,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 25%,rgba(0,0,0,0) 100%); /* IE10+ */

        background: linear-gradient(top,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 25%,rgba(0,0,0,0) 100%); /* W3C */

}

.video-bg #nav li.show > a,

.video-bg .header-menu ul.level1 > li.over > a,

.video-bg .quick-access #news-subscribe.show { background-image:url(../images/nav-close-white.png); }

.video-bg .header .welcome-msg a { background-image:url(../images/arrow-down-white.png); }

.video-bg .header-container .form-search button.button > span { background-image:url(../images/search-white.png); }

Hi there lmorales,

it is not very difficult to achieve, ;)

Here is a working example...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<base href="http://www.rachelcomey.com/skin/frontend/default/comey/swf/homepage/">



<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="language" content="english"> 

<meta http-equiv="Content-Style-Type" content="text/css">



<title>test page</title>



<style type="text/css">

html,body {

    height:100%;

    margin:0;

    overflow:hidden;

 }

#background  { 

    height:100%;

    position:relative;

 }

#background  object {

    display:block;

    width:100%;

    height:780px;

 }

#page {

    position:absolute;

    z-index:1;

    width:100%;

    height:100%;

    top:0;

 }

#content {

    width:950px;

    height:460px;

    padding:20px 25px;

    border:1px solid #000;

    margin: 40px auto;

    color:#fff;

    background-color:rgba(0,0,0,0.4);

    overflow:auto;

 }

</style>



</head>

<body>



<div id="background">



<object data="WT01_SimplestPlayer.swf" type="application/x-shockwave-flash">

 <param name="movie" value="WT01_SimplestPlayer.swf">

 <param name="quality" value="high">

 <param name="wmode" value="transparent">

</object>



<div id="page">



<div id="content">

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 

ultricies sollicitudin nisi, ut molestie felis adipiscing sit 

amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 

faucibus felis. Vivamus at metus eget eros consequat fringilla. 

Quisque magna magna, laoreet eu tempus sit amet, fringilla at 

tellus. Praesent felis tortor, scelerisque vitae fringilla 

non, porttitor et lacus. Ut ut sapien nec quam tincidunt 

consectetur in nec lacus.

</p><p>

Phasellus porta, dui a elementum egestas, odio sapien rhoncus 

lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 

ac quam pellentesque lacinia quis sit amet augue. Fusce eu 

euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 

et mauris scelerisque tristique. Donec fringilla mauris dolor, 

sit amet vulputate lacus. Nulla feugiat mattis nulla non 

tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 

nisi eget neque tempus facilisis eu quis sapien.

</p><p>

Ut et metus a massa rhoncus cursus. Integer luctus luctus enim, 

tristique rhoncus enim feugiat eu. Etiam porttitor volutpat 

massa sed congue. Sed eros nisl, volutpat ac dapibus quis, 

ultricies id diam. Mauris at elit eget quam ullamcorper sagittis 

ac vel lorem. Ut nec justo libero. Phasellus eget pharetra elit. 

Proin viverra, neque non eleifend vehicula, nulla augue gravida 

felis, non fermentum lorem odio ac nunc. Aliquam pretium 

scelerisque consectetur. Proin ultrices urna non magna interdum 

a sodales turpis suscipit. Mauris sollicitudin nisl ac arcu 

sodales cursus. Maecenas bibendum neque vitae orci mollis ac 

vulputate ante auctor. Sed sodales odio id ante sagittis 

faucibus.

</p><p>

Curabitur gravida, neque id volutpat tincidunt, justo eros 

interdum dui, nec mattis eros nunc a ipsum. Aenean in orci id 

turpis luctus interdum nec ut est. Nunc lacinia sagittis nibh 

vitae bibendum. Cras malesuada, felis vitae egestas aliquet, 

mauris diam vehicula quam, eget scelerisque felis nulla id 

tellus. Curabitur non laoreet dolor. Vestibulum sodales 

hendrerit elit vitae eleifend. Praesent faucibus mauris sed erat 

accumsan ac cursus lacus molestie. Donec a nisi a risus malesuada 

molestie nec at odio. Maecenas eleifend tincidunt lacus nec 

vulputate. Vestibulum eleifend pulvinar sem, sit amet auctor eros 

pellentesque quis. Sed et nulla non eros auctor malesuada. 

Vestibulum erat arcu, hendrerit vel cursus nec, sagittis vitae 

sapien. Nulla facilisi. Sed nec molestie mauris. Donec non dui 

urna.

</p>

</div><!-- end #content" -->



</div><!-- end #page" -->



</div><!-- end #background" -->



</body>

</html>

coothead

Quote:

Originally Posted by COBOLdinosaur (Post 1276019)

Cool? Not sure about that. It is very distracting, and I know my users would complain about it.

I think if it were done the right way, it could be a pretty cool idea. If you were, for instance, a resort with a live feed of the beachfront, it could be downright idyllic.