Immagini e background

**SilentSalmo** · 10-12-2012, 22:15

Ciao a tutti, premetto che sono un neofita essendomi appena avvicinato all'html e al css, mi sto ancora esercitando sperando di realizzare presto il mio primo sito professionale. Volevo sapere se fosse oltre ad una immagine di background (che nel mio caso si ripete sia in orizzontale che in verticale) fosse possibile posizionare a destra e a sinistra della pagina due altre immagini successive, come una sorta di banner che nel mio caso fungono da arricchimento grafico.
Vi ringrazio anticipatamente della cortesia e della disponibilta.
Un saluto, Andrea.

**Prill** · 10-12-2012, 22:59

ciao SilentSalmo, sì, si può, solo bisogna capire quale sia il modo più "economico" per farlo. Un sistema potrebbe essere avere tre div affiancati, due con le immagini laterali e quello centrale col contenuto, ma se le immagini possono andare come sfondo e hai per il tuo div una larghezza precisa, allora le due immagini potrebbero essere combinate e andare come sfondo del body, o ancora potrebbero essere inserite con posizioni assolute. Hai un layout e del codice da cui partire e su cui ragionare?

**SilentSalmo** · 10-12-2012, 23:22

Certo, ecco l'html:

<html>
<head>
<title>Priolo Parla</title>
<link rel="stylesheet" type="text/css" href="priolo parla css.css" />

</head>

<body>

<h1>Associazione Culturale Priolo Parla</h1>

Chi Siamo</p>

Dove Siamo</p>

Contatti</p>

<h6>Sito in costruzione</h6>

</body>
</html>

Ecco il css:

body {

background-color: #6495ED;
background-image: url("galletti.jpg");
background-repeat: repeat;
background-attachment: fixed;
background-position: right bottom;

margin: 40px 40px 10px 70px;

}

h1 {
color:#FFA500;
background-color:#822222;
text-align: center;
font-size: 60px;

}

a:hover {
color

range;
ont-style: italic;
}

a {
color:#800000
}

p{
color:#FF0000;
font-size: 30px;
text-align: center;
}

h6{
color:#DC143C;
font-size: 20px;
text-align: center;
}

Allego un immagine di come appare il sito e di ciò che vorrei fare!

upload

**SilentSalmo** · 11-12-2012, 18:50

In parte sono riuscito a risolvere il problema con l'html attraverso img src, poi con i valori di hspace li sposto ma non riesco a mettere 2 immagini sullo stesso asse orizzontale, in modo ma mettere un testo al centro tra le due.

**slegolego** · 12-12-2012, 11:26

Ciao
io ti consiglierei di modificare l'html in maniera da creare dei blocchi specifici per i tuoi contenuti.
Mi spiego, il layout che stai cercando di creare si chiama layout a tre colonne, e utilizzando i DIV in maniera opportuna questo potrebbe esserti utile

codice:

<body>
    <div id=”container”> 
        <div id=”header”></div> 
        <div id=”col-sx”></div>
        <div id=”col-dx”></div>
        <div id=”content”></div>
        <div id=”footer”></div> 
    </div>
</body>

mentre per il css

codice:

div#col-sx{
float:left;
width:160px; 
padding:1em 0 0 10px}

div#col-dx{
float:right; 
width:160px; 
padding:1em 5px}

div#content{
margin:0 170px; 
padding:1em 10px}

div#footer{clear:both}

Questo codice viene direttamente dagli esempi, anche se non proprio aggiornatissimi, presi da qui http://www.html.it/pag/14280/layout-...nne-con-float/
La guida riportata qui sopra ti permette di approfondire lo studio dei CSS e dell'HTML , ottimo spunto da cui partire a districarsi nel mondo del web design.
In bocca al lupo !

Discussione: Immagini e background

Strumenti discussione

Ricerca discussione

Visualizza

Immagini e background

Permessi di invio