I have this code in the .js file that allows me to stream an image:
//Image streamaing!
function onMessage2(evt) {
$("#image").attr('src', 'data:image/jpg;base64,'+evt.data);
}
I then display it in a rectangle in html like so:
<div class="row" style="margin-left:0px; margin-right:0px">
<img id="image" src="">
<canvas id="canvas"></canvas>
</div>
The problem I have is that I need the stream to be displayed in the background of the canvas, so I can catch mouse/touch input for some other work I need.
I've tried switching the order (canvas first then image) but then all I get is a big blank screen.
Give the parent relative position and absolute position for the childs then canvas will overlay the img
:
.row{position: relative;}
.row img, .row canvas{position:absolute; top:0; left:0;}
<div class="row" style="margin-left:0px; margin-right:0px">
<img id="image" src="">
<canvas id="canvas"></canvas>
</div>
I would put the img inside the canvas. Set the width and height to 100% so it takes up all the space in the canvas and then set it's position to fixed and it's z-index to -1 so it stays out of the flow and is in the background. Here's the css code:
#image {
position:fixed;
z-index:-1;
width:100%;
height:100%;
}
And don't forget to put the img in the canvas.
What about making it as background image using css
<div id="main">
$("#main").css("background- image", "url(url of image)");
Sorry for formatting i'm writing from my mobile but you might get idea
Hi I a creating a button using three divs and all divs have background images. This is how it looks like.
Button Demo
The button is fine but how can i resize it ?? I am doing like
.btncontainer{
position:absolute;
top:120px;
left:120px; cursor:pointer;
display:inline-block;
width:120px;
height:20px;
}
But it is changing the button design. What can i do to resize it dynamically with the text?
i want to look like this if the size is changed for example this image has different sizes.
So when i changing the .btncontainer then it should change the width and height of the elements inside it but this is not happening
As you precised in an upper comment; In this special case, you have to use images for left and right divs. I suggest you to set a proper height to them, in the html code.
This is not the best practise, but will do the work regarding your needs.
Please see the following example.
Please note you will have to change the #backgrounddiv height and line-height to match.
See fiddle here
CSS
.btncontainer{
position:absolute;
top:180px;
left:10px; cursor:pointer;
display:inline-block;
}
#leftdiv{
float:left;
}
#backgrounddiv{
background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x;
float:left;
height:40px;
padding:10px;
line-height:40px;
}
#rightdiv{
float:left;
}
HTML
<div class="btncontainer" id="button">
<a href="#">
<div id='leftdiv'>
<img src="http://i.share.pho.to/ff6cc4e3_o.png" height="70px" />
</div>
<div id='backgrounddiv'>CLick Me </div>
<div id='rightdiv'>
<img src="http://i.share.pho.to/245be416_o.png" />
</div>
</div>
I've set a thumbnail to have a max-width and max-height and need to set up some kind of onmouseover setup to where when they hover over the image, it shows them a bigger image.
I cannot use links to do this.
Any ideas?
html
<img src="imageurl" class="s3_right" style="max-width: 400px;">
I tried using the code below; however, it messes up because I have a max-width/max-height.
html
<img src="image url" class="s3_right" onmouseover='Big(this);' onmouseout='Small(this);' style="max-width: 400px;">
javascript
<script language=javascript>
<!--
function Big(me)
{
me.width *= 2;
me.height *= 2;
}
function Small(me)
{
me.width /= 2;
me.height /= 2;
}
-->
</script>
There is also the problem that maybe x2 will be larger than the actual image. I don't need the code to expand the image larger than the actual image is. So I would really just need the code to set a new max-width and max-height or popup the image off the page with a max-width and max-height (like, not actually change the layout because the image thumbnails are displaying with text wrapped around them.)
Is it a possibility to just spoof an absolute positioned duplicate, along with the thumbnail, nested inside a wrapping div assigned a relative position?
<style type="text/css">
.meDiv
{
position:relative;
border:1px solid black;
width:200px;
height:100px;
}
.meSmall
{
display:block;
width:100%;
height:100%;
}
.meBig
{
z-index:10;
position:absolute;
left:0px;
top:0px;
display:none;
width:800px;
height:350px;
}
</style>
<div class="meDiv">
<img class="meSmall" src="imageURL" onmouseover="Big();" />
<img id="bigOne" class="meBig" src="imageURL" onclick="Small();" onmouseout="Small();" />
</div>
<script language="javascript">
function Big() {
document.getElementById('bigOne').style.display = "block";
}
function Small() {
document.getElementById('bigOne').style.display = "none";
}
</script>
Obviously the code given won't directly plug into your scenario or win any awards, but it's just to give an idea of the concept.
Using this you could apply whatever size restrictions you want to the wrapping div and/or thumbnail (bugs with max-width/max-height permitting) without affecting the large image or dislodging any wrapped text. You could also use the characteristics of the thumbnail to determine traits of the large image if you need to by employing a bit of JavaScript black voodoo magic (I'm a jQuery fan myself).
I am applying some images in html code as background image of a div. The image dimensions can change as per user's requirement and images can be of any shape (for example a cloud or a callout or a balloon ). All the applied images are transparent.
Now I want to apply colors to these shapes. If I write background-color to the div / span tag it covers the entire div and I cannot use canvas because image dimensions change.
Is there any way to do it?
Code:
<div style="background-color:blue;height:400px; width:400px;background-size: 100% 100%;background-repeat: no-repeat; background-image: url('cloud7.png'); position:absolute; top:10px; left:10px; height:400px; width:400px;" />
</div>
You can use masks for this. Unfortunately, they're currently only supported in Webkit browsers.
<div style="background-color:blue;height:400px; width:400px; background-size:100% 100%;background-repeat: no-repeat; -webkit-mask: url('cloud7.png'); position:absolute; top:10px; left:10px; height:400px; width:400px;" />
</div>
I want to achieve this kind of layout with pure CSS:
The gradient in the background is 100% the width of the browser window. The inner text is inside a 1000px div, centered inside the browser window. Now I want the text to define the height of the gradient. And here is the problem: The gradient is positioned absolute (left: 0px; width: 100%), but the text is inside another div.
I've tried some things with display:table; and display:table-cell; but once I put the gradient div to position:absolute it doesn't inherit the height of the text div.
Anyone a solution how to achieve this in pure CSS without javascript?
EDIT:
I'm sorry I forgot to mention that the gradient isn't the problem (I' using css3). And furthermore I also forgot to add the code: http://jsfiddle.net/kxu8N/1/
Absolutely-positioned elements are not part of the layout flow, therefore they cannot inherit dimensional information from parent elements.
You should be using a CSS background image (or a CSS3 gradient) on the element wrapping your text to give you the gradient instead of using a separate element.
You can use the css3 background-size property to scale the height of the gradient. Set the height to auto on a div with the gradient as its background.
Here's an answer without knowing your HTML structure: http://jsfiddle.net/8xagQ/1/
.gradient{
background: -webkit-linear-gradient(left, rgba(0,119,255,0) 0%,rgba(0,119,255,1) 25%,rgba(0,119,255,1) 50%,rgba(0,119,255,1) 75%,rgba(0,119,255,0) 100%);
margin:10px 0;
text-align:center;
color:#fff;
padding:10px 0;
}
Note that I only included the gradient instructions for webkit.
<html>
<head>
<style type="text/css">
p,span{
margin-left:20px;
}
#logo{
font-weight: bold;
height:100px;
}
#slogan{
width:100%;
height:150px;
background: -webkit-linear-gradient(left, rgba(0,119,255,0) 0%,rgba(0,200,230,15) 25%,rgba(0,200,230,15) 50%,rgba(0,200,230,15) 75%,rgba(0,119,255,0) 100%);}
</style>
</head>
<body>
<div id="logo">
<p>Logo</p>
</div>
<div id="slogan">
<span>some text that defines hieght of this</span>
</div>
</body>
</html>
In my Case I move your blue into your gradient. that way, once you add more line, line of text it will increate automaticaly
<div id="container">
<div id="outer">
<div id="blue-background">
<div class="span3" id="blue">
Here is my content<br>
and this content should define the height of the underlying #blue-background <br />
and if we are adding more and more and more
</div>
</div>
</div>
</div>
Then to the text into it I change few setting in the CSS
#blue {
z-index: 1;
position:relative;
margin:auto;
text-align:center;
}
Because I didn't find any solution, I hacked it. Cause my content gets added dynamically through javascript, I added the content two times. The first time visible inside the overlaying div (over the blue background), and the second time inside the blue background. With visibility: hidden I hide all the divs inside the blue background.
And because both divs got the same content, they get the same height. Not beautiful, but it works.