CSS – Display Flex is zooming in my background

[andyjhoey]

If anyone out there knows what my solution is for this that would be great!
the image is fine on desktop but and mobile device have flexbox seems to zoom right into the background image

my clients website http://www.unclean.co.nz

has a jumbo tron section with css as:

#jumbotron {
padding: 6rem 0;
margin: 0 auto;
height: 100%;
background: whitesmoke url(/assets/images/banner.png) fixed no-repeat center center;
background-size: cover !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
align-items: center;
display: flex;

---

& html as:

<section id=”jumbotron”>

<h1>Hello! We are <br>Unclean LTD.</h1>
<h2 class=”lead”>commercial & residential<br> cleaning services</h2>
Get a Free Quote

</section>
<!--end jumbotron-->

[timbarden]

Not seeing an issue here. On mobile you’re only seeing the central part of the image because it is set to cover the entire background (which is no bad thing), so assuming you’re viewing in portrait the image will naturally only show the central portion. Flexbox has nothing to do with it.

Tim

[Author]

Posts