Hi I have several divs on my page which have background images that I want to expand to cover the entire div which in turn can expand to fill the width of the viewport.
Obviously background-size: cover behaves unexpectedly on iOS devices. I've seen some examples of how to fix it, but I can't make them work in my situation. Ideally I'd prefer not to add extra <img> tags to the HTML but if it's the only way then I will.
Here is my code:
.section {
margin: 0 auto;
position: relative;
padding: 0 0 320px 0;
width: 100%;
}
#section1 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
#section2 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
#section3 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
<body>
<div id="section1" class="section">
...
</div>
<div id="section2" class="section">
...
</div>
<div id="section3" class="section">
...
</div>
</body>
The question is, how can I get the background image to completely cover the section div, taking into account the variable width of the browser and the variable height of the content in the div?
I have had a similar issue recently and realised that it's not due to background-size:cover but background-attachment:fixed.
I solved the issue by using a media query for iPhone and setting background-attachment property to scroll.
For my case:
.cover {
background-size: cover;
background-attachment: fixed;
background-position: center center;
#media (max-width: #iphone-screen) {
background-attachment: scroll;
}
}
Edit: The code block is in LESS and assumes a pre-defined variable for #iphone-screen. Thanks for the notice #stephband.
I've had this issue on a lot of mobile views I've recently built.
My solution is still a pure CSS Fallback
http://css-tricks.com/perfect-full-page-background-image/ as three great methods, the latter two are fall backs for when CSS3's cover doesn't work.
HTML
<img src="images/bg.jpg" id="bg" alt="">
CSS
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;
}
Also posted here: "background-size: cover" does not cover mobile screen
This works on Android 4.1.2 and iOS 6.1.3 (iPhone 4) and switches for desktop. Written for responsive sites.
Just in case, in your HTML head, something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
HTML:
<div class="html-mobile-background"></div>
CSS:
html {
/* Whatever you want */
}
.html-mobile-background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 125%; /* To compensate for mobile browser address bar space */
background: url(/images/bg.jpg) no-repeat;
background-size: 100% 100%;
}
#media (min-width: 600px) {
html {
background: url(/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
.html-mobile-background {
display: none;
}
}
There are answers over the net that try to solve this, however none of them functioned correctly for me. Goal: put a background image on the body and have background-size: cover; work mobile, without media queries, overflows, or hacky z-index: -1; position: absolute; overlays.
Here is what I did to solve this. It works on Chrome on Android even when keyboard drawer is active. If someone wants to test iPhone that would be cool:
body {
background: #FFFFFF url('../image/something.jpg') no-repeat fixed top center;
background-size: cover;
-webkit-background-size: cover; /* safari may need this */
}
Here is the magic. Treat html like a wrapper with a ratio enforced height relative to the actual viewport. You know the classic responsive tag <meta name="viewport" content="width=device-width, initial-scale=1">? This is why the vh is used. Also, on the surface it would seem like body should get these rules, and it may look ok...until a change of height like when the keyboard opens up.
html {
height: 100vh; /* set viewport constraint */
min-height: 100%; /* enforce height */
}
That its the correct code of background size :
<div class="html-mobile-background">
</div>
<style type="text/css">
html {
/* Whatever you want */
}
.html-mobile-background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%; /* To compensate for mobile browser address bar space */
background: url(YOUR BACKGROUND URL HERE) no-repeat;
center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%
}
</style>
For Safari versions <5.1 the css3 property background-size doesn't work. In such cases you need webkit.
So you need to use -webkit-background-size attribute to specify the background-size.
Hence use -webkit-background-size:cover.
Reference-Safari versions using webkit
I found the following on Stephen Gilbert's website - http://stephen.io/mediaqueries/. It includes additional devices and their orientations. Works for me!
Note: If you copy the code from his site, you'll want to edit it for extra spaces, depending on the editor you're using.
/*iPad in portrait & landscape*/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */}
/*iPad in landscape*/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */}
/*iPad in portrait*/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }
#media (max-width: #iphone-screen) {
background-attachment:inherit;
background-size:cover;
-webkit-background-size:cover;
}
I found a working solution, the following CSS code example is targeting the iPad:
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
html {
height: 100%;
overflow: hidden;
background: url('http://url.com/image.jpg') no-repeat top center fixed;
background-size: cover;
}
body {
height:100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
}
Reference link: https://www.jotform.com/answers/565598-Page-background-image-scales-massively-when-form-viewed-on-iPad
html body {
background: url(/assets/images/header-bg.jpg) no-repeat top center fixed;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
-webkit-background-size: auto auto;
-moz-background-size: auto auto;
-o-background-size: auto auto;
background-size: auto auto;
}
Related
Is there any way to only trigger the Parralax effect on laptop and desktop views?
Atm I have the following however, it doesn't allow an image to be displayed on some device browsers: Safari to be specific.
.parralax {
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
My HTML solely references this in the section I want the Parralax effect.
<section id="home" class="home parralax bg-img fix">
Make sure you put your external style sheet first in the document so it overwrites your parallax rules.
/*Mobile 480px*/
/*Desktop 992px*/
/*Huge 1280px*/
#media screen and (min-width: 480px) and (min-width: 768px), (min-width: 992px), (min-width: 1280px) {
.parralax {
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}
So i have this problem with an image, which won't load in my responsive.css code. I'm trying to change a background image according to various resolutions of the website. below i post the parts of my codes in html and responsive.css. I already checked the path to the image and the image is in the file which contains html, css, responsive. Any tips how to make it work? I'm a beginner when it comes to html and css.
HTML:
#background {
width: 100vw;
background-position: center;
background-size: cover;
}
responsive.css: figure {
width: 100%;
}
#media (max-width: 992px) {
#background {
height: 50vh;
}
}
#media (min-width: 993px) and (max-width: 1170px) {
#background {
height: 70%;
width: 100%;
background-image: url('../zadanie-domowe-rwd-materialy/obrazy/man-2.jpg');
}
}
<figure>
<img src="zadanie-domowe-rwd-materialy/obrazy/man-1.jpg" alt="Zdjęcie nr 1" id="background">
</figure>
Your HTML needs an amendment:
<body>
<figure id="background"></figure>
</body>
Remove the img tag and apply an id of background to the figure tag.
Img tags are not background images, so all images will appear on top of backgrounds. To create the condition, both images need to be added within css as background-image
You will need to add this to your css too:
#background {
position: relative;
height: 500px; // Or a different height
width: 100%; // Change to 100% of element or window
background-position: center;
background-size: cover;
// Add the follow
background-image: url('../zadanie-domowe-rwd-materialy/obrazy/man-1.jpg');
}
Update: Entire Code
HTML
<body>
<figure id="background"></figure>
</body>
CSS
#background {
position: relative;
height: 500px; // Or a different height
width: 100%; // Change to 100% of element or window
background-position: center center;
background-size: cover;
background-image: url('http://placehold.it/350x150');
}
#media (min-width: 992px) and (max-width: 1170px) {
#background {
background-image: url('https://unsplash.it/200/300');
}
}
See JsFiddle
I hope this helps
For responsive only change .css file not HTML . if you want to change the img in mobile or other device ing use in css Like this
Try it i thing it's helpful . https://jsfiddle.net/dup1d62k/4/
Was trying to make my clickable background image responsive on all devices but can seem to wrap my head around it. It is showing well on 10" and above screen devices but on lower screen devices, the image is chopped off. I will like to make it responsive on all devices. Any heads up on this will be appreciated.
The code used is found below:
#range-logo {
margin:0 auto;
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
display: block;
height: 800px;
width: 1240px;
}
#media only screen and (max-width: 767px) {
#range-logo {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
}
}
<a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a>
Well you can change background-position to 100% as below in media query, this works fine, but this make your image as fixed background on mobile device compare to other visual result on other device.
body{
margin:0px;
}
#range-logo {
margin:0 auto;
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
display: block;
height: 800px;
width: 1240px;
}
#media screen and (max-width: 767px) {
#range-logo {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-size:100% 100%;
}
}
<a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a>
Use contain property instead of cover if you want to see full image in background.
*{
margin:0;
padding:0;
}
body,html{
width:100%;
max-width:100%;
margin:0;
padding:0;
}
#range-logo {
margin:0 auto;
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
display: block;
height: 100vh;
width: 100%;
}
#media only screen and (max-width: 767px) {
#range-logo {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-size:100% 100%;
}
}
<a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a>
Try adding this to your media query:
#media only screen and (max-width: 767px) {
#range-logo {
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-size:contain;
}
}
I have a one page website that displays background images in several divs. I used background-attachment: fixed to give it a pseudo parallax scrolling effect.
It works perfectly on the desktop. I now know that this doesn't work on the iPhone, so I removed this code from the iPhone version using a media query. (I can live with a fallback.) On the iPhone 5, the background images scale up to an unrecognizable view — so big that it is just pixels.
How can I resize the images so that they fit the phone's browser window? I have looked everywhere for an answer.
I removed all media queries. I even removed the background-attachment: fixed property to no avail. Here's a link to where the site is: http://www.mywebdesignstudio.net/danielleb_KKC (I put back the background-attachment: fixed) If you look at it on an iPhone 5, the photos are too big. This works on the desktop, laptop, and tablet, but not on the phone--hence the media queries to swap out the photo to see if it would work. Feel free to look at the page source for the entire code.
Here's the CSS code:
#viewport{
zoom: 1.0;
width: device-width;
}
body, html {
height: 100%;
margin: 0;
font: 1em/1.8 "Arial", sans-serif;
color: #777;
}
.bgimg-1, .bgimg-2 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("pic4ghost.png");
min-height: 100%;
}
.bgimg-2 {
background-image: url("radio.png");
min-height: 550px;
}
#media only screen and (max-width: 767px){
.bgimg-1 {
background-image: url("pic4ghostMOBILE.png");
min-height: 100%;
}
.bgimg-2 {
background-image: url("radioMOBILE.png");
min-height: 400px;
}
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px){
.bgimg-1, .bgimg-2 {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.bgimg-1 {
background-image: url("pic4ghostsmartphone.png");
}
.bgimg-2 {
background-image: url("radiosmartphone.png");
}
use this and delete all other codes
.bgimg-1 {
background:url("pic4ghost.png") no-repeat center center fixed;
background-size:cover;
}
delete all other classes and media queries
Have you tried using the background-size: property?
Here is a code example. Please notice the first declared background will be on top of the rest.
// Gradient, image and flat color as a fallback;
.bgimg-1 {
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)), url("paper.gif"), black;
background-size: auto, cover, auto;
}
I used the standard syntax, because CSS3 is common practice on this days, If you have some need for backwards compatibility, check [caniuse.com]
I have a photo background on my site using background-size:cover. It works for the most part but leaves a weird ~30px white space on my Galaxy S3 in portrait mode.
I've attached a screenshot. The 1px teal line is to illustrate the entire screen. Seems like the background stops right after the social media uls.
I tested this by removing the ul and the background attached it self to the bottom of the tagline text.
Also, here's my CSS pertaining mobile portait view:
#media only screen and (max-width: 480px) {
.logo {
position: relative;
background-size:70%;
-webkit-background-size: 70%;
-moz-background-size: 70%;
-o-background-size: 70%;
margin-top: 30px;
}
h1 {
margin-top: -25px;
font-size: 21px;
line-height: 21px;
margin-bottom: 15px;
}
h2 {
font-size: 35px;
line-height: 35px;
}
.footer_mobile {
display: block;
margin-top: 20px;
margin-bottom: 0px;
}
li {
display: block;
font-size: 1.3em;
}
This used to not happen, but I guess I accidentally bugged it while trying to solve another issue.
After hours of trying different things, adding min-height: 100%; to the bottom of html under the { background:... } worked for me.
This works on Android 4.1.2 and iOS 6.1.3 (iPhone 4) and switches for desktop. Written for responsive sites.
Just in case, in your HTML head, something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
HTML:
<div class="html-mobile-background"></div>
CSS:
html {
/* Whatever you want */
}
.html-mobile-background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 125%; /* To compensate for mobile browser address bar space */
background: url(/images/bg.jpg) no-repeat;
background-size: 100% 100%;
}
#media (min-width: 600px) {
html {
background: url(/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
.html-mobile-background {
display: none;
}
}
Galaxy S3 havs a width of greater than 480px in either portrait or landscape view so I don't think those CSS rules will apply. You will need to use 720px.
Try add:
* { background:transparent }
right at the end & move your html { background:... } CSS after that.
This way you can see if there is a mobile footer div or any other element you created that is getting in the way, blocking the view.
Also I would try applying the background CSS to body rather than HTML. Hope you get closer to the answer.
Current solution would be to use viewport height (vh) to indicate the desired height. 100% did not work for Mobile Chrome. CSS:
background-size: cover;
min-height: 100%;