Since adding position:fixed elements, my pages have been scrolling too far and the fixed background repeats its self.
It's not an issue in Firefox, but Chrome shows this issue.
The problem can be seen at:
http://www.25892.rwswebsite.com/listings
It's been driving me crazy for hours. A second set of eyes would be much appreciated!
I dug around in Web Inspector and was able to fix a few of your problems:
Scrolling too far:
For <body>, overflow should be visible. This is the default value, so it will take this value if don't explicitly set overflow-x and overflow-y (and nothing else overrides it).
Multiple background images:
Looks like you're setting the background image on both the <html> and <body> elements. For fixed backgrounds like you're doing here, I like to set backgrounds only on <html> (see here).
Also, I you should try using background-size: cover for the background image. With cover, the image will be sized to the smallest dimension that will allow it to cover both the browser width and height. Browser compatibility is pretty good.
Related
I've seen plenty of threads regarding this issue but I cant seem to find a fix.
I have a div with a background image, and its size is set to cover.
It works fine on every browser and device except for mobile chrome, whenever i scroll up and down the page, the background image seems to resize. I've also noticed the weird bug where if you put background-size:cover before background-image:url('') it ignores the background-size attribute, but if you put it after declaring the background image, it detects the size and sets it to cover, but then has the weird re-sizing scrolling bug.
It's driving me mad! Anyone know of a fix?
The actual solution to this is to set html { height: 100% } in your CSS.
Beware that this does not resolve the Chrome viewport size bug relating to the URL bar height -- that is when you scroll up and the URL bar hides, the viewport size doesn't change and background: cover ends up being about 50px short of actually covering the entire viewport.
You can work around this by setting html { height: 115% }, but this behavior may change when the bug is fixed.
Your problem is not the background cover, but when you're scrolling the page, your browser's navigation bar (address bar) is resizing. This leads to resizing of the available viewport to the. And since your background is set to cover, it tries to cover the newly available area, appearing as an image resize.
You can have multiple solutions to this.
1. Make your full size container Absolute or fixed positioned
2. Once the page is loaded, give a height (or max-height) to your container. This, once page is loaded, will keep the height of the element same even when the page is scrolled
You'll require some more tweaks depending on what the page does and what other content it might have.
This problem is similar to having cover background, and the text sentence breaks to new lines on resize, increasing the container height.
I just experienced a similar issue with a background image on chromium-browser. When I had background-size: cover in my style, the image appeared to be slightly magnified, meaning that all my centering was "off" and the right hand edges of my graphic were fuzzy.
I had to take this style element out.
This problem was not present with version 65 of chromium-browser, but has bitten me with version 72
I have encountered a strange bug using my OpenCart website in Chrome. The product images are not showing up but I see the white area where they should come.
If a product doesn't have an image it's aligned to the left but in this case I can see the white area where the picture normally is.
And here's the crazy part, if I click on inspect element, suddenly the image appears.
Some css code
.product-list .image {
float: left;
margin-right: 10px;
overflow: auto;
}
In the CSS you need to set the width and height attributes.
That is weird. Regardless, things to check:
Z-index: The outer box that surrounds the image might be "above" the image itself. Add z-index to the image with a value of 9999 to check
Position: if it's parent container or god knows what else has a weird position it could be affecting where the child element, in this case an image is appearing.
Disable JS - Javascript might be causing an issue here, try disabling it to check.
Also, when you use chrome dev tools, you are technically "hovering" on the image. And you say it suddenly appears. So I'd take a look at your :hover rules as they apply to images. A lot of sites will use a sprite technique that shows one image in normal state, and then shift the background to a different part of the same image on hover. Your normal state could be empty and the hover then moves the bkgd position to the image you want.
Let me know how this turns out.
More scenarios to replicate this issue
1. Close inspect if not already opened.
2. Resize inspect if already opened.
3. Resize browser window.
Just to follow up on this issue, Mary's answer is the correct one, but for our circumstances it was important not to set a width and height in order to maintain responsiveness. But apparently setting width and height to auto works just as well, even though it makes no difference in appearance.
So, since opening the Web Inspector resizes the page in some cases, you should look into:
resize handlers on JavaScript side that might be causing your images to show up
media queries that satisfy certain width and only show images then on CSS side
Picture element having media queries that
aren‘t covering the width you are viewing this with.
For me this was the Picture element having a gap in its media attribute definitions (<source media=(min-width: 1824px)">).
I'm experiencing a strange cutoff of my background image at the very bottom of my page. It's only evident if you have a short browser window and scroll to the very bottom. And it only happens on longer pages.
Firebug inspection reveals a viewport-width element, stretching entirely across the browser window at the very bottom, about 50px high that seems to be "blocking" it, but this doesn't correspond to any div in my layout - that I can find, anyway!
Also, when rolling over this strange element, it's the first <HTML lang="en-us"> line that gets highlighted in Firebug.
Longer page: http://bit.ly/151TFnW
============FOLLOWUP==================
Following the helpful suggestions here, I fixed the above by removing the 100% height from the BODY style. But that breaks something else! Now, on this shorter page:
Short page: http://bit.ly/1fvbnHY
The background image is still cut off at the bottom, when the browser window is tall enough to show this.
Remove the 100% on BODY and that second, shorter page is fine - full bg image and bottom margin - BUT the earlier link's problems return.
Help....!!!
From what I can tell, it looks to be caused by the height value assigned to body. When I remove that rule, most of the gap goes away. I assume the last bit is from some of the margin from the footer spilling over.
Well, it may or may not be considered a proper fix, as it doesn't address the reason why the pages in question reacted differently to the "body at 100% height" setting than the rest of the site... but I solved it by targeting it with CSS so that the problem pages simply don't receive that CSS rule.
So, sigh of relief, but tinged with the knowledge that I didn't really figure out why it was doing what it was doing.
I found a strange bug in Firefox. I've tested it in Chrome too, but didn't happened..
I'm using a background object. It's a div with fixed position and 1920*1050 sized. I need this, because I want my site compatible with every resolutions. Smaller resolution hide the big part of the background, but full HD users can see the whole background.
If I use absolute position for this div, my browser give me horizontal scrolling ability. I can hide it with hidden overflow, but I can't disable the scrolling ability. With fixed position the browsers doesn't "see" the whole object, and it's equal to disabled horizontal scrolling.
If anybody have any other solutions I would be very grateful for it.
The problem with this solution, is this:
You can see the difference between the two. It's the same text styling, but no anti-aliasing on fixed one. With smaller font-size it's really annoying.
Anybody met this bug in the past? How could I fix it, or any other solution for background image?
Update
Okay, I deleted the div, and added background for my body tag, with fixed attribute, and happens the same...
background-attachment: fixed; < Causes the same problem
Not quite sure what your background is supposed to be doing. But if you need a proportionally scaling background that fits all browser window sizes, you can use thisplugin and a reasonably high resolution JPG with preload on.
Remove any box-shadow property from the parent element. This worked for me.
I see many sites that suffer from this, and I've only been recently been immersed in backgrounds that stretch 100%...
Examples are
http://brassblogs.com/blog/sticky-footer
http://beanstalkapp.com/
if you constrain the width of the browser and scroll right, it looks visually off: the background doesn't carry over. How could you go about fixing this?
Edit: heh, as soon as I figured out the answer myself, I got the answer.... haha.
Your problem happens because the browser doesn't know when to stop scaling the webpage when you resize the window. You'll have to specify the smallest width that your design can tolerate:
html
{
min-width: 1050px;
}
The min-width is kind of large, but if you make it much smaller, your background will bleed through and cause layout issues.
Also, you'll have some issues with layout if you use percentages along with borders, margins, and padding (which is partially why your background images aren't sticking properly).