Place an image top left corner CSS form

Question

Place an image top left corner CSS form

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (2 votes)

0

I have a form which has the property id="miformulario" , in which I ask for the data to access a web page.

I want this form to appear in the upper left corner of a icon / image .

What properties should I use, in addition to margin and padding ? Can you add the image from CSS or must be included in the HTML with < .img src="..." ... / >

Imagine that the image is called "images / proof.jpg" with a size height = 12 and width = 12

* {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	box-sizing: border-box;
}

body {
	/*background: #DEDEDE;*/
	display: flex; /*Centrado en la página tanto vertical como horizontal.*/
	min-height: 100vh;
	/*background-size: cover;*/
	background-repeat: no-repeat;
	background-size: 100%;
}

form{
	margin: auto;
	width: 50%;
	max-width: 500px;
	background: #F3F3F3;
	padding: 30px;
	border: 2px solid black;
}

h2{
	text-align: center;
	margin-bottom: 20px;
	color: rgba(0,0,0,0.5);
}

h4{
	text-align: center;
}

input{
	display: block;
	padding: 10px;
	width: 100%;
	margin: 30px 0;
	font-size: 14px;
}

input[type="submit"] {
	background: linear-gradient(#FFDA63, #FFB940);
	border: 0;
	width: 160px;
	color: brown;
	opacity: 0.8;
	cursor: pointer;
	border-radius: 20px;
	margin-bottom: 0;
}

.form-link{
	font-size: 14px;
}


a:hover  {
    color: red;
}

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Formulario de Login - Cliente</title>
		<link rel="stylesheet" href="css/estilos_iniciar_sesion.css">
		<script type="text/javascript" src="js/validar_iniciar_sesion_cliente.js"></script>
	</head>
	
	<body background="imagenes/fondo_campo2.jpg">
		<form name="miformulario" id="miformulario" action="logueo_cliente.php" method="POST" class="form" onsubmit="return validar_iniciar_sesion_cliente();">
			<h2>CLIENTE</h2>
			<h4>INICIAR SESIÓN</h4>
			<input type="text" placeholder="&#128272; Usuario" name="email" id="email" tabindex="1">
			<input type="password" placeholder="&#128272; Contraseña" name="password" id="password" tabindex="2">
			<div id="mensaje" align="center">
                <?php if(isset($_GET['error']) && $_GET['error'] == 'true'): ?>
                    <h4><p style="color:red;">¡Sus datos no son correctos!</p></h4>
                <?php endif; ?>
            </div>
			<div id="iniciar" align="center">
				<input type="submit" value="Iniciar sesión"><br/>
				<p class="form-link">¿Aún no tienes una cuenta? <a href="registrar.php">Regístrate aquí</a></p><br/>
				<p class="form-link"><a href="recuperar_contrasena.php">He olvidado mi contraseña</a></p><br/><hr/><br/>
				<p class="form-link"><img src="imagenes/entrar.jpg" height="10px" width="10px" alt="invitado"/>&nbsp;<a href="reservar.php">Entrar como invitado</a></p>
			</div>
		</form>
	</body>
</html>

css margin padding

asked by omaza1990 03.01.2018 в 18:39

source

3 answers

2

From the styles you can bring the image like this:

.idImagen {
   background-image: url("paper.gif");
   background-color: #cccccc;
}

and so you can put it in the machine:

.idImagen {
   background-image: url("paper.gif");
   position: absolute; 
   top: 0; 
   left: 0;
}

and if you work with a box model, it's easier. link

answered by 03.01.2018 в 18:45

2

to do so, you can help with pseudo elements :: before or :: after .

Simply to #miformulario, we add a position: relative and then add the pseudo like this:

#miformulario::before{
  /*lo dejamos vacio, pero lo ponemos, es importante.*/
  content: ''; 
  /*para que se comporte como un div*/
  display: block; 
  /*O la medida que quieras para el icono*/
  width: 50px; height: 50px; 
  /*la imagen del icono*/
  background-image: url('imagen.png'); 
  /*Toma todo el ancho del pseudoelemento y 
  * automáticamente la altura por defecto de la imagen*/
  background-size: 100% auto; 
  /*para posicionarlo en donde queramos*/
  position: absolute; 
  top: 0; left: 0; 
  /*para posicionarlo en la esquina superior izquierda*/
  /*Puedes cambiar left por right y top por bottom, 
  *depende de donde lo quieras poner*/
}

This way if you add or modify the html, you can add an image with only aesthetic purposes. The other thing is that if the image is already trimmed to the final size, you can discard the background-image and background-size properties and replace the content property: ''; that leave empty before and add the image at once: content: url ('image.png') ;

I leave an example with your same code. The new styles are below yours.

* {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	box-sizing: border-box;
}

body {
	/*background: #DEDEDE;*/
	display: flex; /*Centrado en la página tanto vertical como horizontal.*/
	min-height: 100vh;
	/*background-size: cover;*/
	background-repeat: no-repeat;
	background-size: 100%;
}

form{
	margin: auto;
	width: 50%;
	max-width: 500px;
	background: #F3F3F3;
	padding: 30px;
	border: 2px solid black;
}

h2{
	text-align: center;
	margin-bottom: 20px;
	color: rgba(0,0,0,0.5);
}

h4{
	text-align: center;
}

input{
	display: block;
	padding: 10px;
	width: 100%;
	margin: 30px 0;
	font-size: 14px;
}

input[type="submit"] {
	background: linear-gradient(#FFDA63, #FFB940);
	border: 0;
	width: 160px;
	color: brown;
	opacity: 0.8;
	cursor: pointer;
	border-radius: 20px;
	margin-bottom: 0;
}

.form-link{
	font-size: 14px;
}


a:hover  {
    color: red;
}

#miformulario{
  position: relative;
}

#miformulario::before{
  content: '';
  display: inline-block;
  background-image: url('https://resnickscity.files.wordpress.com/2009/06/firefox-habemus-icon.jpg');
  background-size: 100% auto;
  width: 50px;
  height: 50px;  
  position: absolute;
  top: 0;
  right: 0;
}

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Formulario de Login - Cliente</title>
		<link rel="stylesheet" href="css/estilos_iniciar_sesion.css">
		<script type="text/javascript" src="js/validar_iniciar_sesion_cliente.js"></script>
	</head>
	
	<body background="imagenes/fondo_campo2.jpg">
		<form name="miformulario" id="miformulario" action="logueo_cliente.php" method="POST" class="form" onsubmit="return validar_iniciar_sesion_cliente();">
			<h2>CLIENTE</h2>
			<h4>INICIAR SESIÓN</h4>
			<input type="text" placeholder="&#128272; Usuario" name="email" id="email" tabindex="1">
			<input type="password" placeholder="&#128272; Contraseña" name="password" id="password" tabindex="2">
			<div id="mensaje" align="center">
                <?php if(isset($_GET['error']) && $_GET['error'] == 'true'): ?>
                    <h4><p style="color:red;">¡Sus datos no son correctos!</p></h4>
                <?php endif; ?>
            </div>
			<div id="iniciar" align="center">
				<input type="submit" value="Iniciar sesión"><br/>
				<p class="form-link">¿Aún no tienes una cuenta? <a href="registrar.php">Regístrate aquí</a></p><br/>
				<p class="form-link"><a href="recuperar_contrasena.php">He olvidado mi contraseña</a></p><br/><hr/><br/>
				<p class="form-link"><img src="imagenes/entrar.jpg" height="10px" width="10px" alt="invitado"/>&nbsp;<a href="reservar.php">Entrar como invitado</a></p>
			</div>
		</form>
	</body>
</html>

answered by 03.01.2018 в 20:40

Use two variables in the output of a bash script How to know if the first character of a String is an int?

score 3 · Accepted Answer

The online styles in the image can be put in the css, this is just an example.

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  box-sizing: border-box;
}

body {
  /*background: #DEDEDE;*/
  display: flex;
  /*Centrado en la página tanto vertical como horizontal.*/
  min-height: 100vh;
  /*background-size: cover;*/
  background-repeat: no-repeat;
  background-size: 100%;
}

form {
  margin: auto;
  width: 50%;
  max-width: 500px;
  background: #F3F3F3;
  padding: 30px;
  border: 2px solid black;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.5);
}

h4 {
  text-align: center;
}

input {
  display: block;
  padding: 10px;
  width: 100%;
  margin: 30px 0;
  font-size: 14px;
}

input[type="submit"] {
  background: linear-gradient(#FFDA63, #FFB940);
  border: 0;
  width: 160px;
  color: brown;
  opacity: 0.8;
  cursor: pointer;
  border-radius: 20px;
  margin-bottom: 0;
}

.form-link {
  font-size: 14px;
}

a:hover {
  color: red;
}

<!DOCTYPE html>
<html lang="es">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Formulario de Login - Cliente</title>
  <link rel="stylesheet" href="css/estilos_iniciar_sesion.css">
  <script type="text/javascript" src="js/validar_iniciar_sesion_cliente.js"></script>
</head>

<body background="imagenes/fondo_campo2.jpg">
  <form name="miformulario" id="miformulario" action="logueo_cliente.php" method="POST" class="form" onsubmit="return validar_iniciar_sesion_cliente();">
  <!--aqui coloco la imagen con sus estilos-->
  <img src="https://placeimg.com/640/480/any" style="height:32px; width:32px; top:0; left=0; padding-top:0;" >
    <h2>CLIENTE</h2>
    <h4>INICIAR SESIÓN</h4>
    <input type="text" placeholder="&#128272; Usuario" name="email" id="email" tabindex="1">
    <input type="password" placeholder="&#128272; Contraseña" name="password" id="password" tabindex="2">
    <div id="mensaje" align="center">
      <?php if(isset($_GET['error']) && $_GET['error'] == 'true'): ?>
      <h4>
        <p style="color:red;">¡Sus datos no son correctos!</p>
      </h4>
      <?php endif; ?>
    </div>
    <div id="iniciar" align="center">
      <input type="submit" value="Iniciar sesión"><br/>
      <p class="form-link">¿Aún no tienes una cuenta? <a href="registrar.php">Regístrate aquí</a></p><br/>
      <p class="form-link"><a href="recuperar_contrasena.php">He olvidado mi contraseña</a></p><br/>
      <hr/><br/>
      <p class="form-link"><img src="imagenes/entrar.jpg" height="10px" width="10px" alt="invitado" />&nbsp;<a href="reservar.php">Entrar como invitado</a></p>
    </div>
  </form>
</body>

</html>