Problem with Background Image using Bootstrap 3

Asked

Viewed 434 times

3

I’m having trouble displaying the background image when website is accessed by Chrome on smartphone, on PC usually displays (responsive).

HTML:

<!DOCTYPE HTML>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Gazela Fotos</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/teste.css" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
        <link href="imagens/favicon.ico" rel="shortcut icon" type="image/x-icon">
    </head>
    <body class="background-home" onload="inicializaPagina();">
        <div class="container-fluid">
            <nav class="navbar navbar-inverse navbar-fixed-bottom menu">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#teste" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand menu-titulo" href="#">Teste</a>
                    </div>
                    <div id="teste" class="collapse navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="#" class="menu-opcoes menu-selecionado">Home</a></li>
                            <li><a href="#" class="menu-opcoes">Sobre</a></li>
                            <li><a href="#" class="menu-opcoes">Contato</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/teste.js"></script>
    </body>
</html>

CSS:

.background-home {
    background: url("../imagens/background-home.jpg") no-repeat center top fixed;
    background-size: cover;
}

.redes-sociais {
    display: none;
    width: 100%;
    margin-top: 15px;
    text-align: right;
}

.menu {
    display: none;
    background-color: rgba(0,0,0,0.7);
}

.menu-titulo {
    font-family: 'Ubuntu', sans-serif;
    font-size: 26px;
    color: #FFF !important;
}

.menu-opcoes {
    font-size: 16px;
}

.menu-selecionado {
    color: #FFF600 !important;
}

Because the background image is not displayed responsive when the site is accessed by smartphone, someone could give me a light ?

css html5 image bootstrap-3 background

1 answer

0

From what I saw in the kennel cover has support only in version 49 of Chrome for Android.

Lists supported browsers: http://caniuse.com/#feat=Object-fit

I believe that the best thing to do in this case is to use the properties of suppliers known as vendor-prefix to ensure greater compatibility.

Example:

html {
  background: url(http://i.imgur.com/tENv1w4.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Reference: How can I resize an image so it Fits the entire window?

Browser other questions tagged css html5 image bootstrap-3 background

You are not signed in. Login or sign up in order to post.