Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Fondo Degradado se corta.

 Estas en el tema de Fondo Degradado se corta. en el foro de CSS en Foros del Web. Buenas amigos, tengo un pequeño problema. Estoy tratando de poner un fondo degradado al body de una página, pero me da un efecto como de ...
  #1 (permalink)  
Antiguo 16/04/2014, 10:16
 
Fecha de Ingreso: abril-2014
Mensajes: 37
Antigüedad: 10 años, 8 meses
Puntos: 2
Fondo Degradado se corta.
Buenas amigos, tengo un pequeño problema. Estoy tratando de poner un fondo degradado al body de una página, pero me da un efecto como de repetición.

Solo quiero q el degradado Comience en el borde superior y termine en el inferior.

Codigo HTML:

Código HTML: 
Ver original
  1. <section>
  2. <header id="cabecera"><a href="index.html"><img src="img/banner.png"/></a>
  3.     <h3>Sistemas de Generación de Citas</h3>
  4.     </header>
  5.     <section id="contenido">
  6.         <h1 id="paso1">Paso 1</h1>
  7.         <div id="selector">
  8.             <div id="opcion">
  9.             <span>Seleccione el Centro de Distribución Directa:</span>
  10.             <select>
  11.                 <option value="1">Centro de distribución directa Paraguana I</option>
  12.                 <option value="2">Centro de distribución directa Paraguana II</option>
  13.             </select>
  14.             </div>
  15.             <h1 id="titulo_centro">Centro de Distribución Directa "Paraguana II"</h1>
  16.         </div>
  17.     </section>
  18. </section>

Código CSS:
Código CSS: 
Ver original
  1. *{
  2.         padding:0;
  3.         margin:0;
  4.     }
  5.     section{
  6.         max-width:2000px;
  7.     }
  8.     header img{
  9.         width:100%;
  10.         border-bottom:4px solid #c02b20;
  11.     }
  12.     #cabecera  {
  13.         background:-moz-linear-gradient(top, #999, #FFFFFF);
  14.         background:-webkit-linear-gradient(top, #999, #FFFFFF);
  15.     }
  16.     h3{
  17.         font:25px Verdana, Geneva, sans-serif;
  18.         text-align:center;
  19.     }
  20.     body{
  21.         background: -moz-linear-gradient(top, #c0940b, #f7cc00);
  22.         background: -webkit-linear-gradient(top, #c0940b, #f7cc00);
  23.     }
  24.     #contenido{
  25.         border:1px dashed gray;
  26.         position:absolute;
  27.         z-index:2;
  28.         width:100%;
  29.         background-image: url(img/fondo.png);
  30.         height: auto;
  31.         background-repeat: no-repeat;
  32.     }
  33.     #paso1{
  34.         z-index:3;
  35.         margin-left:30px;
  36.         font-size: 120px;
  37.         font-family: Tahoma, Geneva, sans-serif;
  38.         text-align: left;
  39.         font-style:oblique;
  40.         color:rgba(255, 255, 255, 0.4);
  41.     }
  42.     #selector{
  43.         max-width:900px;
  44.         border:1px solid black;
  45.         margin:auto;
  46.     }
  47.     #opcion{
  48.         font:bold 15px Verdana, Geneva, sans-serif ;
  49.         width:700px;
  50.         margin:auto;
  51.     }
  52.     #titulo_centro{
  53.         text-align:center;
  54.     }
  #2 (permalink)  
Antiguo 16/04/2014, 12:26
 
Fecha de Ingreso: abril-2014
Mensajes: 37
Antigüedad: 10 años, 8 meses
Puntos: 2
Pregunta Respuesta: Fondo Degradado se corta.
Ya resolví, no de la mejor forma pero lo hice, he modificado un poco el código, Edito:

Código HTML:

Código HTML: 
Ver original
  1. <body>
  2. <section id="entorno">
  3.     <header id="cabecera"><a href="index.html"><img src="img/banner.png"/></a>
  4.     <h3>Sistemas de Generación de Citas</h3>
  5.     </header>
  6.     <section id="contenido">
  7.         <h1 id="paso1">Paso 1</h1>
  8.         <div id="selector">
  9.             <div id="opcion">
  10.             <span>Seleccione el Centro de Distribución Directa:</span>
  11.             <select id="opciones">
  12.                 <option value="2">Centro de distribución directa Paraguana II</option>
  13.                 <option value="1">Centro de distribución directa Paraguana I</option>
  14.             </select>
  15.             </div>
  16.             <div id="centro">
  17.                 <h1 id="titulo_centro">Centro de Distribución Directa "Paraguana II"</h1>
  18.                 <p><span>Dirección:</span> Entrada Zona Franca Industrial Comercial y de Servicios de Paraguaná (ZONFIPCA), Punto Fijo, Estado Falcón<br>
  19.                 <span>Horarios de atención:</span> Mañana: 08:30 am a 11:45 am / Tarde: 02:00 pm a 05:35 pm</p>
  20.                 <br><br><p id="nota">Nota: Verificar la disponibilidad del producto que desea adquirir en el Centro de Distribución Directa seleccionado</p>
  21.             </div>
  22.         </div>
  23.     </section>
  24. </section>    
  25. </body>

Código CSS:

Código CSS: 
Ver original
  1. *{
  2.         margin:0;
  3.     }
  4.     body{
  5.         background: -moz-linear-gradient(left, #c0940b, #f7cc00);
  6.         background: -webkit-linear-gradient(left, #c0940b, #f7cc00);
  7.     }
  8.     header img{
  9.         width:100%;
  10.         border-bottom:4px solid #c02b20;
  11.     }
  12.     #cabecera  {
  13.         box-shadow:5px 5px 5px #FFFFFF;
  14.         background:-moz-linear-gradient(top, #999, #FFFFFF);
  15.         background:-webkit-linear-gradient(top, #999, #FFFFFF);
  16.     }
  17.     h3{
  18.         font:25px Verdana, Geneva, sans-serif;
  19.         text-align:center;
  20.     }
  21.     #contenido{
  22.         width:100%;
  23.         background-image: url(img/fondo.png);
  24.         height: auto;
  25.         background-repeat: no-repeat;
  26.     }
  27.     #paso1{
  28.         margin-left:30px;
  29.         font-size: 120px;
  30.         font-family: Tahoma, Geneva, sans-serif;
  31.         text-align: left;
  32.         font-style:oblique;
  33.         color:rgba(255, 255, 255, 0.4);
  34.     }
  35.     #selector{
  36.         border:1px solid black;
  37.         border-radius:10px;
  38.         max-width:900px;
  39.         background-color:#E7E6D8;
  40.         padding-top:20px;
  41.         margin:auto;
  42.         padding-left:80px;
  43.         font-weight:bold;
  44.         font-size:15px;
  45.     }
  46.     #selector span{
  47.         text-decoration:underline;
  48.     }
  49.     #opciones{
  50.         height:25px;
  51.     }
  52.     #opcion{
  53.         font:bold 15px Verdana, Geneva, sans-serif ;
  54.         width:700px;
  55.         margin:auto;
  56.     }
  57.     #titulo_centro{
  58.         text-align:center;
  59.         padding:15px;
  60.         color:red;
  61.         font-size:25px;
  62.         font-weight:bolder;
  63.         font-style:oblique;
  64.     }
  65.     #nota{
  66.         font-size:16px;
  67.         font-weight:bolder;
  68.         color:#009;
  69.     }

Etiquetas: background, color, contenido, degradado, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:16.