Achtergrond afbeelding in externe CSS

Status
Niet open voor verdere reacties.
P

patjebond

Gebruiker
Lid geworden
27 okt 2008
Berichten
119
Beste leden,

Ik ben sinds kort een website begonnen voor een website, ben vrij amateuristisch maar is een leuk project om te doen.

Nu heb ik een probleem, ik heb een verticaal uitklapmenu gecreeërd via een externe CSS. Maar nu zit ik met de achtergrond afbeelding, het lukt me niet die terug te krijgen, ik had deze namelijk eerst via interne CSS toegevoegd, waarbij hij verticaal werd herhaald maar horizontaal niet. Maar aangezien je niet een zowel extern als interne CSS kan hebben zit ik vast want ik weet niet hoe ik een achtergrond afbeelding krijg via een externe CSS.

Heeft iemand enig idee?

Ik had het zo geprobeerd in de style.css
h {
background-image: url(images\bg.jpg);
background-repeat:no-repeat;
background-repeat:repeat-y;
}
Klik om te vergroten...

en dan in de HTML body aan het begin <h> en einde </h>

Waar zit ik fout?
 
<h> is geen bestaande HTML-tag.
Als je hem op je hele webpagina wilt toepassen dan zul je de achtergrond op de gehele <body> toe willen passen :)

Daarnaast heb je bij de verwijzing richting de URL de forwardslash gebruikt maar dat moet een backslash zijn.

Het wordt dan dus zo:
Code: 
body
{
    background-image: url(images/bg.jpg);
    background-repeat: repeat-y;
}

Wat hetzelfde is als:
Code: 
body
{
    background: url(images/bg.jpg) repeat-y;
}
 
Het blijkt nog niet te werken, dus post ik maar even zowel mijn HTML als CSS. Misschien heb ik iets verkeerd geplaatst?

Code: 
body
{
    background-image: url(images/bg.jpg);
    background-repeat: repeat-y;
}

#nav, #nav ul, #nav ul ul{
padding: 0;
margin: 0;
list-style: none;
background: url(none.gif) repeat 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
}

#nav{
width: 95px;
}

#nav li{
width: 95px;
}

#nav ul{
position: absolute;
width: 100px;
left: -1000px;
margin: -22px 0 0 95px;
font-size: 100%;
}

* html #nav ul{
margin: -23px 0 0 95px;
}

#nav li li{
width: 100px;
}

#nav ul ul{
width: 140px;
margin: -22px 0 0 100px;
font-size: 100%;
}

* html #nav ul ul{
margin: -23px 0 0 100px;
}

#nav li li li{
width: 140px;
}

#nav li:hover ul, #nav li.ie_does_hover ul{
left: auto;
}

#nav li:hover ul ul, #nav li.ie_does_hover ul ul{
left: -1000px;
}

#nav ul li:hover ul, #nav ul li.ie_does_hover ul{
left: auto;
}

#nav a {
display: block;
text-decoration: none;
padding: 2px 4px 3px 4px;
margin: 1px;
}

#nav a:link, #nav a:visited{
background: #D2D2E6;
border: 1px solid #494980;
color: #494980;
}

#nav a:hover, #nav a:active{
background: #6D6D99;
border: 1px solid #494980;
color: #FFF;
}

HTML: 
<HTML>
<HEAD>
<TITLE>Boerma Wessel - Home</TITLE>
<LINK href="css/style.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script> 
</HEAD>

<body>
<a href="#"><IMG STYLE="position:absolute; TOP:0px; LEFT:0px; WIDTH:637px; HEIGHT:71px" SRC="images/logo.jpg"></a>
<ul id="nav">

<li><a href="#">Main item 1</a>

<ul>
<li><a href="#">Sub item 1.1</a></li>
<li><a href="#">Sub item 1.2</a></li>
<li><a href="#">Sub item 1.3</a></li>
<li><a href="#">Sub item 1.4</a></li>
</ul>

</li>

<li><a href="#">Main item 2</a>

<ul>
<li><a href="#">Sub item 2.1</a></li>
<li><a href="#">Sub item 2.2</a></li>
<li><a href="#">Sub item 2.3</a>
<ul>
<li><a href="#">Sub-sub item 2.3.1</a></li>
<li><a href="#">Sub-sub item 2.3.2</a></li>
<li><a href="#">Sub-sub item 2.3.3</a></li>
<li><a href="#">Sub-sub item 2.3.4</a></li>
</ul>
</li>
<li><a href="#">Sub item 2.4</a></li>
<li><a href="#">Sub item 2.5</a></li>
</ul>

</li>

<li><a href="#">Main item 3</a>

<ul>
<li><a href="#">Sub item 3.1</a>
<ul>
<li><a href="#">Sub-sub item 3.1.1</a></li>
<li><a href="#">Sub-sub item 3.1.2</a></li>
<li><a href="#">Sub-sub item 3.1.3</a></li>
<li><a href="#">Sub-sub item 3.1.4</a></li>
<li><a href="#">Sub-sub item 3.1.5</a></li>
<li><a href="#">Sub-sub item 3.1.6</a></li>
</ul>
</li>
<li><a href="#">Sub item 3.2</a></li>
</ul>

</li>

</ul> 
</body>
</HTML>
 
Laatst bewerkt door een moderator:
Hoi patjebond,
Het verschil tussen interne css en een extern css-stylesheet is:

Interne css, op de pagina zelf, neemt voor verwijzing naar background-images de map van de pagina op de server als uitgangspunt.
Dwz. als er in het style-blok op de pagina staat:
Code: 
body
{
    background-image: url(images/bg.jpg);
    background-repeat: repeat-y;
}
... en je pagina staat in een bepaalde map, dan wordt het img gezocht in een submap "images" van de map waar de pagina in staat.

Maar een extern css-bestand neemt voor verwijzing naar background-images de map van het css-bestand op de server als uitgangspunt.
Dwz. als er in de externe css staat:
Code: 
body
{
    background-image: url(images/bg.jpg);
    background-repeat: repeat-y;
}
... dan wordt het plaatje gezocht in een submap "images" van de map waar de css in staat.
Dat gaat goed, als de map van de pagina dezelfde is als de map van het css-bestand: dan zit daar in beide gevallen dezelfde submap "images" onder.
Maar!
In jouw geval staat er op de pagina als link naar het stylesheet:
HTML: 
<link href="css/style.css" rel="stylesheet" type="text/css">


  • Dus de css staat in een submap "css" van de pagina-map.
  • Het image staat óók in een submap van de pagina-map: de submap "images".
  • De twee submappen zitten op hetzelfde niveau (parallel) ten opzichte van de pagina.

Als nu met bovenstaande code via het extern css-bestand naar het image gezocht gaat worden, dan wordt het gezocht in (een submap van de map van het css-bestand, dus):
"css/images/bg.jpg"
Die map zal niet bestaan, en het plaatje is niet te vinden.

De instructie in het css-bestand moet daarom zijn: "klim vanaf de css-submap eerst een etage omhoog (zodat je in de map van de pagina komt), en daal vervolgens af naar de images-submap".
In de css-code van het externe stylesheet kan je dat doen met twee puntjes en een slash:
Code: 
body
{
    background-image: url(../images/bg.jpg);
    background-repeat: repeat-y;
}

Werkt het dan wel?

Met vriendelijke groet,
CSShunter
____________
PS: De javascript-code met de sfHover-functie kan je nu wel missen. Die was voor Internet Explorer 6 en eerdere versies, maar die gebruikt niemand meer. Met ingang van IE7 is het niet meer nodig, en intussen is ook IE7 al weer bij helemaal verdwenen.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan