I'm making a little demo thing for my sister's wedding, I basically want to set the body background to a different image as the user scrolls down the page.
Here is a functioning version of the page.
The process itself works fine, however on:
A desktop mac running Chrome (browser width around 1900px)
The image does not stretch across the page, although the background remains fixed (as it should).
Screenshot of this problem
A mobile phone (android chrome)
The background image does not stay fixed (when the user scrolls down, the background image is left behind). Funnily, I cannot reproduce this in my laptop browser by making my window smaller - possibly a limitation with the mobile browser itself?
Screenshot of this problem
Any thoughts on what I'm missing here?
The image is 1200px wide. So on a 1900 resolution the image doesn't stretch and is smaller :). If you use background-size: 100%; It should stretch.
As for mobile: This question is the same issue as you with solution.
set the
width:100%
margin-left:auto;
margin-right:auto;
in your image tag or div
if the 100% is not work use px for width
Related
https://faultde.github.io/rps-v1/
When I scale the window on a computer,the page resizes, but when I load it on my phone it doesn't scale. Can't seem to find the problem in my CSS.
in body css you have given margin:30px and width 100% remove both
I'm playing video on a website. The HTML5 <video> player is housed within a container div which positions it centrally. On most browsers when a user clicks full screen the video plays full screen in the browser without issue, but in Safari on OS the video is positioned half off the screen - I can only see the bottom 50%.
I suspect this is because the <div> container has CSS position:fixed and top:50% height:auto but I can't work out what I need to do to correct for this problem which only seems to occur in Safari.
I can't find any guidance on the web or evidence of anyone experiencing the same problem. Please help!
Website for reference: www.bigredbutton.tv - click a video to play it and then use the native full screen controls.
Thanks!
You can try setting the position to relative. It worked for one of the similar issue we faced.
When I browse my website on computer, everything looks fine in all major browsers, however, when I check it on Android phone there's a massive gap below footer. This happens only in portrait mode and in all android browsers. When I view it in landscape mode, the gap disappears in all browsers.
I tried 'playing' with viewport meta tag, but it doesn't help.
My site's width: 1300px and height:100%. Also, footer has padding-bottom:0; margin-bottom:0;
What could cause this problem to happen only in portrait mode?
Update: It seems that the height of a page isn't large enough to fill entire screen of my mobile so there's this gap. When I browse the page it's completely zoomed out according to sites width. How to make it zoom in according to site's height instead and thereby eliminate the bottom gap?
Please help
P.S. Unfortunately, I cannot provide you link to the site as it's on a local server.
Ok, guys. I managed to fix it. Probably not the best fix in the world but better than nothing.
So what I did was forced minimum zoom by using viewport minimum-scale=0.6.
No bottom gap after this fix.
http://m.snacknetworx.com/ goes completely 100% wide in a web browser, on an HTC Incredible there is padding and/or margin on both sides.
I created a test page to test replicate the problem:
http://m.snacknetworx.com/test.php
There's only one div with inline css:
test...
Problem being this div does not reach the edges of the HTC browser, same padding and/or margin issue, but goes 100% in a web browser.
Does anyone know how to get 100% width on a mobile browser?
It seems like repeat-x for background property is not working on iphone safari browser.
Is there an alternative solution to this issue?
Don't use repeat-x or repeat-y but just repeat.
Works, tested.
I'm thinking this might be the problem with your page...
Incorrect width on iPad Note that even though the guy never accepted.. My way of doing it at least solved that problem..
On ipad like half of his page bg and header and footer went missing. This is really quick fix ( if you have the same problem ), basically you just set the same background ( the one that gets cut off ) again in inner elements that have a static width. Static width is the key word here, because window width doesn't cut those off.
Also as stated in that answer, in desktop browsers if window width is smaller than page width and you scroll to the right it will cut the bg. That is very common thing to see actually.. your page does the same.
Im fairly certain this will solve your ipad issue.