[CSS] vaste achtergrond; maar niet helemaal - Softwareontwikkeling

dinsdag 26 augustus 2003 12:14

Acties:

0 Henk 'm!

Topicstarter

Ik heb een website, waarin ik met css een achtergrondplaatje heb gedefinieerd die "fixed" in de linksbovenhoek staat.
Dit heb ik gedaan omdat dat plaatje bij het ontwerp van de website hoort,
en dus linksbovenin netjes moet aansluiten.
Dat ziet er allemaal mooi netjes en gelikt uit, maar nu heb ik het volgende probleem.
De achtergrond van de site bestaat uit een sterrenhemel. Door dit in de body-tag te definieren alszijne een repeated background, kan je heel makkelijk de hele achtergrond van sterren voorzien; maar ik heb al gebruik gemaakt van de fixed-mogelijkheid van css. Nu kan ik dus voor de rest van de site niet meer sterren als repeated achtergrond kiezen. Nou kan ik wel dat plaatje wat ik fixed het staan,
zo groot maken dat hij de hele site beslaat, maar dan wordt dat plaatje eigenlijk te groot.

Heeft iemand een idee hoe ik dit zou kunnen oplossen?
(meerdere backgrounds definieren zou gaaf zijn, maar kan voor zover ik weet niet)

dinsdag 26 augustus 2003 12:19

Acties:

0 Henk 'm!

Anoniem: 60511

Snap niet helemaal wat je bedoelt, maar ga ervan uit dat je één plaatje als achtergrond per pagina wil hebben... meer dan één zal niet lukken tenzij je met <div> gaat werken:

Door een verschillende classen te definieren voor elke body, kan je dmv verschillende classen ook dus verschillende achtergonden gebruiken voor verschillende pagina's.

<body class="sterFixed">
<body class="sterRepeat">

[edit->]

(meerdere backgrounds definieren zou gaaf zijn, maar kan voor zover ik weet niet)

Dat zou dus betekenen dat je gebruik moet maken van divs en deze uitlijnen (eventueel dynamisch aan de bovenkant laten hangen...)

[ Voor 28% gewijzigd door Anoniem: 60511 op 26-08-2003 12:20 ]

dinsdag 26 augustus 2003 12:19

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

zet de sterrenhemel als background, en zet het plaatje in een div die je absoluut positioneerd.
Mozilla ondersteund ook position: fixed, maar voor IE zal je dat met een scriptje op moeten lossen (onscroll herpositioneren) of je body zelf niet scrollable maken, maar alleen de content.

[ Voor 13% gewijzigd door crisp op 26-08-2003 12:21 ]

Intentionally left blank

dinsdag 26 augustus 2003 12:20

Acties:

0 Henk 'm!

Anoniem: 85738

Met layers werken. Een apart layer maken met daarin dat achtergrondplaatje.

dinsdag 26 augustus 2003 12:23

Acties:

0 Henk 'm!

RM-rf

1 2 3 4 5 7 6 8 9

code:

<body>
   <div class="container">
      ...je content ... blah blah
   <div>
<body>

en je css

code:

BODY { 
   padding: 0px; margin: 0px; 
   width: 100% height: 100%; 
   background-image: url(sterretjes.gif);
}
DIV.container { 
   background-image: url(afbeelding.gif); 
   background-position: top left; 
   background-attachment: fixed; 
   background-repeat: no-repeat;
}

de DIv is dan een extra laag die ook een achtergrond kan hebben, los van de background in de body

[ Voor 6% gewijzigd door RM-rf op 26-08-2003 12:24 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

dinsdag 26 augustus 2003 12:26

Acties:

0 Henk 'm!

Zynth

Topicstarter

Even wat ik bedoel:
Afbeeldingslocatie: http://zynth.student.utwente.nl/files/Temp/css.gif

Dat is mijn frame; met linksbovenin gefixed het blauwe achtergrondplaatje.
Het probleem is dat ik nou voor de rest van de achtergrond (wit) geen repeated achtergrondplaatje meer kan opgeven. Terwijl ik die rest dus juist wil opvullen met sterretjes

------edit-----
is die oplossing van genocidaaltje rm -rf wel een beetje crossbrowser ondersteund?

(en voor veel versienummers?)

[ Voor 19% gewijzigd door Zynth op 26-08-2003 12:28 ]

dinsdag 26 augustus 2003 12:39

Acties:

0 Henk 'm!

Zynth

Topicstarter

Ik krijg de oplossing van rm -rf trouwens niet aan de praat.
de background van de body gaat wel goed, maar die DIV zie ik niet.
Moet ik niet in mijn content die DIV ook nog opnemen?

dinsdag 26 augustus 2003 12:53

Acties:

0 Henk 'm!

Anoniem: 9542

hola mensen! (crisp, RM-rf, valt me tegen hoor

waarom dat plaatje in een div? da's nergens voor nodig, gewoon meteen goed positioneren. Dat overbodig gedoe met div's ook de hele tijd...

gewoon zoiets:

HTML:

<html>
<head>
<style>
img {
  position: absolute;
  left: 100px;
  top: 100px;
}
body {
  background-image: url(sterretjes.gif);
}
</style>
</head>
<body>
  [img]"plaatje.gif"[/img]
  <p>al je text</p>
</body>
</html>

[ Voor 33% gewijzigd door Anoniem: 9542 op 26-08-2003 12:58 . Reden: denkfoutje ]

dinsdag 26 augustus 2003 12:53

Acties:

0 Henk 'm!

RM-rf

1 2 3 4 5 7 6 8 9

probeer eens width: 100%; height: 100%; toe te voegen aan de css-code voor de DIV.container

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

dinsdag 26 augustus 2003 13:04

Acties:

0 Henk 'm!

Anoniem: 85738

Ik denk dat Zynth ook nog graag tekst/inhoud over dat plaatje heen wil kunnen laten zweven. Hij bedoelde het tenslotte als background.

dinsdag 26 augustus 2003 13:13

Acties:

0 Henk 'm!

Zynth

Topicstarter

rm -rf; ik krijg helemaal het plaatje uit de DIV niet te zien.

dinsdag 26 augustus 2003 13:36

Acties:

0 Henk 'm!

Anoniem: 9542

da's basic html anders. Kijk ff op www.w3schools.com en dan html tutorial.

dinsdag 26 augustus 2003 13:56

Acties:

0 Henk 'm!

RM-rf

1 2 3 4 5 7 6 8 9

daarvoor kunnen meerdere oorzaken bestaan, hoogstwaarschijnlijk een foutje in je CSS, controleer deze op spelfouten, verder is het essentieel dat het path naar de afbeelding klopt, als je een extern css-bestand gebruikt dient het path te verwijzen vanaf dat externe css-bestand, niet de pagina waarin het wordt uitgevoerd.
verder kun je controleren of de style in de DIV.container ook worden 'opgepikt', ik doe dat meestal door eventjes een border: 1px solid red; eraan toe te voegen, dan zie je direct de werkelijke grootte van het element.

mophor, persoonlijk zou ik een extra container prefereren boven een losstaande extra afbeelding, de afbeelding neemt content-ruimte in, echter een background via css is te controleren en te vatten onder layout; zo'n extra container biedt vaak nog extra wenselijkheden: positionering, specifieke font-definities voor de content text die erin gevat is, alswel eventueel een specifieke overflow (scrollbalken).

de layout-mogelijkheden met een extra container zijn gewoonweg groter en flexibeler dan met die extra afbeelding (laat staan wat er gebeurt met zo'n incidentele definiering van de IMG met een positionering, dat betekent dat alle verdere afbeeldingen in de pagina opeens ook daar gepositioneerd worden)

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

dinsdag 26 augustus 2003 13:58

Acties:

0 Henk 'm!

tomato

Als je XHTML 1.1 (of 1.0 strict) gebruikt (en met application/xhtml+xml mime-type), kun je zoals je dan altijd zou doen de sterren als repeated backgroud aan je <html> geven en het plaatje als fixed background aan je <body>.

code:

html {
    background-image      :   url("sterren.png");
}

body {
    background-image      :   url("plaatje.png");
    background-repeat     :   no-repeat;
    background-position   :   top left; 
    background-attachment :   fixed;
}

Dat zou goed moeten gaan. En zonder het gebruik van extra markup. Maar van Internet Explorer hoef je het niet te verwachten.

[edit]
Dit werkt blijkbaar toch niet (in Mozilla anyway). Ten eerste wordt het plaatje (achtergrond van <body>) niet getoond en ten tweede gaat Mozilla helemaal trippen wanneer je de <body> nog content geeft (hoeft maar een woord te zijn). Beiden lijken me bugs durf ik voorzichtig te zeggen...

Maar inderdaad, de <div> als container voor de rest van je content met als fixed achtergrond het plaatje lijkt me dan de best oplossing (sowieso voor IE).

[ Voor 37% gewijzigd door tomato op 26-08-2003 14:11 ]

dinsdag 26 augustus 2003 14:07

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Anoniem: 9542 schreef op 26 August 2003 @ 12:53:
hola mensen! (crisp, RM-rf, valt me tegen hoor

waarom dat plaatje in een div? da's nergens voor nodig, gewoon meteen goed positioneren. Dat overbodig gedoe met div's ook de hele tijd...

gewoon zoiets:
[...]

lol

maar inderdaad, je hebt gelijk

Ik doe zelf meestal dan ook nog een display: block op de image; inline elementen absoluut positioneren vind ik een beetje smerig

Intentionally left blank

woensdag 27 augustus 2003 14:12

Acties:

0 Henk 'm!

Dark Blue

Compositionista!

Alpenmeisje

Zynth schreef op 26 August 2003 @ 12:14:
(blablabla) Nou kan ik wel dat plaatje wat ik fixed het staan,
zo groot maken dat hij de hele site beslaat, maar dan wordt dat plaatje eigenlijk te groot.

Onthou één ding. Je weet nooit hoe groot 'de site' er bij jouw klant uitziet, tenzij je het beestje een vaste hoogte en breedte geeft en de rest met * frames opvult.

Dus een plaatje uitrekken tot wat er bij jou in het scherm past, is nooit een waterdichte oplossing... (met uitzondering van echte noodgevallen en sites voor een intern netwerk waarbij iedereen in het bedrijf toch dezelfde resolutie heeft / hoort te hebben).

Enfin, zover mijn gezwam.

heidiulrich.nl | adventura.nl : rugzakavonturen | pathwise.nl : prepping geeks to get jobs

Pagina: 1

Reageer