|
|
 | To bagrundsbilleder med CSS
Fra :  Nickoe  | Vist : 1131 gange
200 point
Dato : 20-07-07 21:44 |
|
Ja daw
Nu har jeg selvfølgelig sidet og fiflet lidt med noget hjemmeside, og vil have to billeder til at fremkomme i baggrunden, men har lidt problemer.
Jeg kan ikke få dem begge til at vise sig med denne kode:
Kode
body {
background: #354A77 url(../img/bg.png);
background-repeat: repeat-x;
color: #444;
font: normal 62.5% "Lucida Sans Unicode",sans-serif;
margin: 0;
background-image: url(../img/bobler.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right bottom;
} |
Forstår det ikke helt, men er jo trodsalt også nybegynder. Det er kun det sidste billede der bliver vist, men hvis jeg fjerner de sidste 4 linier, så bliver det første billede godt nok vist.
Er der nogen der kan forklare mig hvad der er galt?
</nickoe>
ps. har ikke søgt helt vildt selv, men tænkte at der var nogle der ville have nogel point...
| |
 | Accepteret svar
Fra : molokyle | 
Modtaget 200 point
Dato : 21-07-07 00:03 |
|
Du kan kun benytte ét (= 1) baggrundsbillede pr. element. Det være sig <body>, <div>, <p>, <span> eller andre (X-)HTML-elementer.
Vil du have mere end én billedefil som baggrundsgrafik må du 'merge' disse. Dvs. samle de 2 billedelementer i én fil ..evt. vha. et billedbehandlignsprogran; eksempelvis PhotoShop.
I CSS er der en precedensregel som siger, at KUN sidstnævnte regler er gyldige (..de foregående bliver 'overskrevet').
Konstruktionen:
Kode
p {background:blue;}
p {background:red;} |
..vil derfor i HTML koden:
...give teksten en RØD baggrundsfarve i tekst afsnittet.
Nøjagtig det samme gælder for baggrundsgrafik angivet med CSS reglerne:
1.) background: #354A77 url(../img/bg.png);
2.) background-image: url(../img/bobler.png);
Da begge er synonyme med reglen 'background' : http://www.w3schools.com/css/pr_background.asp
Det ene er blot et 'specialtilfælde' af SAMME CSS regel.
/img/bobler.png burde blive brugt som baggrundsgrafik i ALLE tilfælde 
 </MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 21-07-07 00:06 |
|
Ps. For illustrationen/eksemplets skyld, gælder det samme som for ovenstående:
Kode
p {background:blue;
background-color:red;
} |
RØD baggrund på tekst.
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 21-07-07 00:10 |
| | |
| Kommentar
Fra : molokyle |
Dato : 21-07-07 00:11 |
| | |
| Kommentar
Fra : molokyle |
Dato : 21-07-07 17:44 |
| | |
| Kommentar
Fra : Nickoe |
Dato : 21-07-07 18:34 |
|
Ok, jeg forstår godt det med at man kun kan benytte ét bagundsbilleder pr. element, men HVORFOR er det lige lavet sådan, synes da ikke at der burde være nogle problemer med at have flere billederi ét element.
Men hvis jeg skal lave dem til ét billede, så vil jeg jo ikke kunne få "bg.png" til at være i toppen af siden, hen ad x-aksen, og "bobler.png" til at være i bunden til højre på siden. (Når mine sider ikke er lige lange.)
Er der et format, hvor man kan få to billeder til at være repesenteret i ét billede, men hvor de har varierende afstand? (Tror ikke selv på det.)
</nickoe>
| |
| Kommentar
Fra : molokyle |
Dato : 21-07-07 20:10 |
|
Så skal du bruge denne teknik EFTER, at have samlet dit baggrundsbillede i ét:
http://www.cssplay.co.uk/layouts/background
Så vil dit baggrundsbillede altid tilpasse sig dit vindue ..uanset skærmopløsning og viduesstørrelse.
Prøv selv i ovenstående link, at ændre størrelsen på dit vindue
...eller skift skærmopløsning.
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 21-07-07 20:13 |
|
..ellers må svaret blive; et klart og rungende : NEJ ...det kan du ikke !!!
Ps. Det er ikke mig som definerer standarden. Det er : http://www.w3.org/
</MOLOKYLE>
| |
| Kommentar
Fra : Nickoe |
Dato : 21-07-07 20:34 |
|
Det er ikke det jeg mener, det er fordi, jeg vil have:
- en gradient i toppen af siden, som går hen ad x-aksen, hvis du forstår. (bg.png)
- billedet af nogle bobler nederst på siden, sådan man kan scrolle væk fra billedet. (bobler.png)
</nickoe>
| |
| Kommentar
Fra : Nickoe |
Dato : 21-07-07 21:06 |
|
Det kunne godt være at der var en grund til det, og du kendte den. Men vil det så sige at jeg bliver nødt til at lave et nyt element, som kunne se sådan her ud:
Kode
bobler {
background-image: url(../img/bobler.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right bottom;
} |
Er det rigtigt?
Hvad skal jeg så skrive i *.html for at få den til at vise sig? Hvis jeg skriver Kode
<div class="bobler">
</div> |
Virker det ikke for mig.
</nickoe>
| |
| Kommentar
Fra : Nickoe |
Dato : 21-07-07 22:37 |
|
Det virker ikke for mig.
</nickoe>
| |
| Kommentar
Fra : molokyle |
Dato : 22-07-07 00:21 |
| | |
| Kommentar
Fra : Nickoe |
Dato : 22-07-07 07:13 |
|
Nej, det er godt nok de rigtigge værdier, som jeg har skrevet, problemet er bare at de begge skal bruges til bagrundsdekoration på min side. Og dette kunne jeg ikke få til at fungere, pga. at CSS ikke understøtter flere billeder o.lig. i et element. Så derefter spørger jeg om det er sådan jeg skal gøre:
---
Citat
Det kunne godt være at der var en grund til det, og du kendte den. Men vil det så sige at jeg bliver nødt til at lave et nyt element, som kunne se sådan her ud:
Kode
bobler {
background-image: url(../img/bobler.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right bottom;
}
Er det rigtigt?
Hvad skal jeg så skrive i *.html for at få den til at vise sig? Hvis jeg skriver
Kode
<div class="bobler">
</div>
Det virker ikke for mig.
</nickoe> |
| |
| Kommentar
Fra : molokyle |
Dato : 22-07-07 09:36 |
|
Det er klart det ikke virker
Du putter jo intet indhold i din DIV og vil derfor ikke få vist nogen baggrund.
Prøv i stedet at skrive:
Kode
<style type="text/css">
body {
background-image: url(../img/bobler.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right bottom;
}
</style> |
Så skal du intet tilføje til din HTML, da ovenstående gælder for hele <body> .. </body> elementet.
Men du har ret i, at man kan lave en såkaldt wrapper med DIV ...eller SPAN udenom den kode som indeholder de elementer, hvor du vil bruge pågældende baggrundsbillede. Altså noget alá:
Kode
<style type="text/css">
#topbillede
{
url(../img/bg.png);
..osv
}
#bundbillede
{
url(../img/bobler.png);
..osv.
}
</style> |
I HTML'en skriver du så noget alá:
Kode
<div>
<span id="topbillede">
Her indsættes det indhold som topbilledet skal være baggrund for
</span>
<span id="bundbillede">
Her indsættes det indhold som bundbilledet skal være baggrund for
</span>
</div> |
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 22-07-07 09:47 |
|
UPSADASSE... 
Der skal selvfølgelig stå background foran de 2 ID'ere.
Jeg skriver lige et eksempel til dig og uploader det til mit eget domæne.
..hold on !
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 22-07-07 10:11 |
| | |
| Kommentar
Fra : molokyle |
Dato : 22-07-07 10:20 |
| | |
| Kommentar
Fra : molokyle |
Dato : 22-07-07 10:26 |
| | |
| Kommentar
Fra : molokyle |
Dato : 25-07-07 11:59 |
|
Nu har du haft 5 dage at kigge på det Nickoe . Jeg hoster ikke eksemplerne for evigt
Kommer der ingen respons inden for nogle dage, så sletter jeg dem.
</MOLOKYLE>
| |
| Kommentar
Fra : Nickoe |
Dato : 26-07-07 23:28 |
|
Jeg har lige været en tur i sverige, uden adgang til kandu.dk, så du må undskylde den manglende respons. Så må lige til at kigge på det.
</nickoe>
| |
| Kommentar
Fra : molokyle |
Dato : 27-07-07 09:30 |
|
Helt iorden...
Jeg er selv på arbejde (..flytter data) til i eftermiddag/-aften. Derefter er det week-end, så det haster ikke.
Eksemplerne vil ikke blive slettet , nu da du har givet lyd. Det er ikke fordi de fylder så meget plads, det er mere for mit eget overbliks skyld. Lige pludelig kan jeg nemlig finde mig selv sidde og rode rundt i måske 200 forskellige eksempler og så er det mindre sjovt.
</MOLOKYLE>
| |
| Kommentar
Fra : Nickoe |
Dato : 27-07-07 10:40 |
|
Forstår det godt, men må meddele, at jeg lige skal en tur i sommerhus her i weekenden, så svarer nok ikke før på mandag med hvordan det går, men må lege kigge på det.
</nickoe>
| |
| Kommentar
Fra : Nickoe |
Dato : 27-07-07 11:51 |
|
Nu har jeg fået det til at virke, gik ud fra test3.html.
Jeg tilføjede dette i mit stylesheet:
Kode
#topbillede
{
background: #354A77 url(../img/bg.png);
background-repeat: repeat-x;
background-position:top left;
}
#bobler
{
background-image: url(../img/bobler.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right bottom;
} |
Og dette i html:
Kode
<html>
<head>
</head>
<body>
<div id="topbillede">
<div id="bobler">
Indholdet på min side...
</div>
</div>
</body>
</html> |
Så nu er det der. Men de havde nu været smartere, hvis W3C havde lavet det muligt at bruge flere baggrundsbilleder pr. element. Så ville CSS være endnu stærkere, da man ikke skulle til at ændre i html'en...
</nickoe>
| |
| Kommentar
Fra : molokyle |
Dato : 27-07-07 20:02 |
|
Hvis 3w.org havde været smartere... 
Nøeh.. jeg lurer store problemer med ikke blot, at skulle kunne navngive, dimensionere, positionere forgrundselementer. Hvis de samme muligheder eksisterede for baggrundselementer?
Det lyder umiddelbart besnærende med 7 forskellige individuelt positionerede baggrunsbilleder/-farver til f.eks. en overskrift/banner? Men...
..dét ville da give en enorm administration... for slet ikke at snakke om; det 'overhead' for forgrundselementer, som kun behøver een baggrund, at skulle besværes med.
For slet ikke at snakke om browserne, som jo skal tolke alle disse egenskaber. (= tidsspilde.)
I stedet er det rent faktisk nemmere, at samle de 7 baggrundsbilleder/-farver vha. et billedbehandlingsprogram ..og så benytte dette ene billede for ét element ...f.eks. <body> ..eller et CSS 'wrapper' elemement.
Man skal vis have MEGET specielle ønsker for en specifik side før man som dig, kan se en sådan 'fordel' !
Citat
Så ville CSS være endnu stærkere, da man ikke skulle til at ændre i html'en... |
..næeh, men der sku' dælme rettes meget i CSS'en 
..og rettelser i (X-)HTML'en ville man alligevel ikke komme uden om, da CSS'en skulle refereres pr. (X-)HTML element. Enten via en class=".." eller en id="..", hvis det kun det er de enkelte elementer som berøres.
*IMHO* </MOLOKYLE>
| |
| Kommentar
Fra : Nickoe |
Dato : 29-07-07 23:42 |
|
Hmmm, det kan der måske være noget om, men så må vi jo tilføve de fire linier mere...
</nickoe>
| |
| Godkendelse af svar
Fra : Nickoe |
Dato : 30-07-07 10:28 |
|
Jo, det kan egentlig godt være. Havde helt glemt det. Tak.
</nickoe>
| |
 | Du har følgende muligheder | |
|
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.
Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
| |
|
|