[CSS] Immagine di sfondo fissa e contenuti che ci si muovono sopra, una domandina...

WilliamBlake · 13-10-2009, 23:00

Ciao,
guardate questo template (Joomla ora non c'entra nulla...ho tolto tutti i riferimenti ai moduli di Joomla...consideratelo pure un normalissimo template HTML+ CSS cosa che infatti è):
http://www.siatec.net/andrea/archivi...nce/index.html

Si tratta di un template con un'immagine di sfondo fissa sulla quale si muovono i contenuti con la scroll bar

L'immagine di sfondo ha un'altezza di 1140px e non viene visualizzata tutta (la testa della modella viene tagliata come potete ben vedere), credo ciò dipenda dal fatto che ha un'altezza maggiore della finestra del broswer, dico bene?

Vorrei sapere se è possibile fare in modo che l'immagine di sfondo si veda COMPLETA senza doverla ridimensionare tagliandola con photoshop e che sia possibile scorrerla usando lo scroll, una volta che si è scesi fino al termine dell'immagine allora sono i contenuti ad iniziare a muoversi.

Spero di essere stato abbastanza chiaro nella mia spiegazione

Il codice CSS è il seguente:

Codice:

body {
	font:normal 80% Georgia, "Times New Roman", Times, serif;
	margin: 0;
	padding:0;
	color: #e5efff;
	text-align:center
}

form {
  margin: 0;
  padding: 0
}

img,table {
	border:none
}

a:link, a:visited {
	text-decoration: underline;
	font-weight: normal;
	color: #e5efff
}

a:hover {
	text-decoration: none;
	font-weight: normal;
	color: #e5efff
}
p {
  text-align:justify
}
hr{
	color:#88a4ce;
	background:#88a4ce;
	border:0;
	height:1px; 
}

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
	background: #06080b url(../images/page_bg2.jpg) center bottom fixed no-repeat;
}

#container {
	width:980px;
	margin:0 auto;
	text-align:center;
	padding-top:20px
}
#container #header{
	width:980px;
	height:181px;
	background: url(../images/header_bg.png) top no-repeat;
	margin:0 auto;
	text-align:center
}
#container #header #title-container{
	float:left;
	width:548px;
	text-align:left;
	height:148px;
	overflow:hidden
}
#container #header #title-container #title a{
	font:bold 250% Georgia, "Times New Roman", Times, serif;
	color:#c5dcff;
	text-decoration:none;
	font-style:italic;
	text-align:left;
	padding-left:25px;
	height:148px;
	line-height:125px
}

#container #header #search-container{
	float:right;
	text-align:left;
	height:40px;
	width:235px
}
#container #header #search-container #search{
	text-align:left;
	padding-left:45px;
	padding-top:15px
}

div.search {
	text-align:left
}
.search #mod_search_searchword {
	width:145px;
	font:normal 85% Georgia, "Times New Roman", Times, serif;
	border-bottom:1px solid #182236;
	border-right:1px solid #182236;
	border-left:1px solid #5b7290;
	border-top:1px solid #5b7290;
	color:#7b91b1;
	background-color:#182236;
	height:18px;
	vertical-align:middle
}

div.search .button{
	font:bold 85% Georgia, "Times New Roman", Times, serif;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	border-left:1px solid #7b91b1;
	border-top:1px solid #7b91b1;
	margin:0 0 0 5px;
	color:#000;
	background-color:#7b91b1;
	vertical-align:middle
}
#top-menu{
	width:980px;
	height:27px;
	text-align:center;
	margin:15px 0

}
#top-menu table{
	margin:0 auto;
	height:27px;
}
ul#mainlevel-nav
{
	list-style: none;
	padding: 0;
	margin: 0;
	text-transform:uppercase;
	height:27px
}
ul#mainlevel-nav li
{
	background-image: none;
	padding-left: 0px;
	padding-right: 0px;
	float: left;
	margin: 0;
	font-size: 80%;
	line-height: 25px;
	white-space: nowrap
}
ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited{
	display: block;
	margin-left: 10px;
	margin-right: 10px;
	padding:0 15px;
	padding-bottom:0;
	text-decoration: none;
	color: #c5dcff;
	font-weight:bold;
	border:1px solid #839cc2;
	background:url(../images/top_menu_bg.png)
}
ul#mainlevel-nav li a:hover
{
	color: #fff;
}
ul#mainlevel-nav li a#active_menu-nav{
	color: #fff;
}

form#form-login p{
	padding:0;
	margin:3px 0;
	text-align:left
}
form#form-login fieldset { border:0; margin: 0;padding:0;text-align:left }
form#form-login ul { list-style:none;text-align:left;padding:0;margin:0 }

#container #header #newsflash-container{
	width:430px;
	height:95px;
	float:right;
	overflow:hidden;
	margin-top:20px;
	border-left:1px solid #7b91b1
}

#newsflash-container #newsflash{
	
	font:bold 90% Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	color:#d0e2ff;
	text-align:left;	
	padding:0 10px 
}
#newsflash-container #newsflash .contentpaneopen{
	margin:0
}
#newsflash-container #newsflash .contentpaneopen a:link, #newsflash-container #newsflash .contentpaneopen a:visited{
	text-decoration:underline;
	color:#d0e2ff;
	font-weight:bold
}
#newsflash-container #newsflash .contentheading{
	color:#d0e2ff;
	font-size:100%;
	text-align:left
}
#newsflash-container #newsflash .contentpaneopen a:hover{
	text-decoration:none;
	color:#d0e2ff;
}
#newsflash-container #newsflash .contentpaneopen p{
	margin:0
}


.spacer{
	clear:both;
	font-size:1px;
	margin:0px;
	padding:0px
}

#pathway {
	background-color:#938e8e;
	height:21px;
	line-height:21px;
	padding-left: 217px;
	width:980px;
	text-align: left;
	border-left:1px solid #fff;
	border-right:1px solid #fff
}
span.pathway {
  display: block;
  font-size:85%;
  overflow: hidden;
  color:#dad8d8;
}

span.pathway a, span.pathway a:link, span.pathway a:hover,span.pathway a:visited {
	color:#dad8d8;
}




select.inputbox{
	background-color:#f6f9f3;
	font-size:80%;
	border:1px solid #bbb
}
textarea.inputbox{
    font-size:80%;
    color: #000;
    background-color:#fff;
    border:1px solid #bbb;
    font: normal 100% Tahoma, Verdana, Helvetica, sans-serif
}
#contents{
	width:980px;
	margin:0 auto
}
#column1_container{
	width:217px;
	float:left;
	text-align:center
}
#column1{
	margin:5px 0
}
#column3{
	margin:20px 10px
}
#column2_container{
	width:600px;
	float:left;
	text-align:center
}
#column2_container_full{
	width:740px;
	float:right;
	text-align:center;
	border:1px solid #7387a0;
	background:url(../images/top_menu_bg.png);
	margin-top:5px
}
#column2{
	margin:20px;
	text-align:justify
}
#column2_container_full #column2 form{
	padding-left:20px
}
/* menu */
div.module_menu {
	padding: 0;
	margin:0 0 20px 0;
	text-align:left
}
div.module_menu div{
	
}
div.module_menu div div{
	padding-bottom:5px
}
div.module_menu div div div {
	border:1px solid #72859f;
	background:url(../images/top_menu_bg.png)
}
div.module_menu h3{
	color: #c5dcff;
	background:url(../images/top_menu_bg.png);
	text-align: center;
	line-height: 21px;
	font-weight: bold;
	font-size: 85%;
	margin: 0;
	height:21px;
	border-bottom:1px dotted #7387a0
}
div.module_menu ul.menu{
	padding-top:5px	
}
/* menu links level 1 */
ul.menu {
	margin:0;
	padding:0;
	list-style:none
}
ul.menu li {
	margin:0;
	padding:0
}
ul.menu li a:link, ul.menu li a:visited{
	display:block;
	line-height:170%;
	margin:0;
	padding-left:10px;
	text-decoration:none;
	color:#c5dcff;
	text-align:left;
	font-size:80%;
	font-weight:bold;
	text-transform:uppercase
}
ul.menu li a:hover{
	color:#fff;
	font-weight:bold
}
ul.menu li.active a:link, ul.menu li.active a:visited, ul.menu li.active a:hover{
	display:block;
	text-decoration:none;
	color:#c5dcff;
	font-weight:bold;
	background: url(../images/dot.gif) 10px center no-repeat;
	padding-left:20px
}
ul.menu li#current a:link, ul.menu li#current a:visited, ul.menu li#current a:hover{
	display:block;
	text-decoration:none;
	color:#c5dcff;
	font-weight:bold;
	background: url(../images/dot.gif) 10px center no-repeat;
	padding-left:20px
}
ul.menu li.active li a:link, ul.menu li.active li a:visited, ul.menu li.active li a:hover{
	display:block;
	text-decoration:none;
	color:#c5dcff;
	font-weight:normal;
	background: url(../images/empty_bg.gif) 10px center no-repeat; /* IE6 bug*/
	padding-left:20px
}
ul.menu li#current li a:link, ul.menu li#current li a:visited, ul.menu li#current li a:hover{
	display:block;
	text-decoration:none;
	color:#c5dcff;
	font-weight:normal;
	background: url(../images/empty_bg.gif) 10px center no-repeat;
	padding-left:20px
}
/* level 2 */
ul.menu li ul{
	margin:0;
	padding:0;
	list-style:none
}
ul.menu li li a:link, ul.menu li li a:visited, ul.menu li li a:hover{
	display:block;
	text-decoration:none;
	color:#c5dcff;
	font-weight:normal;
	background: url(../images/empty_bg.gif) 10px center no-repeat;
	padding-left:30px
}
ul.menu li.active li#current a:link, ul.menu li.active li#current a:visited, ul.menu li.active li#current a:hover{
	display:block;
	text-decoration:none;
	color:#c5dcff;
	font-weight:normal;
	background: url(../images/dot1.gif) 20px center no-repeat;
	padding-left:30px
}
ul.menu li.active li#current li a:link, ul.menu li.active li#current li a:visited, ul.menu li.active li#current li a:hover{
	display:block;
	text-decoration:none;
	color:#c5dcff;
	font-weight:normal;
	background: url(../images/empty_bg.gif) 10px center no-repeat;
	padding-left:30px
}
/* level 3 */

ul.menu li li ul{
	margin:0;
	padding:0;
	list-style:none
}
ul.menu li.active li.active a:link, ul.menu li.active li.active a:visited, ul.menu li.active li.active a:hover{
	display:block;
	text-decoration:none;
	color:#c5dcff;
	font-weight:normal;
	background: url(../images/dot1.gif) 20px center no-repeat;
	padding-left:30px
}
ul.menu li.active li.active li#current a:link, ul.menu li.active li.active li#current a:visited, ul.menu li.active li.active li#current a:hover{
	display:block;
	text-decoration:none;
	color:#c5dcff;
	font-weight:normal;
	background: url(../images/dot2.gif) 30px center no-repeat;
	padding-left:40px
}
ul.menu li.active li.active li a:link, ul.menu li.active li.active li a:visited, ul.menu li.active li.active li a:hover{
	display:block;
	text-decoration:none;
	color:#c5dcff;
	font-weight:normal;
	background: url(../images/empty_bg.gif) 10px center no-repeat;
	padding-left:30px
}

/* login form, polls */
div.module {
	padding: 0;
	margin: 0 0 20px 0;
	font-size:85%
}
div.module div{
	
}
div.module div div{
	padding-bottom:5px
}
div.module div div div {
	padding-left:10px;
	padding-right:10px;
	text-align:left;
	padding-top:5px;
	border:1px solid #72859f;
	background:url(../images/top_menu_bg.png)
}
div.module div div div ul.menu {
	margin:5px 0 0 -10px	
}
div.module div div div div{
	padding-left:0;
	background:url(../images/empty_bg.gif) left top no-repeat; /* IE bug*/;
	border:0
}
div.module h3{
	color: #c5dcff;
	text-align: center;
	line-height: 170%;
	font-weight: bold;
	font-size: 100%;
	margin: 0;
	border-bottom:1px solid #72859f
}
div.module ul.menu{
	font-size:120%	
}
.moduletable_menu, .moduletable, .moduletable_text, .c{
	margin:0 0 20px 0;
	text-align:justify
}
input{
	background-color:#182236;
	border-left:1px solid #5b7290;
	border-top:1px solid #5b7290;
	border-right:1px solid #182236;
	border-bottom:1px solid #182236;
	font:normal 100% Georgia, "Times New Roman", Times, serif;
	color:#7B91B1
}
input#modlgn_username, input#modlgn_passwd{
	height:18px	
}
.button{
	font:bold 100% Georgia, "Times New Roman", Times, serif;
	color:#fff;
	text-align: center;
	background-color:#7b91b1;
	border-left:1px solid #7b91b1;
	border-top:1px solid #7b91b1;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	padding:3px;
    width: auto;
}



/* Advertisement */
.module_text{
	padding: 0;
	margin: 0 0 20px 0;
	font-size:85%
}
div.module_text div{
	
}
div.module_text div div div {
	padding:0;
	border:1px solid #72859F;
	background:url(../images/top_menu_bg.png);
	text-align:left;
	padding-left: 10px;
	padding-right:10px;
	padding-top:5px
}
div.module_text div div div div{
	border:0;
	padding-bottom:5px
}
div.module_text div div{
	padding-bottom:0
}
div.module_text h3{
	color: #C5DCFF;
	text-align: center;
	line-height: 170%;
	font-weight: bold;
	font-size: 100%;
	margin: 0;
	border-bottom:1px solid #72859F
}
div.module_text .bannergroup_text, div.module_text .bannergroup_text div{
	background:url(../images/empty_bg.gif) left top no-repeat;
	text-align:left;
	padding-left:0
}
.moduletable, .moduletable_text{
	text-align:left
}
.moduletable_text .bannergroup_text{
	padding-left:0
}

body.contentpane{
	font:normal 85% Georgia, "Times New Roman", Times, serif;
	color:#000;
	background-image:none;
	background-color:#fff
}
body.contentpane img{
	border:0
}
.pagenav, a.pagenav:link, a.pagenav:visited, a.pagenav:hover,
.pagenavbar, .pagenavbar a:link, .pagenavbar a:visited, .pagenavbar a:hover{
	color:#7B91B1
}

div.module .poll div{
	background-image:none
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

#frame_bg {
	margin:0;
	padding:0;
	background: transparent url(../images/page_bg.jpg) top left repeat-x
}

div#wrapper {
	margin-left: auto;
	margin-right: auto;
	width:980px
}

div#extras {
	width:980px;
	margin:0 auto;
	height:31px;
	padding:0 10px
}

#footer {
	height:25px;
	line-height:25px;
	margin:0 auto;
	padding:0;
	font-size:85%;
	text-align:right
}

#footer a:link, #footer a:visited, #footer:hover{
	color:#5c6a7c
}
#topnews {
	margin:40px 0 0 0;
	width:490px;
	height:120px;
	color:#666
}

td.middle_pad {
	width: 20px
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/


div.offline {
	background: #fffebb;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.2em;
	padding: 5px
}

/* headers */
div.componentheading {
    padding-left: 0px;
    text-align:left;
    border-bottom:1px dotted #72859f;
    line-height:180%;
	font:bold 120% Georgia, "Times New Roman", Times, serif;
	color:#99baff
}

h1 {
	padding: 0;
	font: bold 130% Georgia, "Times New Roman", Times, serif;
	vertical-align: bottom;
	color: #c5dcff;
	text-align: left;
	width: 100%
}

h2, .contentheading {
	padding: 0;
	font: bold 100% Georgia, "Times New Roman", Times, serif;
	vertical-align: bottom;
	color: #789dea;
	text-align: left;
	width: 100%
}

table.contentpaneopen h3 {
	margin-top: 25px
}

h4 {
	font: bold 100% Georgia, "Times New Roman", Times, serif;
	color: #7B91B1
}

h3, .componentheading, table.moduletable th, legend {
    margin: 0;
    font: bold 120% Georgia, "Times New Roman", Times, serif;
    color:#c5dcff;
    padding-left: 0px;
    margin-bottom: 10px;
    text-align: left
}

/* small text */
.small {
	font-size: 85%;
	color: #7B91B1;
	font-weight: normal;
	text-align: left
}

.modifydate {
    height: 20px;
    vertical-align: bottom;
	font-size: 85%;
	color: #7B91B1;
	font-weight: normal;
	text-align: left
}

.createdate {
	height: 20px;
	vertical-align: top;
	font-size: 85%;
	color: #7B91B1;
	font-weight: normal;
	vertical-align: top;
	padding-bottom: 5px;
	padding-top: 0px

}
a.readon {
	margin-top: 10px;
	display: block;
	float: left;
	padding-right: 20px;
	line-height: 14px;
	height: 16px
}

/* form validation */
.invalid { border-color: #ff0000 }
label.invalid { color: #ff0000 }


/** overlib **/

.ol-foreground {
	background-color: #f6f6f5
}

.ol-background {
	background-color: #666665
}

.ol-textfont {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 85%
}

.ol-captionfont {
	font: bold 100% Georgia, "Times New Roman", Times, serif;
	color: #f6f6f6
}
.ol-captionfont a {
	color: #0B55C4;
	text-decoration: none;
	font-size: 100%
}

.ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
	padding-left: 5px
}

a.mainlevel:hover {

}

/* spacers */
span.article_separator {
	display: block;
	height: 20px
}

.article_column {
	padding-right: 5px
}

.column_separator {
	border-left: 1px dashed #7c93b4;
	padding-left: 10px
}


div#maindivider {
  border-top: 1px solid #ddd;
  margin-bottom: 10px;
  overflow: hidden;
  height: 1px
}

table.blog span.article_separator {
	display: block;
	height: 20px
}

/* table of contents */
table.contenttoc {
  margin: 10px;
  border: 1px solid #768ba7;
  padding: 10px;
  font-size:85%;
  float:right
}

table.contenttoc td {
  padding: 0 5px;
}


/* content tables */
td.sectiontableheader {
  background: #7b91b1;
  color: #fff;
  font-weight: bold;
  padding: 4px;
  border-right: 1px solid #fff
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
  padding: 4px
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
  padding: 3px
}


/* content styles */
table.contentpaneopen, table.contentpane {
	margin: 0;
	padding: 0;
	width: 100%
}

table.contentpaneopen li {
	margin-bottom: 5px
}

table.contentpaneopen fieldset {
	border: 0
	
}

table.contentpaneopen h3 {
	margin-top: 25px
}

table.contentpaneopen h4 {
	font: bold 100% Georgia, "Times New Roman", Times, serif;
	color: #7B91B1
}

.highlight {
	background-color: #fffebb
}

/* module control elements */
table.user1user2 div.moduletable {
	margin-bottom: 0px
}

#leftcolumn div.module table ,#rightcolumn div.module table {
	width: auto
}

/* forms */

table.adminform textarea {
  width: 540px;
  height: 400px;
  font-size:80%;
  color: #000;
  background-color:#fff;
  border:1px solid #bbb;
  font: normal 100% Georgia, "Times New Roman", Times, serif
}

/* thumbnails */
div.mosimage         {  margin: 5px; }
div.mosimage_caption {  font-size: 85%; color: #666 }

div.caption       { padding: 0 10px 0 10px; }
div.caption img   { border: 1px solid #CCC; }
div.caption p     { font-size: 85%; color: #666; text-align: center}

/* Parameter Table */
table.paramlist {
	margin-top: 5px
}

table.paramlist td.paramlist_key {
	width: 128px;
	text-align: left;
	height: 30px
}

div.message {
	font: bold 120% Georgia, "Times New Roman", Times, serif;
	color : #c30;
	text-align: center;
	width: auto;
	background-color: #f9f9f9;
	border: solid 1px #d5d5d5;
	margin: 3px 0px 10px;
	padding: 3px 20px
}

/* Banners module */

/* Default skyscraper style */

/* Text advert style */

.banneritem_text {
	padding: 4px;
	font-size: 100%
}

.bannerfooter_text {
	padding: 4px;
	font-size: 11px;
	background-color: #F7F7F7;
	text-align: right
}

/* System Messages */
/* see system general.css */

.pagination span { padding: 2px }
.pagination a    { padding: 2px}

/* Polls */
.pollstableborder td {
	text-align: left
}

/* Frontend Editing*/

legend {
	margin: 0;
	padding: 0 10px
}

td.key {
	border-bottom:1px solid #eee;
	color: #fff
}

/* Tooltips */
.tool-tip {
	float: left;
	background: #ffc;
	border: 1px solid #D4D5AA;
	padding: 5px;
	max-width: 200px
}

.tool-title {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-weight: bold;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 5px;
	background: url(../../system/images/selector-arrow.png) no-repeat
}

.tool-text {
	font-size: 100%;
	margin: 0
}

/* System Standard Messages */

#system-message dd.message ul { background: #fff url(../../system/images/notice-note.png) 4px center no-repeat;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #fff url(../../system/images/notice-alert.png) 4px center no-repeat; border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #fff url(../../system/images/notice-note.png) 4px center no-repeat; border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2}



/* ****************************************************************************** */

button {
	font:bold 85% Georgia, "Times New Roman", Times, serif;
	color:#fff;
	text-align: center;
	background-color:#7b91b1;
	border-left:1px solid #7b91b1;
	border-top:1px solid #7b91b1;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	padding:3px;
    width: auto
}


/* ********************************************************************** */

input[type="checkbox"], input[type="radio"]{
   background: transparent;
   border: none
}

/* -------------------------- */
form table.adminform button{
	margin-right:5px
}
#editor-xtd-buttons a:link, #editor-xtd-buttons a:visited, #editor-xtd-buttons a:hover{
	color:#000	
}

Grazie

Strumenti
Mostra una versione stampabile Invia questa pagina per email