html - ¿Es posible establecer un fondo en una columna de arranque que sobredimensione el div?
css twitter-bootstrap (3)
Finalmente lo hice quitando el "contenedor" div.
Ahora tengo un gran problema en el móvil, que la imagen de fondo se pierde en el móvil.
Esta pregunta ya tiene una respuesta aquí:
- Extender la fila de arranque fuera del contenedor 4 respuestas
Necesito codificar el siguiente ejemplo:
Estoy codificando todo el sitio web usando bootstrap y el código de esta sección es este:
`<div class="bg_blue">
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-6">
<div id="login-form-box" class="form-box">
<div id="login-form-info" class="form-info">
<?php if (isset($content[''info'']) && !empty($content[''info''])) {
echo $content[''info''];
}
?>
</div>
<?php if (isset($error_message)) {
echo ''<div id="login-form-info" class="form-error">''.$error_message.''</div>'';
}
?>
<form id="login-form" class="form" action="<?php echo api_get_path(WEB_PATH)?>index.php" method="post">
<div>
<label for="login"><?php echo custompages_get_lang(''User'');?></label>
<input name="login" type="text" /><br />
<label for="password"><?php echo custompages_get_lang(''Password'');?></label>
<input name="password" type="password" /><br />
</div>
</form>
<div id="login-form-submit" class="form-submit" onclick="document.forms[''login-form''].submit();">
<span><?php echo custompages_get_lang(''LoginEnter'');?></span>
</div> <!-- #form-submit -->
<div id="links">
<?php if (api_get_setting(''allow_registration'') === ''true'') { ?>
<a href="<?php echo api_get_path(WEB_CODE_PATH); ?>auth/inscription.php?language=<?php echo api_get_interface_language(); ?>">
<?php echo custompages_get_lang(''Registration'')?>
</a><br />
<?php } ?>
<a href="<?php echo api_get_path(WEB_CODE_PATH); ?>auth/lostPassword.php?language=<?php echo api_get_interface_language(); ?>">
<?php echo custompages_get_lang(''LostPassword'')?>
</a>
</div>
</div>
</div>
<div class="col-md-6">
<!-- <img class="img" src="<?php echo api_get_path(WEB_PATH)?>/custompages/images/bgimage.png" alt="Background" /> -->
</div>
</div> <!-- /row -->
</div><!-- /container -->
</div>`
El problema es que no puedo establecer el fondo de la imagen en la segunda columna que cambia el tamaño y que cubre la totalidad de la columna md-6 a la derecha.
Aquí hay un pequeño boceto:
Si desea
apuntar solo a tamaños de pantalla medianos
, puede hacerlo de la siguiente manera.
dar
width: 120%
a su elemento img y se desbordará y tomará el tamaño completo a la izquierda.
fragmento de trabajo
.img {
width: 120%;
}
.col-md-6 {
background-color: green;
}
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bg_blue">
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-6">
<div id="login-form-box" class="form-box">
<div id="login-form-info" class="form-info">
</div>
<form id="login-form" class="form" action="" method="post">
<div>
<label for="login"></label>
<input name="login" type="text" /><br />
<label for="password"></label>
<input name="password" type="password" /><br />
</div>
</form>
<div id="login-form-submit" class="form-submit" onclick="document.forms[''login-form''].submit();">
<span></span>
</div>
<!-- #form-submit -->
<div id="links">
<a href="">
</a><br />
<a href="">
</a>
</div>
</div>
</div>
<div class="col-md-6">
<img class="img" src="https://www.w3schools.com/css/trolltunga.jpg" alt="Background" />
</div>
</div>
<!-- /row -->
</div>
<!-- /container -->
</div>
</body>
</html>
NOTA:
Si desea apuntar a todos los tamaños de pantalla, utilice
col-lg-* col-xs-* col-sm-*
es decir, diferentes clases de bootstrap sensibles.
¡Espero que esto ayude!
Actualizado 2018
Bootstrap 4 , el concepto sigue siendo el mismo: https://www.codeply.com/go/ffaQgse2SU
He respondido
preguntas similares
sobre esto, pero la tuya es un poco diferente debido a la
background-image
.
La mejor manera que he encontrado es usar un pseudo elemento CSS porque se ajusta junto con el derecho
col-md-6
y, por lo tanto, funciona de manera receptiva.
Demostración de Bootstrap 3: http://www.codeply.com/go/rWOGi4LrU1
.right {
z-index: 0;
color: #fff;
}
.right:before {
background-image:url(..);
content: '''';
display: block;
position: absolute;
z-index: -1;
width: 999em;
/* allow for bootstrap column padding */
top: -15px;
left: -15px;
bottom: -15px;
}
Consulte también: Obtenga dos columnas con diferentes colores de fondo que se extiendan hasta el borde de la pantalla