Baggrundsbillede i Html og Css

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
Brugeravatar
Malene93
Begynder
Indlæg:2
Tilmeldt:27. nov 2012, 14:28
Baggrundsbillede i Html og Css

Indlæg af Malene93 » 27. nov 2012, 14:45

Hej alle!

Jeg står og er ved at lave en portfolio side. Til designet har jeg lavet et baggrundsbillede i størrelsen 960x2000 px.
Meningen er, at man skal kunne se mere af billedet, hvis der er mere indhold på siden.
Repeat kan altså ikke bruges, da dette vil se ret mærkeligt ud med det valgte design.

Samtidig skal jeg kunne lave en div inde i div'en med baggrundsbilledet, da teksten ellers vil dække mit design, desværre forsvinder billedet hvis jeg gør det. :/

http://webhotel.eamv.dk/mmd270850/test1/ - Baggrundsbilledet skal dække hele browseren, selvom der kun er lidt tekst som her?
http://webhotel.eamv.dk/mmd270850/test2/ - Dette viser formålet, dog skal teksten kun være i det lysegrå felt?

Det er ret svær at forklare, men jeg håber i kan se mit problem. :)
Kan dette overhovedet lade sig gøre kun ved brug af CSS og Html?

Håber I kan hjælpe mig - er ikke super stærk i koder nemlig! :D

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Baggrundsbillede i Html og Css

Indlæg af ThomasI » 27. nov 2012, 20:37

prøv det her:

Kode: Vælg alt

#container {
height:auto;
width: 960px;
margin: 0 auto;
background-image: url(../images/design/banner.png);
background-repeat: no-repeat;
padding-left: 200px;
}

Kode: Vælg alt

#tekst {
height:auto;
width: 760px;
background-image: url(../images/design/ditandetbillede.png);
background-repeat: no-repeat;
}

Kode: Vælg alt

<div id="container">
<div id="tekst">
tekst tekst tekst
</div>

</div>

Brugeravatar
Malene93
Begynder
Indlæg:2
Tilmeldt:27. nov 2012, 14:28

Re: Baggrundsbillede i Html og Css

Indlæg af Malene93 » 27. nov 2012, 22:02

Super! Nu begynder det at ligne noget.

Nu skal jeg bare have billedet til at fylde 100% af skærmen, ligegyldig opløsning (i tilfælde af sider med mindre indhold - f.eks. forside)

- foreløbig ser siden sådan ud: http://webhotel.eamv.dk/mmd270850/test3/

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Baggrundsbillede i Html og Css

Indlæg af ThomasI » 27. nov 2012, 22:27

Bare sæt højden på din container div til 2000px på den måde vil den altid holde en fast størrelse...

Mahdi
Begynder
Indlæg:3
Tilmeldt:2. jul 2012, 15:06

Re: Baggrundsbillede i Html og Css

Indlæg af Mahdi » 25. dec 2012, 19:24

Hej, Jeg har det fantastisk med det her. :D Men jeg har dog et problem, ja problemet er, når jeg laver en baggrund billed og gemmer og åbner det i browser, så er der intet baggrund billed. Håber i kan hjælpe mig. :shock:

Fischer
Begynder
Indlæg:5
Tilmeldt:25. dec 2012, 23:13

Re: Baggrundsbillede i Html og Css

Indlæg af Fischer » 26. dec 2012, 18:41

Mahdi skrev:Hej, Jeg har det fantastisk med det her. :D Men jeg har dog et problem, ja problemet er, når jeg laver en baggrund billed og gemmer og åbner det i browser, så er der intet baggrund billed. Håber i kan hjælpe mig. :shock:
Hvis du kunne vise os koden, ville det hjælpe meget for at finde dit problem :)

Kagehjørnet
Begynder
Indlæg:15
Tilmeldt:16. jan 2013, 17:48

Re: Baggrundsbillede i Html og Css

Indlæg af Kagehjørnet » 16. jan 2013, 17:55

Jeg står også med et problem omkring baggrundsbillede.
Jeg har sat et baggrundsbillede ind, men det vises ikke når jeg uploader.

Jeg vil gerne have at mit baggrundsbillede fylder hele browseren og derudover har jeg nogle div'er i en anden farve. Div'erne virker, borstset fra den driller lidt med at vise bredden på hoved div'en.

Koden ser således ud:

Kode: Vælg alt

#body{
background-image: url(baggrund.jpg);
}
#hoved {
width: 1500px;
height: 700px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: thick;
border-color: black;
background-color: #66CCCC;
}

#logo {
width: 300px;
height: 250px;
margin-left: auto;
margin-right: auto;
border-style: none;
text-align: left;
float: left;
background-color: #66CCCC;
}

#top {
width: 400px;
height: 250px;
margin-left: auto;
margin-right: auto;
border-style: none;
text-align: left;
float: right;
background-color: #66CCCC;
font-family: Bradley Hand itc;
font-size: 90px;
}

#top2 {
width: 700px;
height: 100px;
margin-left: auto;
margin-right: auto;
border-style: none;
text-align: center;
background-color: #66CCCC;
}

#menu {
width: 100px;
height: 600px;
margin-left: auto;
border-style: none;
float: left;
background-color: #66CCCC;
}

#indhold {
width: 600px;
height: 600px;
margin-right: auto;
border-style: none;
float: right;
background-color: #66CCCC;
font-family: Bradley Hand itc;
font-size: 16px;
}
Er helt ny i det her og alt er lavet ud fra de fantastiske tutorials her på siden.


Kagehjørnet
Begynder
Indlæg:15
Tilmeldt:16. jan 2013, 17:48

Re: Baggrundsbillede i Html og Css

Indlæg af Kagehjørnet » 17. jan 2013, 09:58

Tak for det, selv om jeg ikke kan få det til at virke.
Den viser slet ikke noget baggrundsbillede..
Ved ikke helt hvad der skulle være galt med koden.

Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:

Re: Baggrundsbillede i Html og Css

Indlæg af scootergrisen » 17. jan 2013, 10:19

Læg det på nettet og kom med linket.

Kagehjørnet
Begynder
Indlæg:15
Tilmeldt:16. jan 2013, 17:48

Re: Baggrundsbillede i Html og Css

Indlæg af Kagehjørnet » 17. jan 2013, 10:27


Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:

Re: Baggrundsbillede i Html og Css

Indlæg af scootergrisen » 17. jan 2013, 10:45

Fordi #body ikke findes.

Skriv body så gælder den for <body>

#body gælder for <x id="body">

bj-jumping.dk
Begynder
Indlæg:3
Tilmeldt:17. jan 2013, 12:58

Re: Baggrundsbillede i Html og Css

Indlæg af bj-jumping.dk » 17. jan 2013, 13:01

Du har der defineret din CSS id.

For at få det ind, skal du bruge div tags. Du laver så <div id="body"> </div>

Kagehjørnet
Begynder
Indlæg:15
Tilmeldt:16. jan 2013, 17:48

Re: Baggrundsbillede i Html og Css

Indlæg af Kagehjørnet » 18. jan 2013, 11:43

Selvfølgelig... Nu virker det.
Mange tak :D

Besvar