I am getting reports from the client I am developing for that he cannot scroll vertically on his Samsung Galaxy S4 using Chrome. Only on this and other Samsung phones using Chrome. Other browsers on same device scroll fine. The only elements of my CSS and HTML that I believe could be causing this are as follows:
CSS:
::-webkit-scrollbar{width: 20px;}
::-webkit-scrollbar-thumb{background-color:rgb(255, 136, 0); border-radius: 0;}
::-webkit-scrollbar-thumb:hover{background-color:rgb(194, 103, 0);}
::-webkit-scrollbar-track{background-color:rgb(237, 237, 237);}
I am NOT using any overflow: auto; tags which I have been told are problematic with mobile viewing.
I have the included these meta tags in my header to prevent horizontal scrolling and get proper scaling for mobile:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
The site I am working on is http://elementorangeband.com/home if anyone cares to try and replicate this issue.
Thanks in advance.
I am able to reproduce this in chrome by going into developer tools and toggling on the mobile emulator there which indicates that this is something wrong with the CSS or JS in the page. After looking at your media queries it looks like you are hiding the overflow for devices with widths < 480px.
Change this section of elementorange.css:
#media only screen and (max-device-width: 480px) {
body {
width: 100%;
max-width: 480px;
font-size: 10px;
position: absolute;
margin: 0px;
padding: 0px;
background-color: #000;
overflow: hidden; /* remove me!! */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
to:
#media only screen and (max-device-width: 480px) {
body {
width: 100%;
max-width: 480px;
font-size: 10px;
position: absolute;
margin: 0px;
padding: 0px;
background-color: #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
This change fixed scrolling for me. Let us know if it is still a problem. I hope the dev tools come in handy with future testing for ya!
.header {
background: #15181f url(images/bg-header.jpg) repeat;
color: #fff;
}
.footer {
background: #15181f url(images/bg-footer.jpg) repeat;
color: #fff;
}
Hey guys,
my header and footer background image not displaying correctly on mobile devices like android or iPhone, same goes for the iPad, the background image for header and footer is not getting displayed correctly, resulting in a cropped background image.
I tried with javascript and css, and technique after technique, but nothing works. It is neither one nor the other of these styles work on my WordPress website www.awebdesign.co.uk and I don't know what do with my mobile site anymore. I tried overflow-x: hidden; but did not want to do anything.
Tried these styles below
.header {
width:100%;
float:left;
height:100%;
display:block;
position:relative;
margin: 0 auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10;
}
I also tired the following for the footer, but deleted it later because it didn't do anything good:
footer.footer {
width:100%;
float:left;
height:100%;
display:block;
position:relative;
margin: 0 auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10;
}
Than I've implemented media queries,
#media only screen and (max-device-width : 480px)
#media only screen and (max-width: 768px)
#media only screen and (max-width: 1024px
and later changed to this,
#media screen and (max-width: 480px)
#media screen and (min-width: 768px) and (max-width: 979px)
#media screen and (min-width: 981px) and (max-width: 1024px)
However, it displays only the starting position of a background image on the left side. It doesn't display correctly across horizontal line, it displays vertically rather than horizontally. Please help me to find a solution to this problem and consequently learn how to apply CSS background image properties to both mobile and tablets (portrait or landscape).
I think my question is clear but if you have any questions, feel free to to ask, and I hope that others find this helpful too. Thanks in advance!
I deleted the CSS code above to clear my custom styles, the document structure, an HTML5 page, and classes will now look something like this:
<!doctype html>
<html>
<body>
<header class="header">
<div class="container">
<div class="panel_1"></div>
</div>
</header>
<section class="middle">
<div class="container">
<div class="full_width"></div>
</div>
<div class="clear"></div>
</section><!-- .middle -->
<footer class="footer">
<div class="container">
<div class="footer-nav">
</div>
</div>
</footer>
</body>
</html>
.container {
width: 940px;
margin: 0 auto;
}
.container:after {
content: "";
display: table;
clear: both;
}
.panel_1 {background:url(images/panel_0.jpg) left top no-repeat;
width: 940px;
height: 270px; /*border: 1px solid #09F;*/}
section.middle {background: #CCC; clear: both;}
.header {
background: #15181f url(images/bg-header.jpg) repeat;
color: #fff;
}
footer.footer {
background: #15181f url(images/bg-footer.jpg) repeat;
color: #fff;
}
footer.footer {padding: 36px 0; clear: both;}
.footer-nav {float: left;}
I think you mixed up the value cover with contain.
Contain will make your images snap to the width of the viewport and not scale them up until they meet the bottom of the element they are residing in.
Hope this helps. =)
CSS Challenge:
This CSS gets my background to fill 100% of the screen height but there is a minor problem - when you scroll down there is initially white space, then when you release your finger and stop scrolling the background image "adjusts" and fills 100% of the screen height again. The problem does not re-occur on the same page if you continue to scroll, just the first time.
<body>
<div class="background"></div>
<div class="content"></div>
</body>
and the CSS:
html{
height:100%;
}
.background{
position: fixed;
z-index: 0;
width: 100%;
height: 100%;
background-image: url('../image/backgroundpicture.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 50% 10%;
}
.content{
width:100%;
height:200px;
position:relative;
z-index:1;
top:1800px;
}
The Problem is there too, when I put the background-image in the Body!
This is (FINALLY) solved due to changes in how Chrome for Android and iOS Safari work! Have to use 100vh for the height and it will function exactly as expected.
https://developers.google.com/web/updates/2016/12/url-bar-resizing
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url('../image/backgroundpicture.jpg');
background-size: cover;
z-index: -1;
}
Should be all you need!
Could be wrong, this question is a little unclear. By default there will be white space which can be removed with this snippet taken from a CSS Reset. Does that help?
CSS
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
Do you want the background to be underneath all your content? If so, you should just apply it to the body.
CSS
body{
background: url('http://www.placehold.it/500') fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Edit - Create an HTML page exactly like this, is there the same problem?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, body div {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-family: Helvetica;
}
#background {
background: url('http://www.placehold.it/500') fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div id="background">
<!-- Fill me with content -->
</div>
</body>
</html>
Wish that one day someone could work out a solid work around for a viewpoint that changes height...
I have tried a lot of different ideas, and still can't find one that works well.
The best that I have found is to read the (window).height() and add 60px to account for the title bar, and resize the element containing the background to that height..
Its still not the best as 60px will not always be spot on and you are just expanding the background past the smaller viewpoint size..
If there were only a way to get the max-viewpoint size then that would solve everything :(
body {
padding : 0;
margin : 0;
}
This has to work.
Please take a look at backstretch.js which keeps the image responsive no matter where we open the site whether in a mobile or desktop.
I have set a fixed background image on my website and it looks fine on desktops and all browsers on desktop but on android phones it tiles and repeats it. I cannot find a work around this. Here is the code.. If someone has a fix for keeping a background image fixed without repeating on android Chrome please let me know.. thanks. Please exclude any comments that will not help.
the CSS:
html, body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
width: 100%;
background-image: url("images/320htmlbackground.png");
background-attachment: fixed;
}
also tried this but didn't work.........
html {
background: url("images/320htmlbackground.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Try this:
html, body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
width: 100%;
background-image: url("images/320htmlbackground.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
I just had a similar problem but I'm not sure if it's the same one or not. My problem was that the background image wasn't staying in the same place as you would expect from a fixed image. I.e. when I scrolled up and down the background image moved with the page.
It turned out that I had set the background on the body tag. It worked fine on all browsers except on my phone. I changed the background to be on the html tag and it stays where it should without moving as I scroll.
For me this works well:
body{
position: relative;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
#media screen and (max-width: 767px) {
height: 100%;
overflow-y: auto;
}
}
It seems that the background-fixed CSS property doesn't work right in Jelly Bean WebView (both inside an application and using the default Android browser).
If I set this property, the background image gets loaded over the content, i.e. the content is behind the background image.
Here's my relevant HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="target-densitydpi=device-dpi">
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./gesture-background_files/genre-channel-background.css">
<style type="text/css"></style></head>
<body>
<div id="right-keys">
<img src="./gesture-background_files/one.png"><br />
Film24<br />
</div>
<div id="right-keys-vertical">
<img src="./gesture-background_files/one.png"><br />
Film24<br />
</div>
<div id="footer">
MUSCADE<span class="large">EPG</span>
</div>
</body>
</html>
And here's the relevant part of the CSS:
body {
background-image: url(hot-black-background.jpg);
background-color: black;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom left;
}
#right-keys, #right-keys-vertical {
position: absolute;
right: 10px;
width: 100px;
text-align: center;
text-shadow: black 2px 2px 0px;
}
#right-keys img, #right-keys-vertical img {
height: 90px;
margin-bottom: 0;
}
#footer {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 20px;
}
It's a bit long, but the only important part are the background-attachment and background-position properties on top of the CSS file. If I remove those, everything works fine.
Is this a known bug? Can anyone suggest a workaround?
Here's a link to the file so you can try opening it from a Jelly Bean native browser (not Chrome):
http://212.92.197.78/gesture/gesture-background.htm
It turns out that in the Jelly Bean browser if you use
body {
background-image: url(any-image.jpg);
background-attachment: fixed;
background-position: bottom;
}
or anything involving bottom or right for background-position, any elements you position with reference to the right or bottom edge of the screen will be overlaid by the background image.
This is most certainly a bug in Jelly Bean's browser.
Instead of using the above, I put a background image on my page using the following code:
HTML:
<body>
<img id="background" src="any-image.jpg" />
(...)
</body>
CSS:
#background {
z-index: -1;
position: fixed;
bottom: 0;
left: 0;
}
for position related and absolute you can use z-index. Read more about z-index: http://www.w3schools.com/cssref/pr_pos_z-index.asp
On my website, to make the background image to reappear behind the content (on Jelly Bean browser), I only had to remove the css property: background-attachment: fixed.
Zoltan's solution not worked well to me because it makes the background image does not display correctly in some browsers (tested on browserstack)