Ayuda como puedo centrar esta imagen de atras? osea centrar una imagen detras

Iniciado por ReAdriel, 8 Octubre 2018, 12:25 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

ReAdriel

8 Octubre 2018, 12:25 PM Ultima modificación: 8 Octubre 2018, 12:32 PM por ReAdriel
Código (html4strict) [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
<title>ChiquilloFav</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/loading.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<link rel="stylesheet" href="normalize.css">
<link rel="shortcut icon" href="img/icono.ico">
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<style>.heading { color: rgb(213,224,231,.8);}</style>
<style>.h3 { color: #3498DB;}</style>
<style>.h2 { color: black;}</style>
<style>.contenedor {display: flex;justify-content: center;align-items: center;}</style>
<style>.contenedor2 {display: flex;justify-content: center;align-items: center;}</style>
<style>.contenedor3 {display: flex;justify-content: center;align-items: center;}</style>

</head>
<body>
<div class="jm-loadingpage"></div>
<header>
<div class="contenedor">
<nav class="menu">
<a href="#" class="sobre"><i class="fa fa-user-circle" aria-hidden="true"></i>
Sobre CF</a><a href="#" class="estudio" ><i class="fa fa-graduation-cap" aria-hidden="true"></i>
Estudios</a><a href="#" class="anime"><i class="fa fa-slideshare" aria-hidden="true"></i>
Anime</a><a href="#" a><i class="fa fa-usd" aria-hidden="true"></i>
Ganar Dinero</a><a href="#"><i class="fa fa-exchange" aria-hidden="true"></i>
Exchange</a><a href="#" class="aprender"><i class="fa fa-github" aria-hidden="true"></i>
Aprender a Programar</a><a href="#"class="chat"><i class="fa fa-comments-o" aria-hidden="true"></i>
Chat</a><a href="#" class="contactar"><i class="fa fa-at" aria-hidden="true"></i>
Contactar</a>
</nav>
</div>
</header>

<!-- PORTADA -->

<div class="fond">
<img src="img/portada.png" alt="chiquillofav" class="portada">
</div>
   


<div class="barra" ></div>
<!-- contenido -->
<div class="contain">


<div class="info-interna">
<div class="welcome"><h4 class="cont">BIENVENIDO</h4></div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="img-muestra"><img src="img/portada2.png" alt="chiquillofav"class="imagen- muestra" style="width:100%; "></div>
<div class="post"><p style="color:black;">Hola a todos, Bienvenidos a mi blog, aquí estare compatiendo multiples ,mejor dicho infinidades de cosas desde enseñarte el arte de la programacion hasta ganar dinero extra con ella por Internet... No solo ganaras con lo aprendido sino tambien te estare compartiendo maravillosos metodos de obtener dinero facil y seguro a travez de intenet ,y yo estoy aqui para asegurar que siempre tengas la informacion mas confiable y actualizada. ¿Estás preparado para aprender y ganar dinero desde casa?. Manos a la obra.</p></div>

<h3 class="h3">¿Enserio se puede ganar dinero por Internet?</h3>

<div class="img-muestra"><img src="img/img-1.png" alt="chiquillofav"class="imagen- muestra" style="width:100%; "></div>

<p class="post">La verdad ganar dinero por el medio de Internet a estado presente desde años ,pasa que las personas no tienen o no tenian conocimiento los multiples trabajos que se pueden conseguir por internet .... Hasta tu mismo puedes ofrecer trabajo en Internet ,a esto se le llama Freenlace , consiste en que tu prestas tus conocimientos a alguna emprese,compañia hasta a un usuario y ellos te daran un pago por tu servicio, por eso cree este blog para ti .. Para darte mis conocimientos en programacion y otras habilidades para que tu las desarrolles y puedas ofrecer tu servicio y tener un pago por ello.</p>

<h3 class="h3">Pero quiero ganar dinero Ya! </h3>

<div class="img-muestra"><img src="img/img-2.2.png" alt="chiquillofav"class="imagen- muestra" style="width:100%; "></div>

<p class="post">Tranquilo todos comenzamos con animos de querer trabajar ya mismo,para eso cree este blog ,sino quieres esperar a ganar dinero te tengo buenas noticias ¡Desde ya puedes ganar dinero a travez de las paginas que estare dejando aqui mismo dentro del blog en el apartado <a href="#"><strong>>>>Ganar Dinero<<<<</strong></a></p>

<h3 class="h3">¿Que necesito para empezar a trabajar?</h3>

<div class="img-muestra"><img src="img/img-4.png" alt="chiquillofav"class="imagen- muestra" style="width:100%; "></div>

<p class="post">Lamento descirte ahora mismo que para poder empezar a trabajar....¡ No necesitas nada! solo animos de empeza a trabajar y dedicacion ,mientras mas dedicacion le des a cada una de las pagina ,mas dinero obtendras ...Imaginate darle la dedicacion necesaria a cada una de las pagina y que por lo menos trabajes con 3 de ellas y empieces a ver ganancias diaria de 5 $, 8 $ y hasta 10 $ diario ,podrias salir y comprar el Iphone que te hace falta ,en mucho menos de 1 mes y te quedaria ganacias.. </p>

<h3 class="h3">¿Como podre retirar ese dinero ganado?</h3>

<div class="img-muestra"><img src="img/img-3.png" alt="chiquillofav"class="imagen- muestra" style="width:100%; "></div>
<p class="post">Posiblemente ya estes pensando ¿Como se supone que recibire ese dinero que me dice que ganare?, primeramente los retiros los puedes hacer hacias Paypal,Payza,Payeer,Bitcoin y otras cryptomonedas ... ahora te preguntaras ¿ Aja y ahora que hago ,si aqui en mi pais no se usa Dolar?,No te alarmes ,si eres de Venezuela me agrada decir que yo y mi equipo estamos especializados en compra de Dolares y pagarlos a buen precio , solo entra al apartado de <a href="#"><strong>>>>>Exchange<<<<</strong></a> y podras cambiar tus Dolares por Bolivares Bs.S</p>
</div>
<div class="aside">
<div class="fb-page" data-href="https://www.facebook.com/chiquillofav/" data-tabs="timeline" data-width="300" data-height="550" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/chiquillofav/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/chiquillofav/">Chiquillo Fav</a></blockquote></div>
</div>
</div>
<!--Script para loading  -->
    <script>
$(document).ready(function() {
$(".jm-loadingpage").fadeOut("slow");;
});
</script>
<!--Script para loading  -->
</body>
</html>
[code=css]
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
padding: 0;
margin: 0;
}
body {
background-color: #fff;
font-family: "Open Sans", Sans-serif;
font-size: 16px;
background-color: #eaf1f5;
}

.contenedor {
width: 100%;
max-width: 1380px;
margin: auto;
overflow: hidden;
text-align: center;
}

/*----- ----- HEADER ------- -----*/
header {
background-repeat: no-repeat;
background-position: center;
max-height: 600px;
background-color: #60b2e8;
}

header .menu {
text-align: left;
margin-left: 20px;
background-color: rgba(50,150,210,);

}

header .menu a{
display: inline-block;
padding: 10px 10px;
text-decoration: none;
/*border: 2px solid transparent;*/
font-size: 1em;
color: rgba(255,255,255,.7);
}
header .menu a:hover{
background: #0cc7c4;
}

.fond{
background:url('../img/lol.png');
background-repeat: no-repeat;
}
.portada{
display:block;
margin:auto;
max-height: 440px;
/*background-color: #3498DB;*/
}
/*---- -----contenido--- ----*/
a{
text-decoration: none;
color: #60b2e8;

}
.contain {
max-width: 1380px;
margin-right: auto;
margin-left: auto;
position: relative;
}
.barra{
background-color: #60b2e8;
height: 40px;
}
.barra:before{
color: #cde6f7;
font-weight: 400;
font-size: 25px;

display: block;
text-align: center;
padding-top:2.5px;
}

.contenedor2 h1{
overflow: visible;
position: relative;
font-size: 2em;
background-color: #60b2e8;
text-align: center;
width: 400%;
}
.contenedor2 h1:hover{
background-color: #0cc7c4;
}
.info-interna{
margin-left: 30px;
background-color: #fff;
width: 55%;
max-width: 990px;
text-align: left;
letter-spacing: 1px;
box-shadow: 3px 3px 10px rgba(0,0,0,.5);
overflow: visible;

}
.welcome {
padding-top:40px;
font-weight: 400;
text-align: left;
font-size: 30px;
text-align:center;
}
.welcome .cont{
border-bottom: solid #0cc7c4 1px;
border-top: solid #0cc7c4 1px;
}

/*.img-muestra{
display: inline;
}
.imagen-muestra{
width: 100px;
background-color: red;
display: flex;
justify:;*/
.img-muestra{
position: relative;
background-color: #fafafa;
width: 800px;
display: flex;
margin-right:auto;
margin-left: auto;
margin-top: 60px;
height: 225px;
width: 325px;

}
.img-prueba{
width: 150px;
background-color: ;
display: flex;
margin-left: auto;
margin-right:auto;
}
.post {
padding:60px;
padding-bottom: 30px;
padding-top: 30px;
font-weight: 300;
font-size: 15px;
text-decoration:none;
}
h3{
font-weight: 400;
margin-left: 30px;
text-align: left;
font-size: 25px;
}
.post a:hover{
color: blue;
}
.aside{
margin-right: 30px;
position: absolute;
background-color: red;
width: 500px;
height:500px;
top:0;
bottom: ;
right: 0px;
left: ;

}[/code]

EdePC

#1
8 Octubre 2018, 20:30 PM
Saludos,

- Cual imagen? Si te refieres a la imagen del fondo lol.png, entonces:

Código (css) [Seleccionar]
background-position-x: center; /* Centrar horizontalmente */
background-position-y: center; /* Centrar verticalmente */
Imprimir
Ir Arriba Páginas1
Acciones del Usuario