[CSS] absolute background

Door Jurgen B op 18-08-2006 05:06

411 views

#skyline {
background: transparent url(deventerskyline.jpg) top left no-repeat;
position: absolute;
bottom: 0px;
right: 0px;
width: 640px;
height: 480px;
}

Hallo mensen,

Ik gebruik het bovenstaande stuk script om een afbeelding helemaal rechtsonderin mn pagina te zetten. Alleen deze afbeelding gaat over de tekst heen. Hoe krijg ik hem op de achtergrond? FF en IE geven hetzelfde probleem!

Alvast bedankt

Willem Jan Z

18-08-2006 07:14

Over welke tekst? Het ziet er naar uit dat deze div over een andere heen ligt dus. Geef ook de indeling van je HTML document eens (copy pasten is niet nodig)

Dan Me

18-08-2006 08:38

Je kan eventueel de z-index gebruiken in je css om te bepalen welke <div> boven een andere <div> wordt weergegeven.

ArendJan

18-08-2006 09:09

Je moet de tekst div in de background div zetten dus op deze manier:


<div id="achtergrond">
<div id="tekst">
tekst en blabliebloe
</div>
</div>

Dan kun je ook nog mooi met margins en paddings werken....

Jan Koehoorn

18-08-2006 10:26

Waarom zo ingewikkeld allemaal? Div's in div's, z-indexen. Het kan veel simpeler:


#skyline {
    background: transparent url(deventerskyline.jpg) right bottom no-repeat;
    width: 640px;
    height: 480px;
}

Jurgen B

19-08-2006 17:12

Jan:
Als ik jou code gebruik staat ie een centimeter boven de rand en staat ie links ipv. rechts.

ArendJan:
Als ik jouw voorbeeld gebruik veranderd er niets.

Jurgen B

19-08-2006 18:28

Ik heb hem nu bij de body erin geplaats dmv

body {
background: #eff6fb;
background-image: url('deventerskyline.jpg');
background-repeat: no-repeat;
background-position: right bottom;
}

Dat werkt perfect in IE maar in FF zet ie hem niet aan de bottom neer maar aan top, hoe kan ik dat nog oplossen

Young Roger

19-08-2006 18:52

body {
background: url(deventerskyline.jpg) no-repeat 100% 100%;
}

Zou hem rechtonder moeten plaatsen.. ik zou hem alleen niet in de body zetten maar in een aparte div..

Roos

19-08-2006 20:05

en met vaste waarden al geprobeerd?

 background-image: url(img/xx.gif);
	background-repeat: no-repeat;
	background-position: 300px 400px;

moet je wel even de juiste waarden zoeken voor de position

Jurgen B

19-08-2006 20:38

Vaste waarden gaat niet lukken omdat hij helemaal rechtsonderin moet komen te staan.

Ongeacht de resolutie

ArendJan

19-08-2006 23:27

@Jurgen, heb je dan wel twee verschillende id's in je css aan gemaakt met de waarden tekst en achtergrond?

@Jan : sorry, ik los het amateuristisch op, ben geen prof :P

Reageren

Inloggen om te reageren