All currently developing this forum/site:
http://nfldynasty.boards.net/
Lots to finish in terms of content, however I'm currently having some problems resizing the various backgrounds on mobile devices such as ipad and Samsung android tablet etc.
All seems to work well when viewing on laptop via both google chrome and internet explorer.
The code I'm using is as follows
body {
-webkit-background-size: cover;
-ms-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html { height: 100%; width: 100%; }
I cannot seem to work out a way of adjusting the background size on ipad/tablet etc without either changing this on internet explorer to changing the size of the text boxes. i.e. when I change the html tab from 100% to say 75% the background remains unaltered but the size of the forum categories reduces
If I remover the final html line then on all devices the image is distorted when zooming in and out on the text.
Any ideas?
You can try using this for smaller screens:
body {
background-color: #000;
background-size: contain;
background-position: center top;
background-repeat: no-repeat;
}
Related
I use a image as page background, this is the code:
body {
background-color: black;
background: url(/images/bg.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 100% 0%;
}
It looks okay on computer but if I open the page from a tablet or phone there is white space at the bottom of the page.
Here is how it should look:
And here is how it looks on tablet:
try,
html, body{
height: 100%;
}
Due to different aspect ratios of the image itself and tablets (many of them), you will always get some blank space when you use cover. Using height 100% will actually cover the entire height, but will stretch the image.
What you may need is to compare the aspect ratios of the image and the screen of the device and then try to use background-size (percentages) to zoom in or out of the image in order to cover everything in all devices.
I am having an issue with the background image for my site.
When re-sizing in the browser (chrome) it responds how it should, however when I upload it to my server and open the site from my mobile device, it does not re-size. The image just stays the original size and is zoomed into one area of the image.
Can anyone help please?
Here is the code:
html{
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 50% 50%;
background-color: #FFF;
}
for small devices use following property
html{background-size: 100% auto;}
I'd like to target the desktop version of Firefox only (not the Android mobile version) with the following CSS properties:
.background {
background: url(imagelocation) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm trying to create a parallax effect with multiple divs (widths set to 100% and height set to XXXpx) and the background image are fixed while the nested divs scroll out of view.
Here is an example of my codepen: http://cdpn.io/AdglB
When you view this on Firefox Mobile for Android, it creates the effect but it slows down the scroll rendering - hence I would only like to target Firefox desktop if possible. This also creates other issues on the iPhone and Android in terms of background image scaling (it zooms all the way into a large image).
Targetting only Firefox and no other browser: #-moz-document url-prefix() {}. It's a hack. Hacks are bad. Last resort.
Targetting desktop and not mobile: what about using Media Queries and the typical width of a desktop (or mobile) screen?
I guess if it's only about performance on mobile (all smartphones), then just use a MQ...
I am trying with html 5 and css 3 for creating mobile application where i tried with 1px strip image repeat. I tested in mobile native browser.While i change from portrait to landscape i found background flicker with a white background.
I also tried CSS3 background gradient, it seems to be not render fully till the html page ends, this is the style i used in my css style sheet
body{
background-image: url('../images/bg_strip.png');
background-repeat: repeat;
height: 100%;
overflow:none;
}
i am not sure but i am trying tos give you a good answer hope it will work fine to you.
background: url(images/bg_strip.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Whenever I use the below CSS (I also declared it with the shorthand and got same result) I get this strange "BES" that appears for a split second on the page when viewed on certain Android Stock browsers.
html {
background-image: url(http://www.cynthiapacephotography.com/wp-content/themes/pace_origin/images/background2.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Even if I remove all the extras and just leave it like below, I still get the weird letters
background-image: url(http://www.cynthiapacephotography.com/wp-content/themes/pace_origin/images/background2.png);
I don't get this on the iPhone or Chrome on Android devices. I finally just added a media query and just using a background color on mobile devices. With just the background color and no image, I don't get the letters anymore. I also tried a handful of background images and this always happens when using a background image.
Any ideas of what this is and what's causing it?
Here's a shot of what I see: