centering image overlaying another with xray effect - javascript

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/

Related

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.

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;

parallax scrolling image out of view

I'm working on a little extracurricular side project to bolster my html5/css3/jquery knowledge and I'm working with Parallax Scrolling but I can't seem to get the bottom image to scroll into view. It seems stuck behind the above it and no matter what I do I can't seem to pull it down into view.
There should be a giant dollar bill in the bottom black section where it says 'Abe is the money'
my url is : http://www.petegetscreative.com/abe/index.html
inspiration came from this tutorial: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
cheers
I think the dollar bill image is too small.
Looking at this Fiddle, when I increase the size of the dollar bill image to 200%, it becomes visible in the preview.
#known {
background: url(http://www.petegetscreative.com/abe/images/US-$5-SC-1953-Fr.1655.2.jpg) 50% 0 no-repeat fixed;
background-color: #000;
background-size: 200%;
height: 600px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
padding-top: 50px;
}
So what's probably happening is the height of the image is less than the difference in scroll positions. Try a larger (taller) image.
I believe that the problem could be the dollar image is less than section tag and the script you're running put the bg image with negative Y position. You can make a test making the image bigger than the 650px ( the section's height ).

How to make a snapping header that snaps to each side of the browser?

So while working on my FAQ page, I figured I would try and create a stylish header. The problem is now, that I have it, I have no idea how to snap it to the sides of the browser (if that's even plausible).
What I was wondering if either CSS or JavaScript would help with taking this image: (http://files.enjin.com/503205/FAQWelcome.png) and setting it to a 50-75% height (depending on how it looks) and snap it to the web browser so that the smaller the web browser gets, the smaller the image gets so it maintains the same look in any browser.
I was also wondering if it is possible so that a boatload of pure HTML text could follow the same pattern of expanding and collapsing perhaps?
I'm way too new to CSS but I have an intermediate understanding of how to make it work. I want to be able to create a clean, fluid website that's enjoyable to visit.
Edit: I'm using module placement for this one as Enjin won't support the edit of full-website CSS but rather HTML modules.
Here's a Fiddle in this example image is set as body background
body {
background: #f8f8f8 url(http://files.enjin.com/503205/FAQWelcome.png) top center no-repeat;
}
#media all and (max-width:960px) {
body {
background: #f8f8f8 url(http://files.enjin.com/503205/FAQWelcome.png) top center no-repeat;
background-size: auto 300px;
}
}
#media all and (max-width:600px) {
body {
background: #f8f8f8 url(http://files.enjin.com/503205/FAQWelcome.png) top center no-repeat;
background-size: auto 200px;
}
}
To get responsiveness you must use CSS media queries, with media queries you target screen size and by screen size you're setting appropriate CSS properties.

How to made my background image strech if I dynamicaly insert DIV in the middle of the page

I have a background image which I apply to the body. The image is only in the bottom and stretch to the entire width of the page. The image is 1 X 320 px.
body {
background-image: url("../images/bg-main.gif");
background-position: 0% 100%;
background-repeat:repeat-x;
}
The rest of my web site is in 1024 X 768 resolution.
It works perfectly until I dynamically insert a new DIV in the middle of the page using javascript. It cause the browser scroll bar to appear and when I scroll down to the bottom, I can see the image stopping right at it's original position.
How can I make my image get down again without reloading the page ??? I'm using the EXTJS framework to avoid reloading the page...
Thanks
Alain
im guessing this is IE only,
try:
background-position: 0 bottom;
if my understanding of "The image is only in the bottom" is correct
if that fails causing hasLayout on the body might work, try combinations of
body
{
width: 100%;
position: relative;
}

Categories