Error without solution Responsive background with boostrap

Question

Error without solution Responsive background with boostrap

Navigation

#1 by (4 votes)
#2 by (1 votes)

3

I have a page to which I put a background with CSS, and adapt it so that it looks 100% wide and long. When you include text on it and see it on a cell phone, it gets out of hand.

I copy part of the code

HTML

<section id="banner">
    <div class="col-md-2">
    </div>
    <div class="header-content col-md-8">
        <p style="font-size:225%">SOMOS LO QUE NECESITAS PARA TENER PRESCENCIA EN INTERNET</p>
        <hr width="100%">
        <p style="font-size:150%">El crecimiento de su negocio es nuestro principal objetivo!</p>
    </div>
    </div>
    <div class="col-md-2">
    </div>
</section>

CSS

#banner {
    width: 100%;
    height: 120%;
    position: center;
    background-image: url(../img/crecer.jpg);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 15%;
}

The image is 1366 x 800 px in size. In addition, the background image moves and makes all the content leave the area.

html5 css3 bootstrap

asked by Chris Orea 15.08.2016 в 03:05

source

2 answers

1

Use class col-sm , add this to the head,

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Use class img-responsive

Try this way, I do not know if it's what you want

html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="app.css">
</head>
<body>
    <section id="banner">
        <div class="row">
            <div class="col-md-2">
            </div>
            <div class="header-content col-md-8">
                <p style="font-size:225%">SOMOS LO QUE NECESITAS PARA TENER PRESCENCIA EN INTERNET</p>
                <hr width="100%">
                <p style="font-size:150%">El crecimiento de su negocio es nuestro principal objetivo!</p>
            </div>
        </div>
        <div class="col-md-2">
        </div>
    </div>
</section>
</body>
</html>

css:

#banner {
    width: 100%;
    height: 100%;
    position: center;
    background-image: url(crecer.png);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 15%;
}

answered by 15.08.2016 в 05:28

SignalR and mobile devices Is it possible to initialize an array of x length assigning values in C ++?

score 4 · Accepted Answer

Hello! Your CSS #banner has a width:120% and a position: center that does not exist in CSS.

html, body{
    height:100%;
  }

#banner{
  background-image: url("http://mexicocarrental.mx/wp-content/uploads/2015/07/manzanillo-04.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 100%;
}

#banner p{
  text-align:center;
  font-size:20px;
  }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>
    <section id="banner">
      <div class="header-content col-md-8">
          <p>SOMOS LO QUE NECESITAS PARA TENER PRESENCIA EN INTERNET</p>
          <p>El crecimiento de su negocio es nuestro principal objetivo!</p>
      </div>
    </section>
  </body>
</html>

To be able to do what you want it is necessary to set a height of 100% in the html and body tags. And use the following CSS properties, which you can read here :

background-image: url("http://mexicocarrental.mx/wp-content/uploads/2015/07/manzanillo-04.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;