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;
}
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'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.
So I'm setting up something extremely simple: a webpage with two containers and one sign-up form. The containers are otherwise empty, except for a background image set and configured with CSS. I'm trying to get this webpage to respond differently based on screen sizes with media queries, and for my desktop, it works fine; when I resize the page to (for example) anything below 720px, the background images in the containers adjust accordingly and predictably. Here's where the problem begins: it doesn't respond on my mobile device.
I'm using the Galaxy S3 as my starting point. Its resolution is 720x1280px. But it seems as though the media query is having no effect on the mobile browser.
Here's how it appears on desktops and laptops:
#header {
width:100%;
height:100%;
background-color:#000000;
background:url(".../header.jpg") no-repeat fixed;
background-size:contain;
background-position:center;
}
Here's the media query configured for the Samsung Galaxy S3:
#media only screen and (max-height: 720px) and (-webkit-device-pixel-ratio: 2) {
#header {
width:100%;
height:100%;
background-color:#000000;
background:url(".../header.jpg") no-repeat fixed;
background-size:500px auto;
}
}
I have already added the viewport tag to my <head> but I'm still not getting the desired response from my coding. Am I doing something wrong? Should I try for another device as a benchmark?
Max-height is going to correlate with 1280px, not 720px. The default orientation of the Galaxy S3, at least in Chrome, is going to be portrait. Set max-width:720px.
I never use the keyword "only" as I had trouble getting it to work back when media queries were newer. Try a query like this:
#media screen and (max-width: 720px) and (-webkit-device-pixel-ratio: 2) {
}
Or keep it simple and do:
#media screen and (max-width: 720px){
}
BTW it's best practice not to use max-width that often. You want to start styling your smallest screen and use min-width to move up to larger screens.
And it's possible due to the pixel density that Galaxy is reporting a much smaller screen-width. It says 360px here: http://www.mydevice.io
In the default Android Browser for older Android versions (4.1, maybe 4.2/4.3 [It is on the Android device of a customer, i'm not exactly sure which version he uses]) SVG sprites are not rendered correctly.
Instead of showing the correct clipping with the correct size, the browser shows a smaller version of the image, showing the whole sprite, like in the screenshot below (Android Browser 4.1):
Android screenshot (false rendering)
it should look like this:
Android screenshot (correct rendering)
Here's the CSS for the sprites:
.sprite {
display: inline-block;
background-image: url('img/sprite.svg');
background-repeat: no-repeat;
background-size: 1000px 1000px;
overflow: hidden;
color: transparent !important;
}
.sprite.logo {
width: 270px;
height: 55px;
background-position: 0 0;
display: block;
}
[...]
Every other Browser (including Android Browser 4.4) shows everything correctly.
This issue exists on Android 4.3- and IE9. To solve this, simply specify width and height attributes for svg tag in you file.
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