I have a jsfiddle animation that I want to set to use as a background div of a png image. I can set the height and width of the animation and I tried setting it to the div using
document.getElementByID('progress').appendChild(canvas);
However, instead of the canvas displaying where it should it shows up under the image with the functioning animation. Here is the jsFiddle.
The canvas will be placed underneath the #progressbar because the default css of this element is. position:static;.
When applying position:absolute; on the canvas it will be place on top of the #progressbar.
To be more precise:
#progress{
position: relative;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
Depending on the exact placement in the z-dimension, you can use z-index:-1; or z-index:1;. By doing this the canvas will be in front or behind the #progressbar.
Example code: http://jsfiddle.net/u4cLxjrg/1/
http://jsfiddle.net/3qc2p1va/
I added some CSS styles to the canvas element, made it absolute and positioned relatively to its parent.
canvas {
display: inline;
position: absolute;
top: 20px;
left: 0;
right: 0;
margin: 0 auto;
z-index: -1;
}
Apply this css. Z-index will put the canvas under others div.
#progress {
position: relative;
}
canvas {
top: 0;
left: 0;
z-index: -1;
position: absolute;
}
Related
I'm making a game using React.js, and the player element is a simple image with sprite images implemented in CSS:
.player {
position: absolute;
height: 32px;
width: 32px;
object-fit: none;
transform-origin: 50% 50%;
transform: scale(calc(var(--factor) / 2)) rotate(0.02deg);
image-rendering: pixelated;
}
How would I add the translate() function to make the player's top left corner exactly at (0, 0)?
If you want to be all the way at the top, no matter what else is on the page, position it absolute. This ignores everything up to the next highest positioned element That means it has a position other than the default. You can do that like this.
position: absolute;
top: 0;
left: 0;
/// You might need to adjust for your transform here though
oops... just saw that you already had it absolute. You were 90% of the way there.
For this .player needs a wrapped element with position: relative, and we don't need transform-origin or transform styles:
.parentOfPlayer {
position: relative;
}
.player {
position: absolute;
top: 0;
left: 0;
}
video {
width: 100%;
z-index: 1;
position: fixed;
}
I try this one it's working fine but it's fixed in the whole body...
You should set your selector for example:
#headerid video {
width: 100%;
z-index: 1;
position: fixed;
}
It will fix the video in the headerid element. It could be div but you must fix the width and height of the div.
I have the following code http://jsfiddle.net/Leytgm3L/22/ and as you can see here on first "section" I have the video background. Now, when user scrolls the webpage down, so far the whole video goes up. I would like to achieve the effect that the webpage overlaps it, so the video and its section is fixed to the page. I have the following CSS code:
.video-container2 {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
.video-container2 video {
position: absolute;
z-index: -1;
width: 100%;
}
and I tried to add:
position: fixed
instead of absolute, but it didn't do the trick...
How can I do that?
position: fixed will do the trick, but you need to set the top/left/bottom/right with 0 instead of 0%:
.video-container2 {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
With bottom and right set, you don't need height and width anymore.
jsfiddle: http://jsfiddle.net/Leytgm3L/23/
In the comments, we talked about centering the video, even with oversize, and having it fill the viewport no matter the size of the screen. The only way to properly achieve that was with JavaScript. Using jQuery:
$(document).ready(function() {
setVideoSize();
});
$(window).resize(function() {
setVideoSize();
});
function setVideoSize() {
// ratio of video in pixels, width/height
var videoRatio = 320 / 176;
// ratio of window in pixels, width/height
var screenRatio = $(window).width() / $(window).height();
if (videoRatio < screenRatio) {
$('.video-container2 video').width($(window).width());
$('.video-container2 video').height('auto');
} else {
$('.video-container2 video').height($(window).height());
$('.video-container2 video').width('auto');
}
}
And to center it, we can use this sort of hacky CSS:
.video-container2 video {
position: absolute;
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
}
jsfiddle: http://jsfiddle.net/Leytgm3L/28/
Change your top/left values to 0 instead of 0%.
.video-container2{
position: fixed;
top: 0;
left: 0;
http://jsfiddle.net/Leytgm3L/25/
I have an image that I want to center in the middle of a div, the div can grow and shrink according to the size of the window, the image can also differ in size and should never be larger than the surrounding div.
I have managed to do this by using the following HTML:
<div class="imgspace">
<img src="/variable.jpeg">
</div>
CSS:
.imgspace {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.imgspace img {
position: absolute;
margin: auto;
max-width: 100%;
max-height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Now I want to implement a simple set of controls for the image. They should be layed out in three divs surrounding the image on the left, bottom and right side. The divs should grow and shrink with the image as it changes, both considering viewport size changes as well as actual image size.
Is this possible to achieve using only CSS or do I have to involve javascript?
Here's the starting point jsfiddle. I have intentionally left out the three surrounding divs since the placement in the DOM does not matter for me.
I think you need to reserve some space for left, right and bottom elements.
In my example, I am reserving 10% for the #left and #right elements, leaving the img with a width 80%. Also, reserved 10% height for the #bottom element.
Hopefully this is what you are looking for: http://jsfiddle.net/6q4Ls/2/
Drag the separators to see how the elements react.
Another solution using elements outside your container, that seems simpler:
http://jsfiddle.net/6q4Ls/5/
Edit
Using fixed size http://jsfiddle.net/6q4Ls/9/
This might not work in all browsers, as I am using the calc() function.
div.imgspace img {
position: absolute;
margin: auto;
max-width: calc(100% - 200px);
max-height: calc(100% - 100px);
top: 0; right: 100px; bottom: 100px; left: 100px;
}
How to center a div across all browsers and behind this div there should be a transparent background layer covering entire screen of browser like lightbox.
If you give the div a fixed width, it's easy to use negative margins:
div {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin-top: -200px;
margin-left: -300px;
z-index: 20;
}
Without a fixed height, you cannot center the div vertically without JavaScript. With a dynamic height, you can vertically center the div using a snippet like this (in jQuery):
$(function() {
var mydiv = $('div');
mydiv.css({
top: $(window).scrollTop() + $(window).height() / 2 - mydiv.height() / 2
});
});
As for the transparent overlay, just give it an absolute position and a full width and height:
div#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 10;
}
If you can ditch IE6 support, you can simply use position: fixed instead of absolute, that way the divs will be centered even if the user scrolls the page, and even when JavaScript is turned off.