We Keep Coding

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/

Maintaining Aspect Ratio with 100% Width & Height (Cropping Overflow in CSS)

I'm working on full-screen background slideshow.
My question is: How can I set an image to take up the full screen and maintain aspect ratio?
Min-height and min-width work, but do not keep the aspect ratio when both are set. I want the image cropped with the full coverage of the container.
Diagram of Problem
I believe I need to have one dimension fixed, and the other to auto; given that the image dimensions and view-port dimensions are variable, I'm thinking I would need at least 2 sets of CSS rules, and javascript to calculate which one should be used. Is there a simpler way to do this?
I've drawn up a diagram illustrating my problem. The dark colors are the original images. The median colors are the desired effect. The lighter colors are the desired overflow from the scaled up image.
I'm working on a Ken-Burns effect full-screen background. I know I have to worry about transitions, but I'm hoping that I can handle that after.
Tutorial for Ken Burns Effect:
http://cssmojo.com/ken-burns-effect/
Solved: Thanks Maju for introducing me to background cover. Changing the images to divs and changing the javascript + css on the Ken Burns code from images to divs worked well. The script changes the element class, so you have to use Maju's CSS another way or change the script.

If you will use images in css background-image, you can set on any element background-size. And if I understand you right, you need something like:
.background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-repeat: no-repeat !important;
background-position: 0 0 !important;
background-attachment: fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
<div class="background" style="background-image: url(http://www.jurosko.cz/images/stackoverflow.png)"></div>
Cover will affect image in the way that it will always cover the whole element with right aspect ratio.
There is also new css style, but it doesn't work in IE/ME.
https://css-tricks.com/almanac/properties/o/object-fit/
For this reason I recommend to use divs with background-image.

Very weird behavior when working with background size CSS3

I recently learned about the background-size property thanks to this topic
Set size on background image with CSS?
As you can guess, I am trying to make a background image take up the full screen and no more/no less. Here is my fiddle
https://jsfiddle.net/1x7ytdaa/
document.body.style.backgroundImage = "url('http://www.crystalinks.com/ColosseumNight2.jpg')";
document.body.style.backgroundSize = "contain";
Here is what the contain property does
Scale the image to the largest size such that both its width and its height can fit inside the content area
It shouldn't matter what size the image is. If it's smaller, it should be scaled to the full size of the screen. If it's larger, it should be scaled down.
In the fiddle, you can see that the image is repeated 5 times horizontally and 5 1/2 times vertically.
I've tried 100% 100% and while the width stretches the full screen, it still shows the same image 5 1/2 times vertically
I can not explain this behavior. Does anyone have any ideas?

Two things:
background-repeat
width and height of body
As you can in an edited fiddle, the problem is that the default value of background-repeat is repeat. Therefore, the image will be repeated rather than stretched. That doesn't solve everything, though, as the body and HTML elements should have a width defined that is 100%.
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
document.body.style.backgroundImage = "url('http://www.crystalinks.com/ColosseumNight2.jpg')";
document.body.style.backgroundSize = "contain";
document.body.style.backgroundRepeat = "no-repeat";
If you want to cover the whole screen, use cover instead of contain. Cover makes sure that the element is completely covered, whereas contain simply makes sure that the background image is maximally contained (which can cause white space).

This might help:
position: fixed;
background-position: center;
overflow-x: hidden;
width: 100%;
height: 100%;
background: url(img/xxx.jpg);
background-size: 100%;
background-attachment: fixed;
overflow-y: scroll;

CSS Responsive Image positioning and cropping

I am trying to create a foreground image (not background) that covers the entire viewport. When the page is resized or viewed on a smaller device I want the most important part of the image to be centered with any part that doesn't fit in the window cropped on its width (not its height). To clarify lets assume that this represents the horizontal pixels in a 10 bit pixel wide image that I want to center on pixel #7.
|0123456789|
displayed on a wider screen might be:
|0 1 2 3 4 5 6 7 8 9| (still encompassing the entire screen)
resized for a smaller screen:
|123456789|
|23456789| <-- Even smaller screen
|3456789| <-- Even smaller screen
|456789| <-- Even smaller screen
|45678| <-- Even smaller screen
|5678| <-- Even smaller screen
|678| <-- Even smaller screen
|67| <-- Even smaller screen
|7| <-- Even smaller screen
In this example the entire picture shows when the screen is large enough to display the entire picture. But when the screen shrinks, it should properly crop (mostly from the left) in order to make sure that #7 is always displayed with proportional movement towards the center of the screen. How can I do this? CSS, javascript and JQuery must be able to handle this.

edit, since it is foreground :
the idea here is to use line-height, text-align , min-height, min-width and negative margin to crop the image: average result below in snippet or codepen
html {
height:100%;
}
body {
text-align:right;
line-height:100vh;
height:100%;
}
img {
min-width:100%;
min-height:100%;
margin:-50% 0 -50% -240% ;
vertical-align:middle;
}
<img src="http://dummyimage.com/600x200&text=123456789" />
from my comment:
html {
min-height: 100%;
background: url(http://dummyimage.com/600x200&text=123456789) 73% center no-repeat;
background-size: cover;
}
the idea is, once page resized, the last number to be seen is 7.
You need to run the snippet in fullpage or play with the codepen liked earlier : http://codepen.io/gc-nomade/pen/jqjdrp

Think you're just looking for background-position: center?
/*.with-bg-size*/ html {
background-image: url('http://placehold.it/1600x1600');
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
}
<div class="with-bg-size"></div>

keep aspect ratio of image for responsive
div:before {
display: block;
content: "";
width: 100%;
padding-top: (16 / 9) * 100%;
}

CSS background-size: cover and background positioning for a 1000x100 graphic

I have a layout issue I can't seem to figure out. It involves a background image in a div that is 100% width of a viewport. The background-image is 1000px wide, but I want it to always stretch to fill the width of the div mentioned above, whether the viewport is 200px wide or 600px wide or 1000px wide or 1600px wide. Another requirement is that the graphic should keep its aspect ratio unless it's less than 50px tall, at which time the graphic should remain at a minimum height of 50px and kept centered horizontally within the div. Which means that the narrower the viewport gets, the less and less you can see of the graphic itself -- until you can see only the center of it.
I'm using background-size: cover, which works beautifully for when the viewport is >= 500px (i.e., the background-graphic is at the minimum height of 50px). However, I don't know how to keep the graphic centered as a background-image at widths below 500px.
Is there a CSS rule that can handle this? Or do I need to use a media query and/or javascript to make this happen?

Rather than background-size: cover; try background-size: 100% auto; to base it off the width of it's container and not the height. It still follow it's aspect ration but doesn't worry about the height anymore.

Hello your question is not very clear. But you could use this to have a Background stretched and covered.You can set a fixed and centered background on it, then adjust it's size using background-size.
html {
background: url (images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}