Toon posts:

[css] background vraag(jes)

Pagina: 1
Acties:

Verwijderd

Topicstarter
Ik gebruik altijd de volgende code om mijn achtergrond te bepalen:
code:
1
2
3
4
5
6
7
<style>
body {
background-image: url(wittelijn.gif);
background-position: center center;
background-repeat: no-repeat;
}
</style>

Kan je ook twee plaatjes als achtergrond gebruiken? Als ik mijn hersens goed kraak dan heb ik dat volgens mij al wel eens gezien ergens.. Dus het ene plaatje linksboven in de hoek (ik noem maar wat) en de andere rechtsonder.

En nu ik het er toch over heb: er was ook iets als no-y-repeat oid. Weet iemand precies hoe dat zit? Ik heb ook dat wel eens ergens gelezen.

edit:
heb t al geloof ik:
background-repeat: repeat-x; :)


/me vergeet snel dingen

Ik zal zelf ook goed gaan zoeken (heb net al wel gezocht hoor) :)

  • Jorick
  • Registratie: November 2001
  • Laatst online: 17:27
Waren dat geen Frames???? :? Ennuh waar voor heb ie 2 achtergronden nodig :?

Verwijderd

Topicstarter
Op dinsdag 01 januari 2002 15:56 schreef Jorick het volgende:
Waren dat geen Frames???? :?
nee...
Ennuh waar voor heb ie 2 achtergronden nodig :?
Gaat je niks aan :)

Maar effe serieus: ik heb het zelfs al een keer toegepast op een website die ik helaas niet meer heb. Ik weet dus zeker dat het kan. En nee het waren geen frames

/me wordt soms een beetje onderschat hier... ;)

  • Dennis
  • Registratie: Februari 2001
  • Laatst online: 17:26
Twee layers maken, kleur transparent (in principe alleen de bovenste) en dan bij beiden een verschillende background toepassen.

Sim-pel.

  • Dennis
  • Registratie: Februari 2001
  • Laatst online: 17:26
Omdat ik nu wat meer tijd heb heb ik nog even een script gemaakt waar het wordt toegepast, zodat personen die dit topic ooit nog eens bekijken er nog wat aan hebben :)
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Bla</title>
    <style type="text/css">
        #layer1
        {
            height: 99%; 
            width: 100%; 
            z-index: 1; 
            position: absolute; 
            background-color: transparent; 
            background-position: bottom right;
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-image: url(7656gv.jpg);
        }
        
        #layer2
        {
            height: 99%; 
            width: 100%; 
            z-index: 2; 
            position: absolute; 
            background-color: transparent; 
            background-position: top left;
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-image: url(9278ev.jpg);
        }
        
        #content
        {
            width: 100%; 
            z-index: 3; 
            position: absolute; 
            text-align: center;
        }
        
        #shape
        {
            width: 750;
            border: 1px solid gray;
            font-family: verdana;
            font-size: 15px;
        }
    </style>
</head>

<body style="margin: 5px;">

    <div id="layer1">
        &nbsp;
    </div>
    <div id="layer2">
        &nbsp;
    </div>
    <div id="content">
        <div id="shape">
            Hier komt je inhoud :)
        </div>
    </div>

</body>
</html>

Kleine toelichting waarom ik bij de height 99% gebruik i.p.v. 100%: bij 100% maakt IE een scrollbar aan, iets wat door veel mensen als niet fraai wordt beschouwd :)