I'm getting a issue with the image background repeating(see image). Even though i have set the CSS property to no-repeat. The source is http://www.pcpal.co.uk/mobile/
PS sorry about the image being so big.
also is there any good tools/resources I can use as i'm new to creating a mobile site..
I have solved my own issue in the end. I removed a comma from my CSS code..
background-position: 5px, center;
to
background-position: 5px center;
Many Thanks to those who took the time to read my problem
Related
I have a website that requires a 'bottom right' background image alignment, along with a background colour of #000.
My css tests okay on all OS and browsers I've tried so far (chrome, ie, moz, safari) except for chrome on android, which renders the background image outside the browser window.
Other image alignments work fine - the problem seems to be only with bottom right alignment, and only with chrome on android.
Problem page url: Features a background-image: bottom right alignment
CSS as follows:
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 1em;
background: url("../images/bg_prices_XL.jpg");
background-size: contain;
background-color: #000;
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed;
}
If I change alignment to background-image: top right; then the problem goes away.
Page renders properly on android moz. Do I therefore need to include a -webkit specific alignment?
Havd tried adding:
html,body {
height 100%;
width 100%;
}
...but no luck. Viewport size already set to device size, Chrome seemingly is rendering oitside the viewport anyway, below the footer.
Tried styling the background-image under html section of css, but didn't work.
All thoughts welcome.
I have inspected the page throught chrome dev tools. I think if you remove background-attachment: fixed; propery it will work.
...never mind folks. I made the background a fixed, 100% height and width div, with a negative z-index. It feels like a clunky workaround to me, but it seems to work. Any better suggestions though would be appreciated thank you.
I have a problem with a web application. I have these CSS rules to make sure that if text is overflowing it will be shown with three dots. It works perfectly on all browsers that I have tested(desktop and mobile). One big except is android stock browser and more importantly only RTL mode (I have attached an image of the rendered output).
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
The output should be Option 1, Option 2 and so on. There is enough space to fit this small text there but is cut off.
I have tried to use text-rendering: optimizeLegibility option and it helps in some cases but not all.
Does any one have any ideas what might be a solution for this problem?
Thank you for your time!
I'm trying to fit a background image to it's container using background-size:cover.
here is my fiddle : The Fiddle
it works in all browsers but not working in Android native browser..
anybody has any solution please ? thanks
After searching about this problem and finding no solution, I deleted background-image from CSS file styles and used an inline style in HTML codes. The problem with android native browser is solved.
I updated the fiddle and it's working in android native browser.
The Updated Fiddle
it seems that android also has problem with parsing background format like this :
background: url('...') fixed center center / cover;
and we should separate the background-image form others and use it inline, and then use each option separately in css file, like this :
background-size: cover;
background-position: center center;
Unfortunately, the background-size property isn't fully supported by older versions of Android's native browser and Chrome for Android. I went through the pain of discovering this the hard way. Instead of using "cover" as a value, do the following:
background-size: 100% auto;
What this does is give you the same horizontal feel as "cover" and then automatically sets the height of the image, assuming that the image has intrinsic dimensions.
For further reading, I recommend diving into the detailed writeup from Sara Soueidan.
I had the same problem with background-size: cover, the image was fit to the width of the device and below there was white background, and it was fixed when I set background-color using this css:
background-color: #fff;
or shorthand:
background: #fff url('http://cdn.stupiddope.com/wp-content/uploads/2013/06/IMGP3540.jpg') no-repeat scroll center center / cover;
it doesn't matter which color you pick because it will be invisible.
JSFIDDLE
I have a code which makes a background picture cover the whole screen, not just the content. It works fine with a computer and an iPhone but with an android the picture doesn't stretch length wise to cover the whole screen vertically. The code is as follows.
CSS:
body {
background-image:url(background.png);
border:none;
background-size:100%;
-webkit-background-size:100%;
-moz-background-size:100%;
-o-background-size:100%;
background-attachment:fixed;
background-repeat:repeat-x;
}
The image is 5x500 pixels. If you have a better solution to cover a page with a background image then let me know.
Background size can ggive problems sometimes. Try adding a min-height to html
Try Adding
min-height: 100%;
to the body
Try setting your properties like this:
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
backround-size can be finicky.
Have you looked at background-size:contain? Personally, I am a fan of background-size:cover, which may help as well.
I came across this post because I was looking at an Android background size issue. If it doesn't help the OP, at least hopefully, it will help someone else.
The android issue is related I experienced was Android not liking the shorthand for background and having a background-position and a background-size. Separating, like it looks like you have, solved the issue.
I have an android app that has has this css for the body background:
html, body {
height:100%
margin: 0;
padding: 0;
color: white;
position: static;
text-align:left;
background: URL(images/aVia_Background_new.png) top center black;
background-repeat:no-repeat;
background-size: cover;
background-attachment:fixed !important;
}
When the page is long enough to be scrolled, the background will scroll right off the screen as the page is traversed downward. It acts as though the background-attachment property is set to scroll, but it certainly isn't. The background works properly when the website is viewed in Google Chrome on my desktop, but for some reason when it's translated to Android via Phonegap, it doesn't work properly. Is this a known issue with Phonegap? And does anyone know anything I could try to remedy this? Thanks to any responses. The more ideas the better.
yes.. the problem is with your `background-attachment:fixed;
As far as I know position:fixed is not working fine. I had the same issue while I was trying to do a fixed header/footer in my app. And used iScroll at last