I have a background image that covers the entire screen. It works like a charm in web. However when I click an input field in mobile browser, the background shifts (I believe so) and shows a white colour. Since my input fields are also white, I can't see them when things get messed up as such.
Attaching the screenshot of both states before clicking the input field and after clicking it as well on mobile.
CODE HERE:
<body class="details_step1-1">
<div>
...........
</div>
</body>
CSS HERE:
.details_step1-1{
background-image: url("../images/img_foldbg.png");
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height:100%;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
}
TRIED FIXES:
1. Adding min-height to the background image, html, body as 100% together as well as separately.
2. Adding height as 100vh to the background image, html and body.
You can apply overflow:auto on both your html tag and your body tag, and that will fix your white space issue.
Related
Sorry for my poor English. The code may describe better.
#wrapper{
display:flex;
}
#wrapper img{
width:25%;
}
<div id="wrapper">
<img src="https://www.hellocoolguy.com/t/1.png" />
<img src="https://www.hellocoolguy.com/t/2.png" />
<img src="https://www.hellocoolguy.com/t/3.png" />
<img src="https://www.hellocoolguy.com/t/4.png" />
</div>
I have a div#wrapper using display:flex, the img has 25% width, so the images can tile in a row.
It's ok in desktop browser, but in some mobile phones (or using chrome's DevTools to simulate), I can see gap between some images like below:
Some gaps seem to appear/disappear when I change the wrapper width. And it seems only happen on mobile. Desktop browsers (without chrome's DevTools to simulate mobile phones) always show the right result.
What's more, I found it would be ok if I use something like codepen (the code here). When using codepen it's even ok with simulating mobile phone using chrome's DevTools.
I don't know how to modify my code to let mobile phones show properly.
You may see it directly from your mobile phone here
Edited on 2019.09.27
This is happening in Wechat browser (using X5 browser as its core) , and this may be a round pixel rendering question/bug.
Finally:
Thanks for everyone who've helped. It has been still not resolved but I shall end it for it has cost us such a long time.
This is likely due to some discrepancies in pixel rounding.
To ensure the pixels are rounded correctly add the following in your head tags:
<meta name="viewport" content="width=device-width, initial-scale=1">
It's likely that Codepen automatically add this tag which is why you are unable to reproduce the issue on there.
Use background-size : cover
It will remove the space by cover your div with
the documentation
This would work:
#wrapper .img {
padding:0;
margin:0;
width:25%
}
This could be a rendering bug.
When you add background-position: right; or background-position: left; you see the problem on the other side of the your element. So the bug is that your background image with the width of 100% just is not enough to fill the box.
So you could use background-size: 101% 100%; to fix this bug. (Or
maybe 100.9% instead of 101%).
Another solution (in my opinion the better one) would be adding the same image in one box as a second background-image, but just placed on the other side.
background-image: url(sameimage.png), url(sameimage.png);
background-size: 100% 100%, 100% 100%;
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
The first background-image will be placed at the left-top-corner and the second one will be at the right-bottom-corner of your element.
In the worst case you will still have some pixels left and need to add the same image at each corner... (background-position: left top, left right, bottom left, bottom right;)
This is regarding a landing page with a full screen image background.
link to Codepen project
On this pen to replicate the problem, resize your browser screen to a mobile width and hover over the text 'leasing' you will notice a large gap on the bottom of the screen.
I tried to solve this using the following styles:
html, body {
background-image: url("https://greatofficespaces.net/wp-
content/uploads/2019/02/Skokie_Warehouse_For_Lease_Promo.jpg");
/* Full height */
height: 100vh;
width: 100vw;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
When I run this as a local file, instead of a gap on the bottom
there is a doubling of the image at the edge of the browser screen. Also in chrome browser the css is not loading in as it should
and there is a flash of plain black text for a few seconds until the css loads in.
I read about techniques for image optimization on stacked overflow and having different image files for different media queries and srcset, but I do not think its related to that, I think its a bug somewhere in the css.
Here is the full page
https://github.com/KravMaguy/flyer1
Any help on how to fix these css bugs is greatly appreciated.
The problem was fixed by changing it to the following css :
html {
background-image: url("https://greatofficespaces.net/wp-
content/uploads/2019/02/Skokie_Warehouse_For_Lease_Promo.jpg");
/* Full height */
height: 100vh;
width: 100vw;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
specifically removing the word 'body'
the previous css class of body, html {styles etc...} applied the same styles to both the html and the body, When I removed one of them I no longer saw the double image in the corner of the browser, implying that the background was assigned to both the html and the body, producing the doubled image and incorrect css loading. This is my guess as to why this was happening and has been resolved.
On my website, I am having a dilemma. (This website). On the homepage the background is across the whole page (which is what I want), where as on the contact page it is not. I have made it transparent using:
#siteWrapper{
background-color: rgba(0,0,0,0)
}
However, this only turns it black? On the header of the page, there is the image but not on the background of the body? I can do it the other way around so the body has an image and the header does not (like this):
#siteWrapper{
background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/141565 4282657/Website%20Background%20Trees.png");
background-repeat: no-repeat;
background-size: 100%;
}
However I would like it so the image covers all of the page (header and body background) - Thanks
ADDITION
I tried to use background-size: cover; however that only covered the footer and not the header (as well as stretched the image).
You can put the background-image on your body element, and set background-size:100%, and remove it as the background image from the other elements which it is on. This will work on all page across the site.
There doesn't appear to be anything in your footer so you can just get rid of the footer all together to have the image take up 100% of the webpage with your code above.
I am using blogger and recently inserted this cc code in to the advanced section of the template designer to input a background image
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
}
.body-fauxcolumn-outer div {
background: none !important;
}
The problem is that when the browser window is resized the background stays the same but all the widgets/elements on the page resize along with the window.
See www.ashlylondon.blogspot.com
I need the background to resize along with the widgets so that they stay in the white area on the background image.
You are relying on background resizing so much that your layout won't work without it. That's not ideal. The typical approach to a situation like this would be:
Have a background image that covers the entire screen
Give the <div> element that contains the actual content a background-color: white property.
You can still use background-size to scale your background image to the screen size, but it no longer is necessary for the layout to work.
this woul make sure your content is always readable no matter what; it'll work where background-size won't, e.g. in older browsers and some mobile devices.
add this to your css
body{background-size:100%;}
try this
add in body class background-size:cover;
http://jsfiddle.net/pyFbF/3/
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
background-size:cover;
}
.body-fauxcolumn-outer div {
background: none !important;
}
When I use background-attachment: fixed; in firefox the top part of the page has a weird border
Example image: http://www.socialaddicts.net/wtf.png
It works on another page and in other browsers, just not this page // browser.
The image has a top border embedded in it.
The only reasons I can think of that it doesn't appear on another page is that your css is positioning the border part of the image off screen.
If I were you, I'd take the border out of the image.
<style>body {background-image:url('untitled.JPG'); background-attachment: fixed; background-repeat: no-repeat;" }</style>
you have to add this:
*{margin:0;padding:0;}
But well, it's an image, not a webpage so you can't i guess.