elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Tutorial básico de Quickjs


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Ayuda como puedo centrar esta imagen de atras? osea centrar una imagen detras
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Ayuda como puedo centrar esta imagen de atras? osea centrar una imagen detras  (Leído 1,828 veces)
ReAdriel

Desconectado Desconectado

Mensajes: 19


Ver Perfil
Ayuda como puedo centrar esta imagen de atras? osea centrar una imagen detras
« en: 8 Octubre 2018, 12:25 pm »

Código
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <title>ChiquilloFav</title>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6. <link rel="stylesheet" href="css/loading.css">
  7. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
  8. <link rel="stylesheet" href="normalize.css">
  9. <link rel="shortcut icon" href="img/icono.ico">
  10. <link rel="stylesheet" href="css/estilos.css">
  11. <link rel="stylesheet" href="css/font-awesome.min.css">
  12. <style>.heading { color: rgb(213,224,231,.8);}</style>
  13. <style>.h3 { color: #3498DB;}</style>
  14. <style>.h2 { color: black;}</style>
  15. <style>.contenedor {display: flex;justify-content: center;align-items: center;}</style>
  16. <style>.contenedor2 {display: flex;justify-content: center;align-items: center;}</style>
  17. <style>.contenedor3 {display: flex;justify-content: center;align-items: center;}</style>
  18.  
  19. </head>
  20. <div class="jm-loadingpage"></div>
  21. <header>
  22. <div class="contenedor">
  23. <nav class="menu">
  24. <a href="#" class="sobre"><i class="fa fa-user-circle" aria-hidden="true"></i>
  25. Sobre CF</a><a href="#" class="estudio" ><i class="fa fa-graduation-cap" aria-hidden="true"></i>
  26. Estudios</a><a href="#" class="anime"><i class="fa fa-slideshare" aria-hidden="true"></i>
  27. Anime</a><a href="#" a><i class="fa fa-usd" aria-hidden="true"></i>
  28. Ganar Dinero</a><a href="#"><i class="fa fa-exchange" aria-hidden="true"></i>
  29. Exchange</a><a href="#" class="aprender"><i class="fa fa-github" aria-hidden="true"></i>
  30. Aprender a Programar</a><a href="#"class="chat"><i class="fa fa-comments-o" aria-hidden="true"></i>
  31. Chat</a><a href="#" class="contactar"><i class="fa fa-at" aria-hidden="true"></i>
  32. Contactar</a>
  33. </nav>
  34. </div>
  35. </header>
  36.  
  37. <!-- PORTADA -->
  38.  
  39. <div class="fond">
  40. <img src="img/portada.png" alt="chiquillofav" class="portada">
  41. </div>
  42.  
  43.  
  44.  
  45. <div class="barra" ></div>
  46. <!-- contenido -->
  47. <div class="contain">
  48.  
  49.  
  50. <div class="info-interna">
  51. <div class="welcome"><h4 class="cont">BIENVENIDO</h4></div>
  52. <br>
  53. <br>
  54. <br>
  55. <br>
  56. <br>
  57. <br>
  58. <div class="img-muestra"><img src="img/portada2.png" alt="chiquillofav"class="imagen- muestra" style="width:100%; "></div>
  59. <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>
  60.  
  61. <h3 class="h3">¿Enserio se puede ganar dinero por Internet?</h3>
  62.  
  63. <div class="img-muestra"><img src="img/img-1.png" alt="chiquillofav"class="imagen- muestra" style="width:100%; "></div>
  64.  
  65. <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>
  66.  
  67. <h3 class="h3">Pero quiero ganar dinero Ya! </h3>
  68.  
  69. <div class="img-muestra"><img src="img/img-2.2.png" alt="chiquillofav"class="imagen- muestra" style="width:100%; "></div>
  70.  
  71. <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>
  72.  
  73. <h3 class="h3">¿Que necesito para empezar a trabajar?</h3>
  74.  
  75. <div class="img-muestra"><img src="img/img-4.png" alt="chiquillofav"class="imagen- muestra" style="width:100%; "></div>
  76.  
  77. <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>
  78.  
  79. <h3 class="h3">¿Como podre retirar ese dinero ganado?</h3>
  80.  
  81. <div class="img-muestra"><img src="img/img-3.png" alt="chiquillofav"class="imagen- muestra" style="width:100%; "></div>
  82. <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>
  83. </div>
  84. <div class="aside">
  85. <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>
  86. </div>
  87. </div>
  88. <!--Script para loading  -->
  89.     <script>
  90. $(document).ready(function() {
  91. $(".jm-loadingpage").fadeOut("slow");;
  92. });
  93. </script>
  94. <!--Script para loading  -->
  95. </body>
  96. </html>
  97. [code=css]
  98. * {
  99. box-sizing:border-box;
  100. -moz-box-sizing:border-box;
  101. padding: 0;
  102. margin: 0;
  103. }
  104. body {
  105. background-color: #fff;
  106. font-family: "Open Sans", Sans-serif;
  107. font-size: 16px;
  108. background-color: #eaf1f5;
  109. }
  110.  
  111. .contenedor {
  112. width: 100%;
  113. max-width: 1380px;
  114. margin: auto;
  115. overflow: hidden;
  116. text-align: center;
  117. }
  118.  
  119. /*----- ----- HEADER ------- -----*/
  120. header {
  121. background-repeat: no-repeat;
  122. background-position: center;
  123. max-height: 600px;
  124. background-color: #60b2e8;
  125. }
  126.  
  127. header .menu {
  128. text-align: left;
  129. margin-left: 20px;
  130. background-color: rgba(50,150,210,);
  131.  
  132. }
  133.  
  134. header .menu a{
  135. display: inline-block;
  136. padding: 10px 10px;
  137. text-decoration: none;
  138. /*border: 2px solid transparent;*/
  139. font-size: 1em;
  140. color: rgba(255,255,255,.7);
  141. }
  142. header .menu a:hover{
  143. background: #0cc7c4;
  144. }
  145.  
  146. .fond{
  147. background:url('../img/lol.png');
  148. background-repeat: no-repeat;
  149. }
  150. .portada{
  151. display:block;
  152. margin:auto;
  153. max-height: 440px;
  154. /*background-color: #3498DB;*/
  155. }
  156. /*---- -----contenido--- ----*/
  157. a{
  158. text-decoration: none;
  159. color: #60b2e8;
  160.  
  161. }
  162. .contain {
  163. max-width: 1380px;
  164. margin-right: auto;
  165. margin-left: auto;
  166. position: relative;
  167. }
  168. .barra{
  169. background-color: #60b2e8;
  170. height: 40px;
  171. }
  172. .barra:before{
  173. color: #cde6f7;
  174. font-weight: 400;
  175. font-size: 25px;
  176.  
  177. display: block;
  178. text-align: center;
  179. padding-top:2.5px;
  180. }
  181.  
  182. .contenedor2 h1{
  183. overflow: visible;
  184. position: relative;
  185. font-size: 2em;
  186. background-color: #60b2e8;
  187. text-align: center;
  188. width: 400%;
  189. }
  190. .contenedor2 h1:hover{
  191. background-color: #0cc7c4;
  192. }
  193. .info-interna{
  194. margin-left: 30px;
  195. background-color: #fff;
  196. width: 55%;
  197. max-width: 990px;
  198. text-align: left;
  199. letter-spacing: 1px;
  200. box-shadow: 3px 3px 10px rgba(0,0,0,.5);
  201. overflow: visible;
  202.  
  203. }
  204. .welcome {
  205. padding-top:40px;
  206. font-weight: 400;
  207. text-align: left;
  208. font-size: 30px;
  209. text-align:center;
  210. }
  211. .welcome .cont{
  212. border-bottom: solid #0cc7c4 1px;
  213. border-top: solid #0cc7c4 1px;
  214. }
  215.  
  216. /*.img-muestra{
  217. display: inline;
  218. }
  219. .imagen-muestra{
  220. width: 100px;
  221. background-color: red;
  222. display: flex;
  223. justify:;*/
  224. .img-muestra{
  225. position: relative;
  226. background-color: #fafafa;
  227. width: 800px;
  228. display: flex;
  229. margin-right:auto;
  230. margin-left: auto;
  231. margin-top: 60px;
  232. height: 225px;
  233. width: 325px;
  234.  
  235. }
  236. .img-prueba{
  237. width: 150px;
  238. background-color: ;
  239. display: flex;
  240. margin-left: auto;
  241. margin-right:auto;
  242. }
  243. .post {
  244. padding:60px;
  245. padding-bottom: 30px;
  246. padding-top: 30px;
  247. font-weight: 300;
  248. font-size: 15px;
  249. text-decoration:none;
  250. }
  251. h3{
  252. font-weight: 400;
  253. margin-left: 30px;
  254. text-align: left;
  255. font-size: 25px;
  256. }
  257. .post a:hover{
  258. color: blue;
  259. }
  260. .aside{
  261. margin-right: 30px;
  262. position: absolute;
  263. background-color: red;
  264. width: 500px;
  265. height:500px;
  266. top:0;
  267. bottom: ;
  268. right: 0px;
  269. left: ;
  270.  
  271. }
[/code]


« Última modificación: 8 Octubre 2018, 12:32 pm por ReAdriel » En línea

EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.057



Ver Perfil
Re: Ayuda como puedo centrar esta imagen de atras? osea centrar una imagen detras
« Respuesta #1 en: 8 Octubre 2018, 20:30 pm »

Saludos,

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

Código
  1. background-position-x: center; /* Centrar horizontalmente */
  2. background-position-y: center; /* Centrar verticalmente */


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Como puedo quitarle esto a esta imagen
Diseño Gráfico
g-unit 4 1,994 Último mensaje 5 Septiembre 2005, 17:06 pm
por Kasswed
Centrar imagen en formulario MDI
Programación Visual Basic
Overlord 1 12,769 Último mensaje 21 Octubre 2005, 21:11 pm
por la caca
Como puedo traer hacia detrás el texto q esta delante de una imágen(¿?)
Diseño Gráfico
Ad0nis 4 2,176 Último mensaje 18 Octubre 2006, 00:17 am
por DSiGN3r
Como hace esta increible pagina para centrar su contenido?
Desarrollo Web
octavioxd 5 3,796 Último mensaje 11 Julio 2010, 15:37 pm
por Nakp
¿Como aumentar y centrar el texto en Dev C++? ¡Ayuda!
Programación C/C++
JeesLooVe 0 5,958 Último mensaje 11 Mayo 2015, 19:02 pm
por JeesLooVe
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines