The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS – Display Flex is zooming in my background

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #243447

    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

    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

    &lt;!--end jumbotron--&gt;

    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.


Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.