Topic: FULL BACKGROUND IMAGE TEMPLATE UNSUPPORTED IN MOBILE
Hi Support,
I'm working on new project and really like the Full Background Image template offered as part of your Freebies section.
This is the template I have selected:
https://mdbootstrap.com/freebies/full-background-image-template/
I have recreated the page and have resourced the latest builds of MDB and Bootstrap asset files and have propped these on my server, however, the Full Background Image seems to be supported on larger viewports. The Full Background Image gets dropped on my iPhone 7 (Safari).
I cannot seem to repro on for testing at Quirktools, but wanted to know if there's something I'm missing. I'd like to get the Full Background Image accessible for smaller viewports and smartphone displays.
Here's a screen capture from my iPhone:
<img src=" http://gridinteractive.com/iole/images/screenshots/iole-home-page-mobile.png" alt="Screen shot of page on iPhone 7" />
Here's the source:
HTML CSS:
.view {
background: url("img/cards/card-clear-light.png")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
HTML BODY:
<!--Mask--> <div class="view hm-stylish-slight"> <div class="full-bg-img flex-center"> <ul> <li> <h4 class="display-4 display-heading wow fadeInDown" data-wow-delay="0.2s">F(l)at</h4><hr /></li> <li> <span class="h4 wow fadeInDown">NAPOLEON GALLERY<br />Philadelphia, PA<br /><hr /><em>04.01 through 05.01 2017</em></span> </li> <li> <a class="btn btn-lg btn-outline-white" href="exhibitions/flat.htm"><i class="fa fa-clone left"></i> View project</a> </li> </ul> </div> </div>
Test Page propped here:
http://gridinteractive.com/iole/default.htm
Test Page at Quirktools > Screenfly:
http://quirktools.com/screenfly/#u=http%3A//gridinteractive.com/iole/default.htm&w=1024&h=600&a=1
Any help much appreciated!
Thank you.
Eric
Seattle, Washington
surface2air commented 7 years ago
Hi Marta, Thanks in advance! I look forward to the solution. Eric Seattle, Washington
Hi Eric,
try this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<title>
Material Design Bootstrap
</title>
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Template styles -->
<style rel="stylesheet">
/* TEMPLATE STYLES */
html,
body,
.view {
height: 100%;
}
/* Navigation*/
.navbar {
background-color: transparent;
}
.scrolling-navbar {
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.top-nav-collapse {
background-color: #1C2331;
}
footer.page-footer {
background-color: #1C2331;
margin-top: -1px;
}
@media only screen and (max-width: 768px) {
.navbar {
background-color: #1C2331;
}
}
.navbar .btn-group .dropdown-menu a:hover {
color: #000 !important;
}
.navbar .btn-group .dropdown-menu a:active {
color: #fff !important;
}
/*Call to action*/
.flex-center {
color: #fff;
}
.view {
background: url("http://gridinteractive.com/iole/img/cards/card-clear-light.png")no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media (min-width: 1025px) {
.view {
background: url("http://gridinteractive.com/iole/img/cards/card-clear-light.png")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
</style>
</link>
</link>
</link>
</meta>
</meta>
</meta>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<div class="container">
<a class="navbar-brand" href="#">
Navbar
</a>
<button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home
<span class="sr-only">
(current)
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
<li class="nav-item btn-group">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" id="navbarDropdownMenuLink">
Dropdown
</a>
<div aria-labelledby="navbarDropdownMenuLink" class="dropdown-menu dropdown-primary">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
<a class="dropdown-item" href="#">
Something else here
</a>
</div>
</li>
</ul>
<form class="form-inline">
<input aria-label="Search" class="form-control mr-sm-2" placeholder="Search" type="text">
</input>
</form>
</div>
</div>
</nav>
<!--/.Navbar-->
<!--Mask-->
<div class="view hm-stylish-slight">
<div class="full-bg-img flex-center">
<ul>
<li>
<h4 class="display-4 display-heading wow fadeInDown" data-wow-delay="0.2s">
F(l)at
</h4>
<hr/>
</li>
<li>
<span class="h4 wow fadeInDown">
NAPOLEON GALLERY
<br/>
Philadelphia, PA
<br/>
<hr/>
<em>
04.01 through 05.01 2017
</em>
</span>
</li>
<li>
<a class="btn btn-lg btn-outline-white" href="exhibitions/flat.htm">
<i class="fa fa-clone left">
</i>
View project
</a>
</li>
</ul>
</div>
</div>
<!--/.Mask-->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!--Footer-->
<footer class="page-footer center-on-small-only">
<!--Footer links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-lg-3 col-md-6 ml-auto">
<h5 class="title mb-3">
<strong>
About material design
</strong>
</h5>
<p>
Material Design (codenamed Quantum Paper) is a design language developed by Google.
</p>
<p>
Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS,
and JS framework - Bootstrap.
</p>
</div>
<!--/.First column-->
<hr class="w-100 clearfix d-sm-none">
<!--Second column-->
<div class="col-lg-2 col-md-6 ml-auto">
<h5 class="title mb-3">
<strong>
First column
</strong>
</h5>
<ul>
<li>
<a href="#!">
Link 1
</a>
</li>
<li>
<a href="#!">
Link 2
</a>
</li>
<li>
<a href="#!">
Link 3
</a>
</li>
<li>
<a href="#!">
Link 4
</a>
</li>
</ul>
</div>
<!--/.Second column-->
<hr class="w-100 clearfix d-sm-none">
<!--Third column-->
<div class="col-lg-2 col-md-6 ml-auto">
<h5 class="title mb-3">
<strong>
Second column
</strong>
</h5>
<ul>
<li>
<a href="#!">
Link 1
</a>
</li>
<li>
<a href="#!">
Link 2
</a>
</li>
<li>
<a href="#!">
Link 3
</a>
</li>
<li>
<a href="#!">
Link 4
</a>
</li>
</ul>
</div>
<!--/.Third column-->
<hr class="w-100 clearfix d-sm-none">
<!--Fourth column-->
<div class="col-lg-2 col-md-6 ml-auto">
<h5 class="title mb-3">
<strong>
Third column
</strong>
</h5>
<ul>
<li>
<a href="#!">
Link 1
</a>
</li>
<li>
<a href="#!">
Link 2
</a>
</li>
<li>
<a href="#!">
Link 3
</a>
</li>
<li>
<a href="#!">
Link 4
</a>
</li>
</ul>
</div>
<!--/.Fourth column-->
</hr>
</hr>
</hr>
</div>
</div>
<!--/.Footer links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<h4 class="mb-5">
Material Design for Bootstrap
</h4>
<ul>
<li>
<h5>
Get our UI KIT for free
</h5>
</li>
<li>
<a class="btn btn-danger" href="https://mdbootstrap.com/getting-started/" rel="nofollow" target="_blank">
Sign up!
</a>
</li>
<li>
<a class="btn btn-default" href="https://mdbootstrap.com/material-design-for-bootstrap/" rel="nofollow" target="_blank">
Learn more
</a>
</li>
</ul>
</div>
<!--/.Call to action-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright:
<a href="https://www.MDBootstrap.com">
MDBootstrap.com
</a>
</div>
</div>
<!--/.Copyright-->
</hr>
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script src="js/jquery-3.1.1.min.js" type="text/javascript">
</script>
<!-- Bootstrap dropdown -->
<script src="js/popper.min.js" type="text/javascript">
</script>
<!-- Bootstrap core JavaScript -->
<script src="js/bootstrap.min.js" type="text/javascript">
</script>
<!-- MDB core JavaScript -->
<script src="js/mdb.min.js" type="text/javascript">
</script>
</body>
</html>
Best,
Marta
surface2air commented 7 years ago
Hi Marta, Thanks! I tried it and it seems to test great in Quirktools > Screenfly, but I am wondering now if this is an issue related to current versions of iOS and Android. It appears in the source code that you offered two versions of the .view class in a media query on breakpoint: .view { background: url("img/cards/card-clear-light.png")no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (min-width: 1025px) { .view { background: url("img/cards/card-clear-light.png";)no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } Which doesn't seem to show up for the smartphone display. I have an iPhone 7 and checked the following page on both Chrome and Safari: http://gridinteractive.com/iole/default.htm Thanks! Eric
Hi,
did you try remove class .fixed from here:
.view {
background: url(“img/cards/card-clear-light.png”)no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
and just life the same class here:
@media (min-width: 1025px) {
.view {
background: url(“img/cards/card-clear-light.png”;)no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
Best,
Marta
surface2air commented 7 years ago
Hi Marta, Wow! What a difference that makes! I removed the "fixed" class from the first class instance of "view" and on mobile, the hero image appears. It looks great now! Thank you! Eric
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
jaysenbarlow pro commented 7 years ago
Came here looking for the same solution, I'll report back if I find anything