Javascript get background image offset position - javascript

I want to have a fullscreen div with a fullscreen centered background image :
#fullScreenHome {
background:url('home.jpg');
background-size: 100%;
background-position: center;
width: 100%;
height: 100%;
}
To keep the background centered this does apply an offset to the background image position.
I want to make the background image move on mousemove without losing the centering effect.
How do i get the offset value OR how to achieve the desired effect without knowing this value ?
Thanks !

Related

How to set a background with same width and height of image that uses object-fit

How can i add a background that has the same width and height of an image that uses object-fit?
This is the CSS for the image
height: 100%;
width: 100%;
object-fit: contain;
display: block;
background: #fff;
The issue is the white background takes the full width/height of the container instead of the size of the image which is being resized by
object-fit: contain
I need to do this so i can add checkerboard background for images with Alpha Chanels
maybe switch to object-fit: cover?
if thats not possible i think the only solution is computing the ratio (with/height)
with javascript and center an absolute div behind the image with white bg

How can I control what parts of the image should show when I minimize the window?

I have an image on my page and it's created using photoshop. The image has text in the middle. When I minimize the window the image shrinks and the text becomes smaller instead of scaled.
I tried:
.img{
width: 100%;
height: 100%;
}
How can I make it when I minimize the window the text will stay the same and the image will be cut from the sides?
Thank you
img element is meant to show a whole image. To display only a part of image, you'd better use a block element with background specified in css. This allows you to specify the size of viewport and position of the image separately.
For example, in html,
<div class='my-image'></div>
in css,
.my-image {
background-image: url(path-to-image.jpg);
background-position: center center;
background-size: auto auto; // This is the default
}
This allows you to position the image centered in the div. No matter how big the div it is, the image size will stay the same(thus only the center part is visible because of the clipping).
For more details about background in css, please read https://developer.mozilla.org/en-US/docs/Web/CSS/background

Vertical slider when slide to bottom background-image is compressed

I used jquery-ui plugin to realize vertical slider function. I want to realize gradient effect, so I use background images, include bg/range and slide handle. The question is when I slide dot handle to bottom, bg image is compressed. Here is my example code.
jsFiddle
#head_slider .ui-slider-range {
background: url(https://image.ibb.co/hTvN6a/head_slider_h.png) 0px center no-repeat;
}
#head_slider_bg {
position: absolute;
width: 72px;
height: 704px;
right: 100px;
background: url(https://image.ibb.co/mUfpma/head_slider_n.png) center center no-repeat;
}
and the same way to horizontal slider is fine! That's confusing me. Thanks for your reading and help.
The problem is not that the background image is compressed, but the CSS rule border-radius applied to the verticle bar becomes different. When slider slides to the bottom, the height of the verticle bar is less then 60px (the value you set to border-radius), thus the actual border radius will be decreased.
A simple fix to this problem is add a min-height constraint to that element, which you can refer to the updated fiddle (add min-height: 60px at Line 79 of CSS).
For more detail about the behavior of browser handle border-radius, refer to Cornor Overlap section of specification.

centering image overlaying another with xray effect

The issue I’m having here is with the x-ray image behind the one in the front. They do not line up. It only does when i stretch the browser out to 1920px. Anything smaller than that causes it to misalign. Note that I purposely set the image to be at 100% width which I know is not responsive.
I want to keep the effect of the image getting cut off on the right and left of the browser. Ideally I'd like both images to be centered and aligned when I decrease the size of the browser.
Here is the Github link:
https://gist.github.com/siravani/71b8d447acaca8b34acfcab82af58c06
If you added a fiddle that would have been a lot easier but all you need to do is add background-size:cover to #flesh css rule
html, body, #flesh {
position: relative;
margin: 0;
height: auto;
max-width: 100%;
background: url("http://www2.yapstone.com/l/109192/2017-04-04/4c61s2/109192/37539/buildings.jpg") no-repeat;
background-position: center;
background-size:cover;
}
this way your background image will fit in container and will match with the original image.
Here is a working fiddle https://jsfiddle.net/w2jjaLn5/

How do I vertically center an image in a div?

Suppose the image is 100w x 300h. But I have a div that is always 100x100. I want to center the image (so that the top and bottom get cut off)
Note: The height will always be variable. It's not always 300.
How can I do that in JQuery?
Why don't you just set the image as a background property of the div? Straight CSS solution, no js necessary:
.cutoffAndCentered { width: 100px; height: 100px; background: url('image.jpg') no-repeat center center; }
Or you can always do the same via jQuery:
$('.myDiv').css('background','url(image.jpg) no-repeat center center');
You should use display: table-cell and overflow:hidden;
This tutorial should help http://www.brunildo.org/test/img_center.html

Categories