Parallax image loads fine, but jumps to center when hovered over - css

I've got this peculiar bug I've been trying to fix today—-still no luck.
If you look at the example below,
http://vitaliyg.com/alpha/hire/
Here's what happens. The full-width background image loads in the correct position, centered along the y axis. Then when we hover over the image, the whole image jumps over to the middle, and slowly adjusts itself back to it's normal desired position.
What's causing this is left: 50%; margin-left: -960px;. This allows us to center the image correctly to begin with. If we didn't have this CSS, the hover wouldn't jump, but the image would load anchoring itself on the top left of the browser.
In the link above, the red box is the content div. The blue box is some text that will be parallaxing with the background-image.
Here is what I am trying to achieve:
Make the background-image appear centered.
When the user hovers over the background-image, it would not jump to the middle of the page.
And lastly, decrease the width of which the user would be able to "parallax" on the x axis. The way it is now, is that the user can see from side to side of the image if patient enough. I want the parallax to be very subtle.
Also, I'm using jParallax, found here:
http://stephband.info/jparallax/
Thank you for your help!

Once you set the position via CSS for the background image, it seems jQuery Parallax plugin alters those settings. The solution then is to apply those settings after the jQuery Parallax has dealt with that parallax layer.
First, remove the margin-left and left from your .parallax-layer#background class.
.parallax-layer#background {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-position: center bottom;
width: 1920px;
height: 620px;
}
Ideally, center the blue box using the same method (unless you want it partially off screen). I've also removed non essential CSS based on your HTML.
.parallax-layer#tagline {
background-color: blue;
width: 400px;
height: 400px;
}
Finally, add the CSS rules that were removed from the background and tagline selectors so they are applied after jQuery Parallax has manipulated those items.
jQuery(document).ready(function(){
jQuery('#parallax .parallax-layer')
.parallax({
mouseport: jQuery('body')
});
jQuery('#background').css({marginLeft: "-960px", left: "50%", bottom: "0px"});
jQuery('#tagline').css({marginLeft: "-200px", left: "50%"});
});
You no longer will see the large white section (body background color) to the left of the background image when the mouse enters the viewport.
This jQuery Parallax plugin aligns everything top/left by design. If the mouse enters the
viewport from the right of the blue box, that box animates to that location correctly.
However, should the mouse enter from the left side of the blue box, that box will 'jump' to the cursors location. You might consider removing the last jQuery line above so the blue box is top/left upon browser load or use a lower percentage value like 25%.
For those that landed on this Question/Answer and wanted some real markup to work with, I have set up two jsFiddles. One jsFiddle duplicated the problem and the other has the solution as shown above.
Original Problem - jsFiddle
Fixed Applied - jsFiddle
Both jsFiddles are in full screen mode so the Parallax effects can be seen.
Instructions to view Original Problem:
1. Launch the above Original Problem jsFiddle Link.
2. Press the jsFiddle Play Button, being careful not to enter the viewport. If the blue box moves in any way... you've entered the viewport so press the play button again.
3. Enter from the top/left of the viewport and you will see the problem... the HTML Body (white color) is seen as the background image readjusts itself.
4. Press the Play Button at any time to reset the webpage.
To see the Fixed Applied, either launch the link above or at the Browsers Address Bar modify the URL so you see revision 1 of that jsFiddle. (i.e., http://jsfiddle.net/UG4Sq/1/embedded/result/ )
The blue box indicates via text which jsFiddle your viewing. Cheers!

Related

CSS limit repeated background img from overflowing body

I'm trying to limit the repeated body background image (some call it sprite) from overflowing the bottom.
The reason I'm using the before: method, is because it was the only solution I could find to add transparency to background image transparent without causing everything else to have transparency.
I notice whenever I pull content: " " style, the overflow is removed correctly, but the image disappears causing it's necessity. It's the image wanting to finish displaying in its entirety that's causing the extra scrollable space below the body.
I have tried various combinations of background-size, overflow, even background-position (which is kind of not really related to this).
The background tile is rather large 528x290px, and this is a responsive site.
Here is the code im working with
jade
body
div#body-wall
sass
#body-wall:before{ //background image
position: absolute;
z-index: -1;
left: -264px; //set half image dimension to remote initial offset
top: -250px;
background-image: $body-bg-image;
background-repeat: repeat;
// background-size: 528px 290px; //actual image dimensions 528x290
// width:190%; //set wider to accomodate for top and left offset
// height:120%; //set wider to accomodate for top and left offset
opacity: .15;
content: '';
}
#body-wall{ //implemented for background image
position: relative; //important for background image to display
}
The reason I have the top and left offset is to get the image to a nice starting position. Please note, adjusting the top and or left positioning does nothing to fix the issue.
What can I do to tweak the styles to get the image to cutoff, using this before: method.
EDIT
What Im seeing in my development site, there is an additional few hundred pixels of overflowed image causing the bottom of the site to fall below well below the footer div (see fiddle).
Expected result, I expect the image to be clipped off at the bottom of the content, as opposed to causing the content boxes to expand until its finished displaying leaving a few hundred px of overlap.
I was able to recreate what I'm seeing, its in this fiddle here, but i had to actually comment out the position relative in the #body-wall for some reason, where on my development site, if i do this, the bg disappears entirely to a blank white.
#body-wall {
/* position: relative; */
}
Please note, I have an entire bootstrap3, then migrated to bs4 site in the middle of that tempdiv. Also note, migrating bs had no effect on the way its displaying like this.
Any suggestions?

Fixed background image until bottom of page

I'm trying to get a background image to start and stay in a fixed position, but only until the rest of the 'content' of the page is finished, at which point the full image is displayed.
I'm working on a purely CSS solution. I should note that the image is larger than most (laptop) screens.
Specifically, here's the code that I've been using:
body {
background:$bgcolor;
background-image:url('http://i.imgur.com/cIGSehG.jpg');
background-repeat:no-repeat;
background-position:0px 72px;
background-attachment:fixed;
margin:0;
...
}
The image that I'm using is given in the url():
The effect that I'm looking for is basically the image will display only about the top 10% of the grass hill while you're looking at most of the page, but if you finally scroll all the way down past all the page content, the remaining 90% of the grass hill will be shown.
I couldn't find this anywhere, but I may have just been using poor search terms since I'm not so familiar with the lingo.
Well, this was one jiggy nut! I did come up with a not so stable trick to achieve this. I don't have time to develop it any more right now, but perhaps it might be a working concept.
Main contept
By providing a large and empty footer area that the user is likely to hover when reaching the bottom of the page, we use a sibling selector to change the position of its sibling element containing the background:
#footer:hover ~ #background {
background-position: center bottom;
}
Along with a few quirks (which ought to be improved) we can achieve a parallax effect.
Go Fiddle
Check out this JFiddle (in Chrome) to see and play with it.

background image surrounding content shifts with scrollbarr

I am trying to use a background that surround the content area (just a bit of shading on both sides) as seen here: http://i.imgur.com/5X5D7.jpg
I left room in the middle for the fixed width layout which is 980px.
My body css is just this:
body {
margin: 0;
padding: 0;
background: url(../images/bg.jpg) center repeat-y;
}
It looks good on the homepage that has no content on it. But when I go to a test page that has a few paragraphs typed out and the scroll bars appear in my browser, there is a slight white line that appears to divide the background and the content area.
I tried shifting the background image shading by a pixel but then it does not work on the homepage..
Is there something else I can be doing in the css to prevent this?
I should say I am trying this in drupal with the zen theme and have not really changed anything else.
Made a jsfiddle for you: http://jsfiddle.net/Ja2SR/
Essentially I think you're looking at the browser trying to divine 1px in two, which it can never do. I don't really understand why it is an issue, though - the line appears inside the content area, which in the fiddle you can see as white next to red, but if your content area is white also, and has padding on both sides, which I assume it does... then having 1 more pixel shouldn't be too bad. Correct me if I'm assuming wrongly!

div:hover positions swap image differently in different browsers

I've used the div:hover CSS rule to achieve the desired affect - an image "swap" when the mouse hovers over a navigation image: www.scottmccarthydesign.com/dev.index.html
My setup here, however, is not actually a "swap." The main navigation image is a flattened jpeg of the entire desk (for faster loading), and there are empty divs over each item on the desk to map the image with links. When these empty divs are moused over, the div:hover rule fills the div with a .png that is meant to be placed precisely over the main desk image to give the effect of an image swap.
It works nicely in Firefox, but I do not understand why Safari is positioning the :hover image over the desk differently than Firefox is - each :hover image is about 1 pixel off, making it look like the seperate images on the desk are actually shifting a bit when moused over. Any suggestions??
I've had trouble using the :hover pseudo-class on elements other than <a></a>. You could use (jquery/javascript) to alter the class of the said <div> using onmouseover and onmouseout events.
With onmouseover, add a class that defines a certain background image. With onmouseout remove that class.
Even easier, use jquery .hover()
reposition your links after adding this to your css:
a div {
line-height: 0;
}
I've come across this issue before and found that it had to do with the size of the image. When the image is an odd-number pixel size on one of its dimensions, the calculations done by Firefox and Chrome/Safari (particularly when using center) are slightly different. Essentially, it has to do with sub-pixel rounding.
Simply add or subtract a pixel to your images on the axis that has an odd number length, to make them an even number (ie - instead of 100x123, make it 100x124) and you should be golden.
No need to use Javascript, this can certainly be achieved using just CSS. In my opinion, your best bet is to use the technique discussed in this article on CSS Sprites: http://www.alistapart.com/articles/sprites.
Essentially, for each item on your desk, place the hovered and non-hovered image in same image, one on top of each other, so that the top area has the non-hover state, and the bottom area has the hover state. Your code will probably look like this modified:
div#keyboard2 {
position: absolute;
left: 89px;
top: 256px;
width: 67px;
height: 160px;
background: url(../images/keyboard.png) 0 0 no-repeat;
}
#keyboard2:hover { background-position: 0 100%; }
Your desk image will then be empty, and of your items will just be on top of it.

CSS: Hover State images cache

when we define hover state of anything CSS... & on hover state we change the background:url('image path'); will this image be preloaded of will be download on the first hover of the element.. if that is so then how to preload it... i know the javascript to preload images.. is that going to work...
If you're trying to avoid having your hover state images only load they they're being hovered on, instead of preloading them, why not create sprites that hold both the normal and hover images ? That way you can be sure that all your hover state images will already be loaded, and at the same time drop the overhead for all the requests. The only thing that you would then need to do, is to set the value of the background-position attribute.
As for your first question, I suppose the best way of finding the answer is to use two large images (a couple of wallpapers would work) and test it yourself, although I suspect that the images will only be loaded when the mouse is over the original image, because that's when the code is being executed.
Hope this helps !
If you have a div of height 20px, say, and want a background image to change on hover, use an image with both the no-hover and hover graphics in it, with the no-hover at the top, and the hover image at the bottom. Both parts should be the hight of your div, in this case, 20px. Then, set your CSS background-position first to 0px 0px (top left). This is default (no hover).
When the user hovers over the div, set the background-position to 0px -20px (20px up). This will move the background image up by 20px, showing the bottom half of the sprite, which is the hover graphic. When the mouse is removed from the div, the sprite will fall back to it's original position.
CSS:
.hoverDiv /* Normal state */
{
background: url('images/img.png');
background-position: 0px 0px;
}
.hoverDiv:hover /* Hover state */
{
background-position: 0px -20px; /* Move background up by 20px, hiding the top image */
}
If you have a div of different height, just change the 20px bits with the height of the div.
If your sprites are side by side as opposed to on top of each other, move the X axis by using background-position: -20px 0px; instead of 0px -20px;. Of course, you can move the background positively too.
Hope this helps,
James
you could use css sprites
The best thing to do is use CSS Sprites. A sprite sheet is a large image with lots of images inside it, which will be used on your site. What's the benefit? Well, it means that only one http request is sent to download all of your images. Therefore, making the site load slightly faster.
It will really work well with a hover effect!
It's much easier to use plus simple code. Not like JavaScript, with messy horrible code. It's very easy to learn. Based around the position of the image in the sprite. Here's a useful tutorial, on Flowdev. Here's an example on W3Schools

Resources