I've been trying to get the background image for a site to responsively stretch/crop whilst maintaining its aspect ratio; an affect I've achieved successfully using the below.
body {
background-image: url('image.png');
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
When viewed on a desktop browser this works perfectly with the image adjusting to fit the change aspect ratio of the browser. However, when tested on a mobile (Chrome) the background image appears to ignore the "cover" value and returns to its original size (MASSIVE) and cuts straight off the side of the screen in both portrait and horizontal modes.
How can I get the mobile version to maintain it's size relative the the browser window and achieve the same behaviour I'm already getting for the desktop? Ideally CSS-fixes only please.
Thanks.
background-size: 100% 100% (width height) should work.
Related
On my wordpress site, the background for the front page hero is improperly scaled on mobile devices (iOS and Android). It only shows a fraction of the image as opposed to the full image.
I have tried:
-changing the resolution and sizing of the image
-Unwanted scaling on mobile devices (Inserted the meta tag but no changes propegated, yes I cleared cache too)
-Site scaling on a mobile device (I tried testing CSS changes through USB debugging but it did not work)
I am using the Brooklyn theme created by United Themes. The site also utilizes Visual Composer.
Site: https://www.wearerubbish.com
Current CSS
#media (max-width: 767px)
.parallax-section {
background-position: center center !important;
background-repeat: repeat-y !important;
/* background-attachment: fixed !important; */
background-size: cover !important;
}
An example would be nice so we can take a look at the code, but usually I fix those problems by adding a max-width property with a value of 100vw if the hero is full width and it is a <img> tag. But if the image is a background-image a background-size: cover; will do just fine.
You can try this css
.hero .parallax-scroll-container {
background-size: contain!important;
}
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 website that i'm trying to design. I've filled the background with an image that takes 100% of the height of the screen. On a computer this works perfectly, but on mobile it only takes 100% of the webpage space available at load, which includes the browswer's URL bar at the top. When you scroll down, the URL bar disappears that leaves a gap at the bottom of the background of website.
The website is a single webpage website. The 'homepage'/initial view on load fades in to the background image. I want the actual content to be just off the screen on load, and so having a background image that just fills 100% of the height of the screen is important.
How do i fix this?
Below is how i've filled the background and screenshots of the website in question.
I've filled the background of the website using the following CSS code.
html{
background: url(../content/BackgroundAndHand03.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
opacity: 1;
}
Website with mobile browser URL bar
Website without mobile browser URL bar
This prevents scrolling past the html element and allows your body to maintain its position during over-scroll on mobile devices, so even if the device supports over-scroll, the html is locked to the desired color or image while the body moves.
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
Make sure to include this meta tag if you already haven't
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I am facing an interesting issue with my current project site. The background images used on HERO AREA , TESTIMONIAL AREA , CONTACT AREA loads perfect on PC. But those background images don't load / Appear on mobile devices.
I am unable to find out the cause behind this problem.
Here is the live link of my project: http://themebite.github.io/demo/effacy/
How can i load those background images on mobile as perfectly as they loads on PC.
Thanks in advance!
use the media queries to set CSS properties for example background-size: 100% 100%; This will solve your problem
.static-bg {
background: transparent url("../img/bg/hero-bg.jpg") no-repeat scroll center center / cover;
background-size: 100% 100%;
}
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