Background Image Width Not 100% on Ipad

Background image width not 100% on iPad

I tried using the suggestion above i.e. min-width:1024px in the body tag but it did not work. After a lot of searching I discovered adding it to the html tag also works.

Example:

html {
min-width: 1024px;
}

Background image on Ipad do not display 100%

As stated here viewport units caniuse , using viewport units can ( and will ) cause problems in iOS because

iOS 7 Safari recalculates widths set in vh as vw, and heights set in vw as vh, when orientation changes.

iOS 7 Safari sets viewport unit values to 0 if the page has been left and is returned to after 60 seconds.

vh on iOS is reported to include the height of the bottom toolbar in the height calculation, and the width of the sidebar (bookmarks) in the vw width calculation.

So i suggest you use media queries and target different iOS resolution both for portrait and landscape. I know, it's a meticulous task but if you have a serious project for a serious customer , you have to deliver serious product

See here > iosres

For example

 /* iPad with portrait orientation.*/
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
.body{
height: 1024px;
}
}

/*iPad with landscape orientation.*/
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
.body{
height: 768px;
}
}

/*iPhone 5 with aspect ratio*/
@media screen and (device-aspect-ratio: 40/71) {
.body {
height: 500px;
}
}

or you could use jQuery or javascript , for example

$(".body").height($(window).height())

this will equal body height to window height

Background image not showing full width in Safari as well as iOS

Add this to .background:after

left:0,
right:0

/* Body Margin*/
body { margin: 0;}

/* Font family avenir-light*/
@font-face { font-family: 'avenir-light'; src: url('fonts/avenir-light.eot') format('eot'), url('fonts/avenir-light.woff') format('woff'), url('fonts/avenir-light.ttf') format('ttf');}

/* Background Div*/
.background { position: relative; width: 100vw; height: 100vh; display: -webkit-flex; /* Safari */ display: flex; justify-content: center; -webkit-justify-content: center; /* Safari 6.1+ */}

/* Background Div: after*/
.background:after { position: absolute; width: 100vw; height: 100vh; left:0; right:0; content: ''; background: url("https://www.ncl.com/sites/default/files/DestinationGalleries.Hawaii.SnorkelingBay900x400.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: #999; -webkit-animation: fadein 10s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 10s; /* Firefox < 16 */ -ms-animation: fadein 10s; /* Internet Explorer */ -o-animation: fadein 10s; /* Opera < 12.1 */ animation: fadein 10s; /*Fade In Animation*/}

/* Fade in animations */
@keyframes fadein { from { opacity: 0.2; } to { opacity: 1; }}

/* Firefox < 16 */
@-moz-keyframes fadein { from { opacity: 0.2; } to { opacity: 1; }}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein { from { opacity: 0.2; } to { opacity: 1; }}

/* Internet Explorer */
@-ms-keyframes fadein { from { opacity: 0.2; } to { opacity: 1; }}

/* Opera < 12.1 */
@-o-keyframes fadein { opacity: 0.2;}
to { opacity: 1;}

/* Foregraound div */
.foreground { margin-top: 20px; position: relative; width: 400px; height: 100px; background-color: #eaeaea; padding: 20px; border: 1px solid #555; border-radius: 10px; /*Fade In Animation*/ -webkit-animation: fadein 10s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 10s; /* Firefox < 16 */ -ms-animation: fadein 10s; /* Internet Explorer */ -o-animation: fadein 10s; /* Opera < 12.1 */ animation: fadein 10s; z-index: 1;}

/* Name Tag */
.name-tag { font-family: 'avenir-light'; text-align: center; font-size: 24px;}

/* Socail Media List*/
.social-media-list { list-style: none; display: -webkit-flex; /* Safari */ display: flex; -webkit-justify-content: space-around; /* Safari 6.1+ */ justify-content: space-around; padding: 0;}

/* Socail Media Item*/
.social-media-link img { height: 50px; width: 50px; transition: all 0.5s ease;}
.social-media-link img:hover { -ms-transform: scale(1.2); /* IE 9 */ -webkit-transform: scale(1.2); /* Safari */ transform: scale(1.2); /* Standard syntax */}

/* Copyright*/
.copyright { position: absolute; bottom: 0; right: 0; padding: 20px; color: #ccc;}
<!doctype html><html>
<head> <meta charset="UTF-8"> <link href="background.css" rel="stylesheet" type="text/css"></head>
<body> <section class="background"> <div class="foreground"> <div class="name-tag">Your Full Name </div> <ul class="social-media-list"> <li class="social-media-link"> <a href="https://twitter.com/"><img src="https://cdn3.iconfinder.com/data/icons/basicolor-reading-writing/24/077_twitter-128.png"></a> </li> <li class="social-media-link"> <a href="https://www.youtube.com/"><img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/youtube_circle-128.png"></a> </li> <li class="social-media-link"> <a href="https://in.linkedin.com/"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png"></a> </li> <li class="social-media-link"> <a href="https://www.instagram.com/"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png"></a> </li> </ul> </div> </section> <div class="copyright">© Copyright @ 2017</div></body>
</html>

background images don't show/are stretched on iPad or iPhone

You can either:

  • use a fixed position, with a background position center center: see "CSS background-size: cover replacement for Mobile Safari".

    This page refers to a background-attachment: fixed; as well, while remining use that viewport values (such as vh and vw) are technically supported on iOS 7 but simply do not work, hence the rodneyrehm/viewport-units-buggyfill project.
  • or (less elegant), use fixed size for media with a given size: see "Background image not displayed properly on iPad and iPhone"

CSS background images resizing incorrectly on iPad and iPhone.

I had the same issue, I used SCROLL instead of FIXED.

background-attachment:scroll;

CSS background-size: cover replacement for Mobile Safari

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="Sample Image">

CSS

#bg {
position: fixed;
top: 0;
left: 0;

/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;
}

Background image not displayed properly on iPad and iPhone

I've found the following solution to fix the ipad and iphone problem:

    /* fix for the ipad */
@media (min-device-width : 768px) and (max-device-width : 1024px) {
#home {
background-attachment: scroll;
/* default height landscape*/
height: 768px;
}

.ipadfix{
height: 300px !important;
}
img.ipadfix{
width:100% !important;
height:auto !important;
}
}
/* fix for the ipad */
@media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: portrait) {
#home {
/* default height landscape*/
height: 1024px;
}
}

/* fix for the iphone */
@media (min-device-width : 320px) and (max-device-width : 568px) {
#home {
background-attachment: scroll;
/* default height landscape*/
height: 320px;
}

.ipadfix{
height: 150px !important;
}
img.ipadfix{
width:100% !important;
height:auto !important;
}
}
/* fix for the iphone */
@media (min-device-width : 320px) and (max-device-width : 568px) and (orientation: portrait) {
#home {
/* default height landscape*/
height: 568px;
}
}

background-size: cover breaks in Safari but not Chrome

I think this has nothing to do with background-size:cover which is totally supported on Safari, and more to do with the fact that your web server is sending out the images with the wrong content-type. All images show up as txt in my console, while this doesn't happen on other websites.

Console Screenshot

Source: I (probably) have the same setup as you. Macbook Air, Safari, macOS High Sierra 10.13.6.



Related Topics



Leave a reply



Submit