将网络摄像头变成拉伸/缩放背景图像

Question

connecting javascript to css div.

I've given some javascript that drives a webcam some new functions such as a delay and to only display when its uploaded successfully for an art project.

However I can no longer (for some stupid reason) connect it to my css without overriding the changes that i've made. So that my simple web cam can be a background image that stretches to size on the page.

(please see below)

I'd love to have the webcam background image be dynamically scaling but I don't think thats not possible in this context.

i'm sure you folks are more informed

EDIT: SORRY I WAS NOT CLEAR ENOUGH. So i want to have the webcam javascript seen below to be as a background image on my page. i'm trying to make the webcam jpg turn into a background image. How ever i don't know how to connect the two with out over riding the changes i made.

so if the javascript could be connected to the css example below which should turn it into a stretching background image.

• it won't let me make the webcam connect to the css example shown. I can't understand how to get the css to all function.**

i hope that clears what i'm asking for.

something to do with the reference to the element by its ID?

EDIT: END

 <script type="text/javascript">
$(document).ready(function(){

function reloadBackground() {
        var d = new Date().getTime();
        d -= 15; // delay
    url = "http://www.panopticbedroom.com/templates/live.jpg?" + d;
        var img = new Image();

        img.onload = function(){
              $('#divBackground ').html('').append($(this));
        }


        img.src = url;
}

setInterval(reloadBackground, 1000);

function getDocHeight() {
    var doc = document;
    return Math.max(
        Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),
        Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),
        Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
    );
}

});
</script>

and here is the relevant css:

#divBackground {
background-image: url(http://www.panopticbedroom.com/templates/live.jpg)
position: absolute;
}

img#imgBackground {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

I would really appreciate any advice!

all the best,

louis

Answer 1

Use This Css Code to your img container

background-attachment:fixed;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='source of image',sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='source of image', sizingMethod='scale')"