Image op het achtergrond zetten

23 november 2008

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.

23 november 2008

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 2008 door Hackman

23 november 2008

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 2008 door jovu123

23 november 2008

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 2008 door Kai-ShockWave

23 november 2008

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

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 2008 door Remi-X

23 november 2008

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.

23 november 2008

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.

23 november 2008

<!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.

23 november 2008

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 2008 door Kai-ShockWave

23 november 2008

Precies zo als dat ik het wou!

Nooit geweten dat er ook een background-position was.

Zeer bedankt, nu weet ik ook wat ik met z-index en zo moet doen

Groetjes Jeroen.

Inloggen

Image op het achtergrond zetten

Recommended Posts

Ophion

Link to comment

Delen op andere websites

Hackman

Link to comment

Delen op andere websites

Ophion

Link to comment

Delen op andere websites

Kai-ShockWave

Link to comment

Delen op andere websites

Remi-X

Link to comment

Delen op andere websites

Ophion

Link to comment

Delen op andere websites

Kai-ShockWave

Link to comment

Delen op andere websites

Ophion

Link to comment

Delen op andere websites

Kai-ShockWave

Link to comment

Delen op andere websites

Ophion

Link to comment

Delen op andere websites

Een reactie plaatsen

Recent actief 0 leden

Community

WikiGTA