2

Cómo adapto una imagen de fondo con degradado con una resolución de 150x150.

La imagen de fondo se divide en varias partes, como logro adaptar la imagen de degradado correctamente.

body {
 margin: 0;
 padding: 0;
 background: url(http://dominointernet.s3.amazonaws.com/web/wp-content/uploads/2013/07/home-slider-bg-gris.png) center center fixed;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div>contenido, contenido</div>
</body>
</html>

2 respuestas 2

2

Aquí lo tienes en RGB, espero que te sirva!

body {
background-color: rgb(238,238,238);
@include filter-gradient(#eeeeee, #cccccc, horizontal);
@include background-image(radial-gradient(center, ellipse cover,  rgb(238,238,238) 0%,rgb(204,204,204) 100%));
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div>contenido, contenido</div>
</body>
</html>

4
  • 1
    Grandioso el ejemplo :), pero viéndolo bien mejor quedaría el blanco más centrado o en el centro, ¿Cómo lo haría amigo?
    – May
    Commented el 28 sept. 2016 a las 7:01
  • He editado el código @May Commented el 28 sept. 2016 a las 7:28
  • 1
    esta todo perfecto amigo, el ejemplo con solo css, puedes incluirlo es de mucha ayuda, pero si en vez de ello fuera una imagen como la adaptaria correctamente.
    – May
    Commented el 29 sept. 2016 a las 2:09
  • Pienso que siempre es mejor css que imagen. La imagen la usaríamos en el caso de que el fondo que se quiere usar fuera un mosaico o tuviera un dibujo con el que hacer el background de la web. La respuesta de @FelipeMoctezuma también es buena con el uso de la imagen, considera darle un punto para arriba pues se ha tomado su tiempo para responderte y es buena respuesta. Commented el 29 sept. 2016 a las 5:41
1

Prueba añadiendo

html,body{ height:100%; }

en tu archivo css y quitando center center fixed de la propiedad background en el body

html,body{
   height:100%;
}

body {
 margin: 0;
 padding: 0;
 background: url(http://inidesing.com/imagenes/grad.png) ;
 
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div>contenido, contenido</div>
</body>
</html>

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.