Develop Reference

CSS-HTML: Put an image above another one with html and css

I'm very newbie to webdev, but I need to draft a landingpage with some trick effects.
I need to put a "stencil image" (png with transp) over a moving (mouse hover) background.
Basically, I managed to do that, but I having a big issue: If I resize browser, the background shows behind first plane image, (because I can't rezise background to browser size).
So, the main codes are:
html code:
<div id="bkg-image" class="blur"></div>
<div>
<img src="./imgs/stencil.png" class="firstPlane" />
</div>
CSS code:
#bkg-image {
background: url('./imgs/background.jpg') no-repeat center center fixed;
position: absolute;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 75%;
height: 75%;
z-index: 0;
-webkit-filter: brightness(1.7);
}
.firstPlane {
display: block;
position: absolute;
top: 0px;
left: 0px;
max-width: 100%;
height: auto;
width: auto;
z-index: 2;
}
JS code:
$(document).ready(function() {
var movementStrength = 75;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$(".firstPlane").mousemove(function(e) {
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = width * pageX * -1;
var newvalueY = height * pageY * -1;
$('#bkg-image').css("background-position", newvalueX + "px " + newvalueY + "px");
});
});
Any idea how to crop the excess background or how to rescale it to fit behind firstplane image?
note: blur class is just for an animated blur effect, not relevant to this.
I took the java script from a net tutorial.
My first aproach was using webkit mask-image, but seens it don't works, now I'm trying this method.
Thanks a lot for any help

You are doing it upside down. This is how it should be.
$(document).ready(function() {
$("#bkg-image").mousemove(function(e) {
$('.firstPlane').css({left: e.pageX + "px", top: e.pageY + "px"});
});
});

I need invert the selection: I need read the mouse position on first plane and apply movement to the bkg image. (your script only works if I switch #bkg-image and .firstPlane). My issue isn't read the movement, but crop bkg-image to not show it bellow 1st plane when I have a small and tall browser window.
The solution would be a mask/clip image, but its not working for svg graphics or PNG for me, so I give up and tried with a big black PNG with transp on it to show background.
Something like this: (https://codepen.io/caraujo/pen/rVOZKJ) but with a logo (vector or png), but mask/image clip is not working for me :/

How to create canvas that scales well with browser window resize

I can't seem to get my canvas to be perfectly responsive.
Using 100% or 100vmax for height and width makes it responsive but it looses clarity.
The center of the canvas seems to be at the bottom of the page as if the canvas stretches beyond the screen
canvas when width is set to 100% or 100vmax
Canvas when width is set through javaScript NOT RESPONSIVE

You'll need to know the aspect ratio of the canvas to do this. You can't simply apply 100% width and height as that will stretch to 100% width and 100% height of the body.
Example:
Lets say I have a Canvas with the dimensions of 864 x 576 and I want it to be responsive to the full body.
Find the percentage/ratio of the canvas. To do this you can do it manually or through JavaScript. In this example lets do it manually for a non-changing image.
ratio = width / height * 100
So here our ratio will be ratio = 864 / 576 * 100 that would be 150% (as in 1.5:1 or 3:2)
We now add the styles using the viewport height vh.
canvas
{
display: block;
margin: auto;
width: 150vh;
height: 100vh;
}
Now one problem remains. What if the window width is smaller than the canvas? Okay, we create a CSS media query and do the opposite of what we've done.
ratio = (height / width) * 100
So here our ratio will now be ratio = 576 / 864 * 100 that would be 66.66% (as in 0.66:1 or 7:10)
We need to use the viewport width now for the canvas width and height. width is always 100vh.
#media (max-width: 150vh)
{
canvas
{
width: 100vw;
height: 66.66vw;
}
}
The max-width media query needs to be equal to the canvas width, which is 150vh in this example.
Take a look at the code: https://codepen.io/StudioKonKon/pen/oQobaa
var image = "https://res.cloudinary.com/studiokonkon/image/upload/v1541450918/sample.jpg";
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = 864;
canvas.height = 576;
var background = new Image();
background.src = image;
// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function()
{
ctx.drawImage(background,0,0);
}
body { margin: 0; padding: 0; background: #000; }
.mycanvas
{
display: block;
margin: auto;
width: 150vh;
height: 100vh;
}
#media (max-width: 150vh)
{
.mycanvas
{
width: 100vw;
height: 66.66vw;
}
}
<canvas id="canvas" class="mycanvas"></canvas>
Please be aware support of the vh and vw units are only supported in the latest browsers and assuming you don't care about Internet Explorer.
https://caniuse.com/#feat=viewport-units

Use a CSS transformation on an entire page including fixed backgrounds (in Firefox)

I've made a script that re-sizes my website with some ratio: 'rat'. I do a scale but that scale creates white margins so I transform the entire html page and I sent it to origin in the coordinates 0 , 0.
document.documentElement.style.transform = "scale(" + rat + ")";
document.documentElement.style.width = 100 / rat + "%";
document.documentElement.style.transformOrigin = '0 0';
The problem I have is that some background images with the following property do not transform:
background-attachment: fixed;
Everytime I transform my html page the background images with background-attachment: fixed; don't transform.
You can check what I'm talking about in my portfolio here:
http://testedesignfranjas.tumblr.com/
Open the site in chrome and in FIREFOX and see the differences.
The issue is in Firefox.
*sorry for my bad english

I have a partial answer. Firefox doesn't always treat nested, fixed elements correctly when using a transform. Instead of using background-attachment, make the div with the image position:fixed. The second div is relative or static, so it will overlay the first div.
<body onload="scaleAll(0.8)">
<div id="img1">I have a background image, am scaled and am fixed.</div>
<div id="outer">
I have content and am scaled.
</div>
</body>
I have moved the image outside the div and set img1 to position:fixed. Do the scaling individually, once for img1 and once for the outer div that has the content.
<script>
function scale(rat, container) {
var element = document.getElementById(container);
element.style.transform = 'scale(' + rat + ')';
element.style.transformOrigin = '0 0';
}
function scaleAll(rat) {
scale(rat, "outer");
scale(rat, "img1");
}
</script>
The style uses position:fixed for the img1 and relative for the outer.
<style>
div#outer {
position: relative;
height: 900px;
width: 900px;
}
#img1 {
position: fixed;
background: url("image.png") no-repeat;
width: 796px;
height: 397px;
}
</style>
JSFiddle Example

Use jQuery to remove the "fixed" attribute when you scale document
$("img").each(function() {
$(this).css("background-attachment","");
});

image width 100 % when the height larger than the width with JQuery

I'm trying to make a wordpress theme ,so my code is :
<div class="post-thumb">
<?php echo get_the_post_thumbnail(); ?>
</div>
i would when the height is bigger than the width , the width=100% , height=auto;
and when the width is bigger than the height , the height:100% , width=auto;
i have tried to do that with javascript , but it didn't work !
var landscape = $(".post-thumb img ").css('width');
var portrait = $(".post-thumb img ").css('height');
if (landscape > portrait){
$(".post-thumb img").height('100%') .width('auto');}
else {
$(".post-thumb img").width('100%') .height('auto');}
);
},
});
any solution !

Why use jQuery when you can use CSS?
.post-thumb-img {
height:auto;
width:auto;
max-width:100%;
max-height:100%;
}
The inclusion of the auto pieces are because older versions of Firefox don't look at min- declarations unless the regular declarations are explicit.

You could set the image as a background image and use background-cover
.post-thumb{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

try this code
var landscape = $(".post-thumb img ").width();
var portrait = $(".post-thumb img").height();
if (landscape > portrait)
{
$(".post-thumb img").height('100%') .width('auto');
}
else
{
$(".post-thumb img").width('100%') .height('auto');
}

IE7/8 Scale background image 100% of the width of its container

I am working on an image slider that scales an image. Of course this works fine in all browsers included IE9+ but for IE7/8 it seems to scale the image to fit the containers height and not the width...
I am using the following CSS code to scale the images.
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../files/slideshow/3.jpg', sizingMethod='scale')"
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../files/slideshow/3.jpg', sizingMethod='scale');
I was curious if anyone knew of a way to make this scale by the width of the container instead of the height using either CSS or JavaScript?
You can view it here http://kearsargefire.org/

Check it...
http://css-tricks.com/perfect-full-page-background-image/
HTML
<img src="images/bg.jpg" id="bg" alt="">
CSS
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
SCRIPT
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
Adjust the code for instead of "$(window)" to be your container.