VOLVER
MENÚ

IMAGEN DE FONDO

Agrega una imagen de fondo.

Simularemos que le cuadro a la derecha es la pantalla completa.
Se utiliza con background-image.
Y asi es como se vería.
VER HTML 



  <div>
  <p class="catsandstars">
        This paragraph is full of cats<br />and stars.
        </p>
        <p>This paragraph is not.</p>
        <p class="catsandstars">
        Here are more cats for you.<br />Look at them!
        </p>
    <p>And no more.</p>
    </div>
VER CSS 
              pre, p {
                font-size: 1.5em;
                color: #FE7F88;
                background-color: transparent;
            }
            
            div {
              background-image: url("mi.png");
            }
            
            p {
              background-image: none;
            }
            
            .catsandstars {
              background-image:  url(""),
                                 url(");
              background-color: transparent;

COLOR DE FONDO

Simularemos que le cuadro a la derecha es la pantalla completa.
Se utiliza con background-color.
VER HTML 
 

  <div class="exampleone">
    Lorem ipsum dolor sit amet, consectetuer
    </div>
VER CSS 
              
          .exampleone {
            background-color: teal;
            color: white;
          }

Degradado de color

Simularemos que le cuadro a la derecha es la pantalla completa.
Se utiliza con background:linear-gradient () dentro de los parámetros se ponen los colores.
Y asi es como se vería.
VER HTML 
  
             
Sólo se utilizan propiedades css.
VER CSS 
         
          div{
            height: 130px;
            width: 630px;
            background: -webkit-linear-gradient(orange, pink);
            background: -moz-linear-gradient(orange, pink);
            background: -o-linear-gradient(orange, pink);
         }

Tamaño del fondo

Simularemos que le cuadro a la derecha es la pantalla completa.
Se utiliza con background-color.
Y asi es como se vería.
VER HTML 
 
  <body>            
<img src="imagenes/imagenfondo.jpeg"  alt="">
</body>
VER CSS 
         
        body{
           height="50px"
        }

Video de fondo

Simularemos que le cuadro a la derecha es la pantalla completa.
Se utiliza con background-color.
Y asi es como se vería.
VER HTML 
    



  <video src="video/video.mp4" width="300px" type="video/mp4" autoplay muted loop></video>
VER CSS 
         
          body {
            position: absolute;
            bottom: 0px;
            right: 0px;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -1000;
            overflow: hidden;
            }
            #video_pattern {
            background:#fff;
            position: fixed;
            opacity: 0.8;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 1;
            }