css due immagini di sfondo

Tipo di nuovo in css ma ho un'immagine che voglio in alto a sinistra e poi un'altra immagine che voglio ripetere dopo. Attualmente mi stanco:css due immagini di sfondo

CSS

#topsection{ 
    background: url('../images/bannerBGs.jpg'); 
    background-repeat:no-repeat; 
    background: url('../images/bannerBGl.jpg'); 
    background-repeat:repeat-x; 
    height: 200px; /*Height of top section*/ 
    color: White; 
    text-align:center 
} 

#topsection a{ 
    color: #FFFF80; 
} 

#topsection h1{ 
    margin: 0; 
    padding-top: 25px; 
    text-align:Left 
} 

#topsection h2{ 
    margin: 0; 
    padding-top: 0px; 
    text-align:Center 
}

HTML

<!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" lang="en" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>IG Indy Gamers</title> 
<link rel="stylesheet" type="text/css" href="CSS/mycss.css" media="screen" />  
</head> 
<body> 
<div id="maincontainer"> 

<div id="topsection" > <div class="innertube"> 
    <h1>IG -Indy Gamers </h1> 
    <FONT style="BACKGROUND-COLOR: blue"><p align='right'><a href="#"> &nbspSignup</a> </font>/<a href='Login.html' id='LoginContent' >Login </a></p> 
    <ul id="list-nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Reviews</a></li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Forums</a></li> 
     <li><a href="#">Demo's</a></li> 
     <li><a href="#">Members</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 

</div></div>

ma la seconda immagine solo copie rispetto al primo. Puoi suggerire un altro modo per farlo. Ho sentito che usare i livelli può farlo, ma non ne so ancora nulla.

fonte

2012-08-06 Glen Morse

Sembra che CSS3 supporti multiple background images; si specifica li separati da virgole:

background: url('banner1.jpg'), url('banner2.jpg'); 
background-position: left top, left top; 
background-repeat: no-repeat, repeat;

Gioca con background-position fino a quando non fa ciò che si vuole.

IE < 9 non supporta questa funzione.

fonte

2012-08-06 00:29:41

Questo ha funzionato Grazie! –

Anche questo Q mi ha aiutato con il gradiente di pettinatura con l'immagine di sfondo http://stackoverflow.com/questions/16589519/use-css-gradient-over-background-image –

Non lo sapevo, grazie. –

È necessario creare 2 elementi contenenti: 1 per l'immagine ripetuta. E un secondo per l'immagine in alto a sinistra.

In altre parole, qualcosa sulla falsariga di:

<div class="repeatingBgImage"> 
    <div class="otherBgImage"> 
    <!-- content --> 
    </div> 
</div>

CSS funziona in un modo ben, a cascata. Tutto ciò che si dichiara può e verranno sovrascritti dalla riga successiva nella dichiarazione, vale a dire,

.someClass { 
    color: yellow; 
    color: blue; 
}

Il colore finale del testo sarà blu, non verde (giallo + blu = verde).

Dato il campione ...

#topsection{ 
    background: url('../images/bannerBGs.jpg'); 
    background-repeat:no-repeat; 
    background: url('../images/bannerBGl.jpg'); 
    background-repeat:repeat-x; 
}

... l'immagine di sfondo sarà sempre bannerBGl.jpg e repeat-x dal momento che è più bassa nella dichiarazione del CSS, sovrascrivendo così l'immagine bg precedente e ripetere dichiarazione.

fonte

2012-08-06 00:28:02

Se stai mirando ai nuovi browser, css3 ora può applicare due immagini di sfondo su un elemento. Si potrebbe voler controllare questo fuori

http://www.css3.info/preview/multiple-backgrounds/

fonte

2012-08-06 00:29:59 index

si CSS

/*TOPSECTION */ 
#topsection{ 
background: url('../images/bannerBGs.jpg'); 
background-repeat:no-repeat; 
background: url('../images/bannerBGl.jpg'); 
background-repeat:repeat-x; 
height: 200px; /*Height of top section*/ 
color: White; 
text-align:center 
}

provare questo

background-image:url('../images/bannerBGs.jpg'),url('../images/bannerBGl.jpg'); 
background-repeat: no-repeat, repeat-x; 
background-position: left top , 20px 30px; 
//background-position adjust second value which in px until you meet your requirment

Grazie!

fonte

2013-07-23 08:36:16

css due immagini di sfondo

risposta

Problemi correlati