Image op het achtergrond zetten

Geplaatst: 23 november 200816 jaren

Hallo, ik heb een probleem. Ik heb een image die moet eigenlijk op het achtergrond staan, maar hij staat op de voorgrond.. Dus hij bedekt mijn text.

Ik heb het met de CSS body tag geprobeert en met de HTML body tag maar ik kom er niet uit.

Ik kan hem wel in de CSS body tag als achtergrond zetten, maar als ik dan div's gebruik dan wordt het plaatje niet weergeven, en blijft het scherm wit.

Iemand ideën?

Vriendelijk bedankt,

Jeroen.

Reageren

Geplaatst: 23 november 200816 jaren

comment_1176609

Ik snap het probleem niet helemaal maar als het goed is moet het op de volgende manier wel lukken.

<body background="plaatje.soort">
-Pagina-
</body>

Bewerkt: 23 november 200816 jaren door Hackman

Reageren

Geplaatst: 23 november 200816 jaren

Auteur

comment_1176621

Nou, ik wil dus een plaatje als achtergrond hebben.

Dat plaatje moet in een DIV tag staan.

Als ik hem in mijn CSS body tag zet, krijg ik geen plaatje te zien.

In de BODY tag van html,zie ik wel het plaatje, maar komt hij voor mijn text.

Hoe krijg ik dit plaatje achter mijn text?

Bewerkt: 23 november 200816 jaren door jovu123

Reageren

Geplaatst: 23 november 200816 jaren

comment_1176644

Werk je met dreamweaver?

Als eerste zou ik even kijken welk nummer jou DIV heeft. In dreamweaver kan je dat onderaan je werkscherm zien als je de DIV aanklikt. Dan ga je naar je interne óf externe stylesheet en zoek je het nummer op van je DIV (bv index-005 of zoals in het voorbeeld vermeld .apDiv). Deze is bovenaan in broncode te vinden in je HEAD.

In de stylecode van index-005 (jou cijfer) kan je de volgende code toevoegen:

background-image: url(URL VAN AFBEEDLING);

Voorbeeld:

<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
background-image: url(link van afbeedling);
}
-->
</style>
</head>

<body>
<div id="apDiv1">Dit is je DIV met tekst.</div>
</body>
</html>

Zoals hierboven is vermeld als een voorbeeld heet je DIV: .apDiv1 Deze heeft een stylesheet die vermeld is in de HEAD-code. Daarin is nu een code toegevoegd met "background-url". Hier kan je de link invullen van je afbeelding.

Bewerkt: 23 november 200816 jaren door Kai-ShockWave

Reageren

Geplaatst: 23 november 200816 jaren

comment_1176651

Ik snap je probleem wel. In CSS werk je met divs, die je ook zo kan gebruiken:

<div id='div1'>
<img src='plaatje1.jpg'>
<div id='div2'>
<img src='plaatje2.jpg'>
</div>
</div>

Normaal zullen de plaatjes onder elkaar staan. Maar in je CSS heb je de functie FLOAT waarmee ze elkaar kunnen overlappen. Dan zal plaatje1 achterop komen, en plaatje 2 voorop.

Meer info kun je HIER vragen, dat is een zeer handige site op het gebied van PHP, HTML, CSS, JAVASCRIPT en MYSQL.

EDIT: ow nieuwe posts, had de pagina iet vernieuwt :bonk:

K heb je dus ook verkeerd begrepen maarjah, Kai heeft het goede antwoord volgens mij gevonden?

En desnoods heb je hier ook nog wat aan voor wat anders.

Bewerkt: 23 november 200816 jaren door Remi-X

Reageren

Geplaatst: 23 november 200816 jaren

Auteur

comment_1176718

Bedankt Kai en Remi, ik heb die z-index gebruikt en nu klopt het.

Maar, ik heb nu nog een probleem..

Hoe kan ik in mijn CSS body tag een div gebruiken op het achtergrond plaatje?

Want nu staat hij links bovenin, en dat wil ik niet.

Als ik nu een div tag gebruik dan krijg ik alleen maar een wit scherm zonder achtergrond kleur of plaatje.

Reageren

Geplaatst: 23 november 200816 jaren

comment_1176728

Het is gewoon mogelijk om de DIV te verplaatsen door op de blauwe rand van de DIV te klikken. Wanneer je in die DIV weer een div wilt kan je via Insert > Layout Object > Div tag een nieuwe DIV plaatsen die op de achtergrond staat.

Ik weet niet of deze oplossing in de buurt komt, want het probleem is nogal vaag. ook omdat je steeds wit scherm krijgt..

Misschien is het een oplossing om hier je broncode te plaatsen zodat we kunnen kijken waar de fout in zit.

Reageren

Geplaatst: 23 november 200816 jaren

Auteur

comment_1176730

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #383838;
position:absolute;
width:716px;
height:512px;
z-index:0;
background-image: url(http://Jeroenvinke.site50.net/LoggedInLayout.png);
background-repeat: no-repeat;
}
-->
</style></head>

<body>
</body>
</html>

<?

session_start();
echo "Welcome, ". $_SESSION['login'];
?>

Groetjes Jeroen.

Reageren

Geplaatst: 23 november 200816 jaren

comment_1176736

Op welke plek wilt je hem hebben?

Hier staat hij gecentreerd:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #383838;
position:absolute;
width:716px;
height:512px;
z-index:0;
background-image: url(http://Jeroenvinke.site50.net/LoggedInLayout.png);
background-repeat: no-repeat;
background-position: center top;
}
-->
</style>
</head>

<body>
</body>
</html>

<?

session_start();
echo "Welcome, ". $_SESSION['login'];
?>

Bewerkt: 23 november 200816 jaren door Kai-ShockWave

Reageren