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
Related
I've made rock paper scrissor game using html,css and js.When window is resized to small, some left portion of the page disappears .Using horizontal scrollbar i can scroll to right but not left.
I've checked for absolute positionings and negative margin but none worked.
What should i try ?
I expect to get entire page without any portion getting clipped off.
Hard to answer this without the code, but I would use devtools first to see what margins are being applied. You can look at the box model for each element in your dom and see what is being applied. Also, how small are you resizing? Do you have any explicit widths? If you are sizing down to 200px, but you have a div that is 250px, it clearly is going to have overflow. Devtools can also help with analyzing different devices too. Use the tool to set a size and see how your page responds, you can change the width of elements in the devtools to see if it removes the overflow.
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.
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 am working on my portfolio and I am having an issue with the project description shifting the images on the left downward when the browser resize. A picture of the issue here: click here When you resize the browser the text will shift over and move the images down. I've tried setting min-width but that doesn't help the text nor the image div to make sure it doesn't resize at a certain point.
Here is a sample link to the page itself: [click here][2]
I tried adding min-widths to a image element but that doesn't work either. I do not want to use absolute position as it will overlap on top on resize. Any thoughts or suggestions?
You have an image that is 1052px wide, which is in a UL element that has a margin-left of 1.5em. Your description box is 350px. Basically your #imagewrapper div needs to be equal to or wider than all of these elements.
Right now that's about 1422px. It will change if the effective font size for your UL.imagewrap-pad changes.
That's a pretty wide web site. You probably should make it a bit narrower if you're making it for general viewing, especially with all the tablets etc out there now.
Anyway, the code you want is
#imagewrapper
{
width:1422px;
margin:0 auto;
}
The second line makes it center on the screen.
P.S - get Firebug for Firefox, or use similar tools in chrome. They let you endlessly experiment with styles to find out what works for you.
To solve the problem just set the "width" property in #imagewrapper :
#imagewrapper {
width: 1430px;
}
Have You tried setting up width attr on the parent element to around 1800px?
div#imagewrapper {
width:1800px;
}
It will put a scroll bar at the bottom of Your browser, but if You want to put such a big image beside that text then You do need a lot of space. Just keep in mind that it won't fit in users monitors.
To make it look nice I guess You should apply that attribute to the body tag.
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).