zeta1

 

 

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):

 

 

 

Multiple Backgrounds

The following div element has two background images:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

 

h3 {
margin: 0px;
background-image: url(‘https://mseputignano.altervista.org/stazione/foto/cam.jpg’);
background-repeat: no-repeat;
color: #FFFFFF;
background-color: red;
font-size: 140%;
font-weight: normal;
line-height: 260px;
text-align: center;
width: 240px;
height: 150px;
}

prova

.boximg {
position: relative;
width: 400px; /* Stessa larghezza dell’immagine */
height: 300px; /* Stessa altezza dell’immagine */
}
div.boxtesto {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.6);
}
span.testo {
padding: 10px;
color: #FFFFFF;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
}

Un bellissimo tramonto!

.boximg {
position: relative;
width: 400px; /* Stessa larghezza dell’immagine */
height: 300px; /* Stessa altezza dell’immagine */
}
div.boxtesto {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.6);
}
span.testo {
padding: 10px;
color: #FFFFFF;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
}