2

Estoy tratando de colocar un un fondo a mi página web ¿Cómo evito la repetición del fondo gradient, en mi página? ya que lo que deseo es que los colores se vean uniformes y no con saltos.

<html>

<head>
  <title>Ejemplo</title>
  <style>
    .fondo {
      background: no - repeat;
      background: -webkit - linear - gradient(#fff, #666 25%);
      background: -moz-linear-gradient(# fff, #666 25%);
      background: -o-linear-gradient(# fff, #666 25%);
      background: linear-gradient(# fff, #666 25%);
    }
  </style>
</head>

<body class="fondo">
  <p>El lenguaje HTML es <strong>tan sencillo</strong> que prácticamente se entiende sin estudiar el significado de sus etiquetas principales.</p>
</body>

</html>

introducir la descripción de la imagen aquí

2
  • sube todo el codigo amigo, html y css para ayudarte mejor y si puedes explicarte mejor Commented el 3 jun. 2016 a las 15:45
  • cuando ejecuto fragmento de coidgo no aparece nada, revisa eso por favor, que este subiendo el html y css bien Commented el 3 jun. 2016 a las 15:58

2 respuestas 2

2

La solución va a depender de cómo quieras resolver el problema: ¿quieres que se repita una sola vez ocupando toda la ventana o sólo el tamaño específico del contenedor?

El principal problema es que estás definiendo todo como background, entonces el navegador tomará la última que sea válida y la aplicará, ignorando entonces el background: no-repeat que tienes al principio. La solución es simple: mueve esa regla al final, y hazla más específica (background-repeat: no-repeat).

<html>

<head>
  <title>Ejemplo</title>
  <style>
    .fondo {
      background: -webkit-linear-gradient(#fff, #666 25%);
      background: -moz-linear-gradient(# fff, #666 25%);
      background: -o-linear-gradient(# fff, #666 25%);
      background: linear-gradient(# fff, #666 25%);
      background-repeat: no-repeat;
    }
  </style>
</head>

<body class="fondo">
  <p>El lenguaje HTML es <strong>tan sencillo</strong> que prácticamente se entiende sin estudiar el significado de sus etiquetas principales.</p>
</body>

</html>

Si en cambio lo que quieres es que sólo se repita una vez y ocupe todo el alto/ancho del contenedor, podrías hacerlo usando la propiedad background-attachment y asignándole el valor fixed (aunque se verá estirado):

<html>

<head>
  <title>Ejemplo</title>
  <style>
    .fondo {
      background: -webkit-linear-gradient(#fff, #666 25%);
      background: -moz-linear-gradient(# fff, #666 25%);
      background: -o-linear-gradient(# fff, #666 25%);
      background: linear-gradient(# fff, #666 25%);
      background-attachment:fixed;
    }
  </style>
</head>

<body class="fondo">
  <p>El lenguaje HTML es <strong>tan sencillo</strong> que prácticamente se entiende sin estudiar el significado de sus etiquetas principales.</p>
</body>

</html>

1

Yo creo que primero debes corregir el CSS:

html {
    height: 100%; /*Asignar un alto al html de 100%*/
}
body {
    height: 100%; /*Tambien al Body 100%*/
    margin: 0;
    background-repeat: no-repeat; /*Evita que se repita*/
    background-attachment: fixed;
     background: rgba(226,226,226,1);
background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(226,226,226,1)), color-stop(50%, rgba(219,219,219,1)), color-stop(51%, rgba(209,209,209,1)), color-stop(100%, rgba(254,254,254,1)));
background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
background: -o-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
background: -ms-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
background: linear-gradient(to bottom, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=0 );
    }

Yo me apoye del sitio: Generador Gradientes CSS para el Gradiente

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.