aiuto sfondo

**apprentice** · 07-01-2010, 19:58

salve a tutti, sono l'ultimo arrivato delle 18 e 50!!
ho appena acquistato il mio primo spazio web e sono emozionatissimo!!

sto ovviamente completando il mio primo sito e immancabilmente mi trovo difronte ad un intoppo..
veramente ne ho trovato molto più di uno, ma fin ora sono riuscito a cavarmela, vengo al dunque:
ho un div in un altro div, dentro un div contenitore con un immagine di sfondo fixed center center, mi piacerebbe molto renderla centrata orizzontalmente rispetto a uno di questi div e non alla pagina intera, è possibile?
grazie mille per l'aiuto!

**miki003** · 07-01-2010, 20:30

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
#container {
	background-attachment: fixed;
	background: url(bg.jpg) no-repeat;
	background-position: 100px 100px;
	padding: 0px;
	height: 400px;
	width: 400px;
	border: 2px solid #000;
}
-->
</style>
</head>

<body>
<div id="container"></div>
</body>
</html>

Ovviamente devi modificare le misure in base alle misure del tuo div e della tua immagine di sfondo, ma il concetto resta lo stesso

**apprentice** · 07-01-2010, 21:47

innanzi tutto grazie per la risposta miki003,
ho provato a dare una posizione in pixel all'immagine ma prende sempre la pagina come riferimento e non riesco a mettere uno dei div contenitori absolute, mi si impapocchia tutto

provo a postare il codice, se ti va di darli un occhiata:

codice:

<body>
<div id="container">
  <div id="header">
    

</p>
    

[img]componenti/OM_logo-05.png[/img]</p>
  </div>
  <div id="navbar">
    <div id="home">home</div>
    <div id="pro">prodotti e servizi</div>
    <div id="port">portfolio</div>
    <div id="chi">chi sono</div>
    <div id="cont">contatti</div>
  </div>
  <div id="content">
    <div id="content2">
      <div id="spaziatore"></div>
      <div id="content3">
        <div id="nuto">
          

qui troveranno spazio i contenuti </p>
        </div>
      </div>
      <div id="filetto"></div>
    </div>
    <div id="footer">
      

home - prodotti e servizi - portfolio - chi sono - contatti

        powered by Omnigrafica 2010</p>
    </div>
    <div id="fine"></div>
  </div>
</div>
</body>

**apprentice** · 07-01-2010, 21:47

il css

codice:

@charset "UTF-8";
* {
	margin:0 0 0 0;
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
}
body {
	background-color: #000;
	margin-left:auto;
	margin-right:auto;
}
#container {
	position: relative;
	background-image:url(../componenti/OM_sfondo.gif);
	background-repeat:repeat-y;
	margin:0 auto 0 auto;
	width: 1200px;
}
#header {
	width: 1200px;
	background-image:url(../componenti/OM_sfondotop.png);
	background-repeat:no-repeat;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	height:155px;
}
#logo {
	margin-top: 35px;
	margin-left:100px;
}
/* ------- navigazione ------- */
#navbar {
	background-image: url(../componenti/OM_navbar.gif);
	height: 52px;
	width:1200px;
	position: relative;
	text-align: center;
	margin-bottom: 0px;
}
#home {
	background-image: url(../componenti/navbar/home_on.gif);
	float:left;
	margin-left: 298px;
}
#pro {
	float: left;
}
#port {
	float: left;
}
#chi {
	float: left;
}
#cont {
	float: left;
}
a.link:hover {
	color:#CAE14D;
}
a.link:active {
	padding-top:18px;
	height:35px;
}

a.link {
	display:block;
	position:relative;
	padding:17px 23px 0 23px;
	height:35px;
	color:#666;
	text-decoration:none;
}


/* -------- fine navigazione -------- */
#content {
	position: relative;
	background-image:url(../componenti/OM_sfondogiu.png);
	background-repeat:no-repeat;
	background-width:100%;
	background-height:100%;
	background-position:top;
	background-attachment:fixed;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
	width: 1200px;
}	
#content2 {
	position:relative;
	width: 1200px;
	min-height:800px;
	margin:0 auto 0 auto;
	background-image:url(../componenti/OM_luce.png);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center center;
}
#spaziatore {
	width:1200px;
	height:10px;
	background-image:url(../componenti/OM_ombrabar.png);
	position:relative;
}
#content3 {
	width:978px;
	margin:0 0 0 100px;
	padding: 0 11px 0 11px;
	position: relative;
	background-image:url(../componenti/Om_sfondonuto.png);
	background-repeat:repeat-y;
	border-bottom:solid #000;
	border-bottom-width:1px;
	-webkit-border-top-right-radius: 15px;
	-webkit-border-top-left-radius: 15px;
	-moz-border-radius: 15px 15px 0 0;
}
#nuto {
	width:978px;
	color: #F90;
	text-align: left;
	position:relative;
	padding:0 0 10px 0;
}
#filetto {
	position:relative;
	width:1000px;
	height:1px;
	margin:0 auto 0 auto;
	border-top-color:#CAE14D;
	border-top-style:solid;
	border-top-width:1px;
}
#footer {
	width:1000px; 
	position:relative;
	background-color:#000;
	width:100%;
	margin-top:10px;
	padding-top:0.3em;
	padding-bottom:0.4em;
	color: #333;
	text-align:center;
	font-size: 0.7em;
	line-height: 1.2em;
}
#footer p a {
	text-decoration: none;
	color: #333;
	display: inline;
}
#footer p a:hover {
	text-decoration: underline;
}
#fine {
	height:15px;
}
/* ------- aggiusutamenti compatibilità ------- */
a img {
	border: 0;
}
a:focus {
	outline: 0;
}

**apprentice** · 07-01-2010, 22:18

c'è lho fatta!!!!
sono riuscito a mettere il primo container absolute!!!
secondo voi è corretto come metodo?

codice:

#container {
	position: absolute;
	background-image:url(../componenti/OM_sfondo.gif);
	background-repeat:repeat-y;
	left: 50%;
	margin:0 -600px;
	width: 1200px;
}

w w w w w !!!!

Discussione: aiuto sfondo

Strumenti discussione

Ricerca discussione

Visualizza

aiuto sfondo

Permessi di invio