How do I make the background image display on iPhone as it displays on Android?
HTML
<div class="bgimg-1">
<div class="hometoptext ">
<h1 class="text-center">
Africa's First Online Business Lender
</h1>
<div>
<h3 class="thin">Grow faster with South Africa's most innovative online funder</h3>
</div>
<div class="text-center">
<button class="btn btn-primary" (click)="applyNow()">APPLY NOW</button>
</div>
</div>
<div class="bottom-arrow text-center">
</div>
</div>
Background Image not displaying on iPhone
CSS
.bgimg-1 {
background-image: url("img/main_pic2.png");
color: white;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-color: #999;
position:relative;
width:100%;
min-height: 100vh;
top: 0;
}
Image on Android:
Image on iPhone:
iOS Safari has buggy behavior with background-size: cover; +
background-attachment: fixed;
Safari (OS X and iOS) and Chrome do not support background-size: 100%
px; in combination with SVG images, it leaves them at the
original size while other browsers stretch the vector image correctly
while leaving the height at the specified number of pixels.
iOS Safari has buggy behavior with background-size: cover; on a
page's body.
macOS Safari 10 is having frame rate issue with background-size.
Android 4.3 browser and below are reported to not support percentages
in background-size
Ref : Link
A possible solution to this issue is still a pure CSS Fallback
CSS Tricks has three great methods, the latter two are fall backs for when CSS3's cover doesn't work.
HTML
<img src="img/main_pic2.png" id="bg" alt="">
CSS
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;
}
The background image is not supported on iOS devices.
Proof link: https://caniuse.com/?search=background-url
Related
This question already has answers here:
Background image not showing on iPad and iPhone
(15 answers)
Closed 3 years ago.
The background picture does not show when I open it on my iPhone or anyone else. On Android devices, it works fine and on a computer in Safari, it also works without a problem.
HTML
<section id="home" class="header">
<div class="v-middle">
<div class="container">
<div class="row">
<div class="caption">
<h5>Hello</h5>
<h1 class="headline-Text">I Am <span id="animated- Text"></span></h1>
</div>
</div>
</div>
</div>
</section>
CSS
#home {
background: url("../images/header-background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
}
background-attachment: fixed has huge performance issue read here.
Browser needs to repaint the image in a new location relative to its DOM elements everytime we scroll, this re-paininting costs more for mobile browsers and that's why most of them has disabled this feature.
I will suggest to use media query and change your rule to background-attachment: scroll; for mobile devices.
If your project still need this feature on mobile devices, consider using a plugin like Scrollmagic
As #ram pandey suggested, I used media queries:
#media only screen and (max-width: 600px) {
#home {
background: #000;
background: url("../images/header-background.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
}
}
Trying to fix the issue with the background image for my title div to make it fully responsive.
Issue is: the size of the background image blows up on iPad Pro in landscape.
It works correctly on desktops, also shows up correctly in Chrome Dev tools for responsive/iPad Pro landscape. The only instance I currently observe this issue is - iPad Pro landscape (both Safari and Chrome).
See code and screenshots attached.
Website: rita.im
Size of title.jpg file is 2464 × 1632
CSS for the Div
`.bgimage {
position: relative;
background-image: url(../img/title.jpg);
background-repeat: no-repeat;
background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-position: top center;
width: 100%;
height:100vh;
bottom: 0;
overflow: hidden;
background-attachment: fixed;
background-color: #fff;
margin: 0;
padding: 0;
}`
Chrome Dev tools preview
Actual iPad Pro landscape display
Thank you! Will post answer if I resolve the issue myself first.
background-attachment: fixed;
, which was there for "parallax" effect seems to have been the problem. Without it, background images display at correct scale. Will have to find a way to add parallax for banner on iOS with JavaScript.
I have the following problem: I have a full screen image slider one my website which is responsive. The image size always adapts on the window size. My solution is as follows:
.picture {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
background-position: center center;
position: relative;
overflow: hidden;
min-width: 100%;
}
<div class="owl-carousel slides">
<div class="slide">
<div class="picture" style="background-image: url('myURL')"></div>
</div>
</div>
The problem is that you can see the other content of the page at the sliders position when loading the page. The reason is that the picture container has no width when the page is loading. The width is calculated based on the image width. For a better understanding: I am loading the page, then for a short moment I can see the div content at the top and then the slider is loaded and the content is below the slider where it should be.
Does anyone have a solution?
Thanks in advance!
You could try the CSS3 Viewport Unit.
.picture {
width: 100vh;
height: 100vh;
}
Browser support is okay, except IE.
i've used search but i haven't found proper answer for my question. I have web-page with 4 divs and 4 different background images with them. Every div has width property set to 100% and fixed height of 790px. The problem is that background images doesn't rescale properly on big screens (1200 and more).
HTML:
<body>
<div id="screen1">
<div id="screen-1-wrapper"></div>
</div>
<div id="screen2">
<div id="screen-2-wrapper"></div>
</div>
<div id="screen3">
<div id="screen-3-wrapper"></div>
</div>
<div id="screen4">
<div id="screen-4-wrapper"></div>
</div>
</body>
css:
#screen1{
width:100%;
height: 790px;
background-image: url(example);
background-size: 100% 100%;
}
#screen-1-wrapper{
width: 960px;
}
/* difers only background-image */
I've tried background-size: cover and contain but it didn't work for me.
How can I solve that problem?
background-size: cover
would usually be my solution. Have you tried using it with the full vendor prefixes, e.g.
-moz-background-size: cover;
-webkit-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
Failing that, setting:
background-width: 100%;
background-height: auto;
min-height: 790px;
would rescale the image responsively, but ensure it never dropped below the boundaries of the containing element.
try this in your css:
background-size: 100% 100%;
if you use that the background image should be equal to the size and position of the div it's tied to in any resolution
This is probable one of the most basic questions on this website, hence I expect some quick answers. When I try to set a background image for my website I edit the image in paint and I constantly have to edit the image pixel for pixel in order to make the image cover up every single area of the website. Is there any standards or html codings that can automatically set resize the image to the exact size of the website?
You need to do something like this:
/*************************************************************************************
by forcing `height: 100%` in the html and body tag will make sure there are no white areas in vicinity (this is optional though, use it only if you need it)
*************************************************************************************/
html,
body{
height: 100%;
}
/*************************************************************************************
by using `background-size: cover;`, you will make sure the image will cover everything
*************************************************************************************/
body{
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url("your_image.jpg");
}
Also, consider using -moz-, and -webit- prefixes to make sure it works in older browser versions of webkit and gecko based browsers.
In your CSS stylesheet you can use the following code
(where images/bg.jpg is the path for your background image)
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Works in:
Safari 3+, Chrome, IE 9+, Opera 10+, Firefox 3.6+
Are you familiar with css? Add the background as image:
<img src="yoursource.png" class="yourclass" />
and use this css snippet:
.yourclass {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -100; /* puts image into the background */
}
I'm assuming you're setting the background image on the body but if not you should be. use background-size: cover; which will stretch the image to fit