Fråga angående css och bakgrund [LÖST]

[xtr3m3]

Har satt mig ner och pillat lite med html och css.
La till en bakgrundsbild i en mapp jag kallar bilder. Hade först css-filen till bakgrundsbilden i indexmappen men skapade sen en mapp som heter css.

Ändrade i html-filen till:

Kod: Markera allt

<link href="css/main.css" rel="stylesheet" type="text/css">

Men nu syns inte bakgrundsbilden. Har testat på dom här sätten:

Kod: Markera allt

body { background-image: url(bilder/bg.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed }

Kod: Markera allt

body { background-image: url(../bilder/bg.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed }

Hur ska jag göra för att få det riktigt?

[Rune.K]

Kod: Markera allt

<link href="css/main.css" rel="stylesheet" type="text/css">

ska nog vara

Kod: Markera allt

<link href="/css/main.css" rel="stylesheet" type="text/css">

observera snedstrecket framför css.
Jag bara tror.
Länge sedan jag höll på med html och css...

[Rag3Rac3r]

Ändra det till:

Kod: Markera allt

body { background-image: url(/bilder/bg.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed }

(om jag kommer ihåg min CSS rätt)

[xtr3m3]

Tackar för svaren. Tyvärr verkade inget utav dom fungera.

[Katt]

background-image:url("bilder/bg.jpg")

[Rune.K]

Jag kan rekommendera w3schools > http://w3schools.com/css/default.asp
Eller så får vi hoppas på att någon som håller på med html, dyker upp här och kan hitta felet.

[SlamsornasKung]

background-image:url("bilder/bg.jpg")

Katt har rätt, det är citattecknen (") som saknas.

[xtr3m3]

Det hade jag missat. Verkar inte fungera ändå:

Kod: Markera allt

body { background-image: url("bilder/bg.jpg"); background-repeat: no-repeat; background-position: center center; background-attachment: fixed }

[Rag3Rac3r]

Det hade jag missat. Verkar inte fungera ändå:

Kod: Markera allt

body { background-image: url("bilder/bg.jpg"); background-repeat: no-repeat; background-position: center center; background-attachment: fixed }

Testa att lägga till / före bilder, kan vara så att den tappar bort sig i filstrukturen, och då är det lättare att be den gå till roten och därifrån rota upp bilder mappen.

[xtr3m3]

Testade det. Gick inget bättre. Kanske lättare att lägga css-filerna i root-mappen ändå.

[Osprey]

Kan det vara så enkelt att det är "height:100%; width:100%;" som saknas..?

[xtr3m3]

Kan det vara så enkelt att det är "height:100%; width:100%;" som saknas..?

Funkade ju fint innan jag flyttade dom till en annan mapp. Så länge som dom ligger i samma mapp som html-filerna fungerar allt utan problem.

[AlexF]

om filstrukturen är följande
./index.html som inkluderar css-dokumentet
och
./css/style.css
med följande kod i

Kod: Markera allt

background: url('../bilder/bg.jpg') no-repeat center center fixed;

så ska
./bilder/bg.jpg vara en godtagbar jpg-bild.
Uppdatera (F5) om du inte funkar först. Ev. kan du validera din kod enligt http://validator.w3.org för att leta upp fel i koden.

[xtr3m3]

om filstrukturen är följande
./index.html som inkluderar css-dokumentet
och
./css/style.css
med följande kod i

Kod: Markera allt

background: url('../bilder/bg.jpg') no-repeat center center fixed;

så ska
./bilder/bg.jpg vara en godtagbar jpg-bild.
Uppdatera (F5) om du inte funkar först. Ev. kan du validera din kod enligt http://validator.w3.org för att leta upp fel i koden.

Tackar. Nu gick det bättre

[xtr3m3]

Har en ny fråga. Testar en sak jag hittade. Lavalamp meny. Har gjort likadant med bg-bilderna som jag fick hjälp med men det syns inte ändå.
Nån som har tid och lust att hjälpa mig?

Kod: Markera allt

.lavaLampWithImage {
            position: relative;
            height: 35px;
            width: 328px;
            background: url('..bilder/bg.gif') no-repeat top;
            padding: 0px;
            margin: 0px 0;
            overflow: hidden;
        }
                .lavaLampWithImage li {
                    float: left;
                    list-style: none;
                }
                    .lavaLampWithImage li.back {
                        background: url('..bilder/lava.gif') no-repeat right -30px;
                        width: 9px; height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                        .lavaLampWithImage li.back .left {
                            background: url('..bilder/lava.gif') no-repeat top left;
                            height: 30px;
                            margin-right: 9px; /* 7px is the width of the rounded shape */
                        }
                    .lavaLampWithImage li a {
                        font: bold 14px arial;
                        text-decoration: none;
                        color: #fff;
                        outline: none;
                        text-align: center;
                        top: 7px;
                        text-transform: lowercase;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        height: 30px;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;    
                    }
                        .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
                            border: none;
                        }

Har testat:

Kod: Markera allt

url('..bilder/bg.gif')
url('bilder/bg.gif')
url("..bilder/bg.gif")
url("bilder/bg.gif")

[Hund]

Kod: Markera allt

background: url(bilder/bg.gif) no-repeat;

Förut satt att mappen bilder och CSS-filen ligger i samma mapp.

Ett absolut måste om man håller på med webbdesign är Firefox-tillägget Firebug. Har du en gång använt det kan du inte leva utan det.

[xtr3m3]

Verkade inte fungera. Använder mig mest av google chrome. Såg att firebug fanns till den också. Både firebug lite för firefox och Firebug Lite 1.3.0 beta för Google Chrome.
Installerade den nyaste.

Får se om jag fattar nått

Verkade inte funka så bra till chrome än. Kör i firefox så länge


edit

Ska det bli rött om det är fel? Allt verkar ju okey annars i såna fall.
Märkte nu att man kan hålla över koden där bilden är och den försöker ladda nått. Ska bilden dyka upp om det är rätt?
Fasiken. Tycker jag testat allt nu

Lägger jag bilden i css-mappen så går det fint. Då är koden:

Kod: Markera allt

url("bg.gif")

I root-mappen har jag mappar som heter: bilder, css och js. Sen ligger html-filerna i root-mappen.