1. Dom
  2. Pytanie i odpowiedź
  3. css dwa obrazy tła

css dwa obrazy tła

2012-08-06 13 views
20

Rodzaj nowego do css, ale mam jedno zdjęcie, które chcę w lewym górnym rogu, a następnie kolejne zdjęcie, które chcę powtórzyć po tym. Obecnie wymęczone:css dwa obrazy tła

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>

ale drugi obraz tylko w ciągu pierwszych egzemplarzy. Czy możesz zaproponować inny sposób na zrobienie tego. Słyszałem, że używanie warstw może to zrobić, ale nic jeszcze o tym nie wiem.

Źródło

2012-08-06 Glen Morse

Odpowiedz

50

Wygląda jak CSS3 obsługuje multiple background images; podasz im oddzielonych przecinkami:

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

grać z background-position aż robi to co chcesz.

IE < 9 nie obsługuje tej funkcji.

Źródło

2012-08-06 00:29:41

+0

To zadziałało dzięki! –

+1

Ta Q pomogła mi również w czesaniu gradientu z obrazem tła http://stackoverflow.com/questions/16589519/use-css-gradient-over-background-image –

+0

Nie wiedziałem tego, dziękuję. –

3

Musisz utworzyć 2 elementy zawierające: 1 dla powtarzającego się obrazu. I druga dla obrazu w lewym górnym rogu.

Innymi słowy, coś wzdłuż linii:

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

CSS działa w, dobrze, kaskadowy sposób. Wszystko, co deklarują puszkę i zostaną zastąpione przez następnej linii w rachunku, czyli

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

Ostateczny kolor tekstu będzie niebieski, a nie zielony (żółty + niebieski = zielony).

Biorąc próbka ...

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

... obraz tła zawsze będzie bannerBGl.jpg i repeat-x ponieważ jest niższy w deklaracji CSS, więc nadpisanie poprzedniej bg obrazu i powtórzyć deklarację.

Źródło

2012-08-06 00:28:02

0

ty 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 
}

spróbować tej

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

Dzięki!

Źródło

2013-07-23 08:36:16

Powiązane problemy

 Powiązane problemy