Tema: 2 BackGrounds
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 09/07/2011, 11:02
dksoft
 
Fecha de Ingreso: octubre-2010
Mensajes: 123
Antigüedad: 14 años
Puntos: 10
2 BackGrounds
Buenas... tengo un problema con un sitioweb que estoy diseñando..

el problema es el siguiente. sesupone que tengo un Fondo que se repite.
ok?.. entonces.. deseo poner otro Fondo arriba del primer fondo pero deseo que este no se repita.

Un ejemplo seria. aver.. Tengo mi web de 1200px de Ancho.. tengo un Monitor como de 1600px haha..

entonces el 1º Fondo se repite Normalmente.. pero deseo ponerle otro Fondo pero no en toda la web .. .. si no atras de la web centrado. les dejo una representacion.

Este es el BG que se repite.


Asi es como tengo la web Ahora.


pero quiero agregarle otro Fondo centrado que es este.


Para que quede asi:



Bueno entonces lo intente poner con Pandding y entonces me crea la scrollback de que esta muy larga.

pero lo que quiero es que .. los que tengan monitor grande puedan ver el 2º fondo completo. y los que tengan pekeño monitor solo vean hasta donde les llege la imgane. no se si me explico.. un saludo u.u

Anexo HTML
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin título</title>
  6. <style>
  7. *{
  8.     margin: 0; 
  9.     padding:0;
  10.  
  11. }
  12. body { background:url(images/background.png) repeat-x;
  13.  
  14. }
  15. .medida {
  16.     margin: auto;
  17.     width: 1200px;
  18. }
  19. .headup{
  20.     height:199px;
  21.     background:url(images/headup.png);
  22. }
  23. .head{
  24.     height:561px;
  25.     background:url(images/head.png);
  26.     
  27. }
  28. .barra{
  29.     height:65px;
  30.     background:url(images/bar.png);
  31. }
  32. .base{
  33.     background:url(images/base.png);
  34. }
  35. .curve{
  36.     background:url(images/curve.png) no-repeat;
  37. }
  38. .nav_up{
  39.     /*margin: 160px 0 0 650px;*/
  40.     margin-left: 650px;
  41. }
  42. .nav_up ul,li{
  43.     text-decoration:none;
  44.     list-style-type:none;
  45. }
  46. .nav_up li {
  47.     padding:0px;
  48.     float: left;
  49. }
  50. #apDiv1 {
  51.     background:url(images/background-curve.png);
  52.     position:absolute;
  53.     width: 3016px;
  54.     height: 1347px;
  55.     z-index:1;
  56.     left: -662px;
  57.     top: 33px;
  58. }
  59. </style>
  60. </head>
  61.  
  62. <body>
  63. <div class="medida">
  64.   <div class="headup">
  65. <div class="nav_up">
  66. <ul>
  67. <li><a href="#">Elemnto1</a></li>
  68. <li><a href="#">Elemento2</a></li>
  69. </ul>
  70. </div>
  71. </div>
  72. <div class="head"></div>
  73. <div class="barra"></div>
  74. <div class="base">
  75. <div class="curve">
  76.   <p><br />
  77.   <br />
  78.   <br />
  79.   <br />
  80.   <br />
  81.     <br />
  82.     <br />
  83.     <br />
  84.     <br />
  85.     <br />
  86.     <br />
  87.     <br />
  88.     <br />
  89.     <br />
  90.     <br />
  91.     <br />
  92.     <br />
  93.     <br />
  94.     <br />
  95.     <br />
  96.     <br />
  97.     <br />
  98.     <br />
  99.     <br />
  100.     <br />
  101.     <br />
  102.     <br />
  103.     <br />
  104.     <br />
  105.   </p>
  106. </div>
  107. </div>
  108. </div>
  109. </body>
  110. </html>