Notifikationer

Markér alle som læst Log ud

walkie84 Nybegynder

21. oktober 2008 - 19:46 Der er 19 kommentarer og
1 løsning

2 billeder på baggrund

Hey :)

Hvordan gør jeg hvis jeg på min baggrund (body), først vil have et billede til at blive vist i venstre side EN gang, og så en andet billede ved siden af, som bliver gentaget (repeat).

Lige nu har jeg nedenstående style, som repeterer det ene billede, men hvordan får jeg et billede vist en gang, til venstre for dette?

body {
background-image: url("images/mainbg.png");
background-repeat: repeat-x;
background-color: #000000;
}

Håber at det giver lidt mening :)

Synes godt om

keysersoze Ekspert

21. oktober 2008 - 19:54 #1

hvis du skal have to baggrundsbilleder skal du benytte to elementer - fx to divs eller lignende. en mulighed du måske kan snyde med er at lægge det ene billede i html og det andet i body.

Selve positioneringen styrer du med background-position - http://w3schools.com/css/pr_background-position.asp

Synes godt om

walkie84 Nybegynder

21. oktober 2008 - 20:21 #2

Ja, det tænkte jeg også på.. Men de 2 billeder her, skal være bag ved selve hjemmesiden :) Hvis jeg laver <div>, kommer det så ikke bare til at fylde selve siden?

Synes godt om

tcp Nybegynder

21. oktober 2008 - 20:40 #3

Du kan bruge z-index til at lægge det i lag i dine div`s http://www.w3schools.com/Css/pr_pos_z-index.asp

Synes godt om

walkie84 Nybegynder

21. oktober 2008 - 21:12 #4

Ok, nu har jeg lavet nedenstående:

body {
background-image: url("images/trst_bg1.png");
background-repeat: no-repeat;
background-color: #000000;
background-position: top left;
}

div.bg {
background-image: url("images/mainbg.png");
background-repeat: repeat-x;
position:absolute;
left: 250px;
z-index: -1;
}

og indsat <div class="bg"></div> på min side, efter <body> elementet.. Men det andet billede (mainbg.png) bliver slet ikke vist :)
Hvilke fejl har jeg lavet?

Synes godt om

walkie84 Nybegynder

21. oktober 2008 - 21:45 #5

Nu har jeg faktisk fået det til at passe med nedenstående styles :)

span.bg1 {
background: black no-repeat;
background-image: url("images/trst_bg1.png");
width: 250px; height: 100%;
position: absolute; top left;
z-index: -1;
}

span.bg2 {
background: black left fixed repeat-x;
background-image: url("images/mainbg2.png");
height: 780; width: 900px;
position: absolute; top: 0px; left: 250px;
z-index: -1;
}

MEN, hvordan får jeg det sidste billede til at blive gentaget til 100% af side bredden? Sådan at ligemeget hvilken opløsning folk har, så gentager det sig hele vejen ?!? :) Lige nu er jeg nød til at angive width for at det overhovedet bliver vist..

Synes godt om

w13 Novice

21. oktober 2008 - 21:47 #6

Brug div i stedet for span. Div er automatisk 100% i bredden.

Desuden må du ikke bare skrive:

height: 780;

Du skal angive "px" eller "%" eller lignende.

Synes godt om

w13 Novice

21. oktober 2008 - 21:47 #7

Med mindre værdien er 0, så kan du godt bare nøjes med "0".

Synes godt om

walkie84 Nybegynder

21. oktober 2008 - 22:00 #8

Hvis jeg skriver nedenstående, så viser ingen af billederne sig :)

div.bg1 {
background: #000000 no-repeat;
background-image: url("images/trst_bg1.png");
width: 250px; height: 100%;
position: absolute; top: 0px; left: 15px;
z-index: -1;
}

div.bg2 {
background: #000000 repeat-x;
background-image: url("images/mainbg2.png");
height: 780px;
position: absolute; top: 0px; left: 0px;
z-index: -2;
}

Dette i html filen:
<div class="bg1"></span>
<div class="bg2"></span>

Synes godt om

walkie84 Nybegynder

21. oktober 2008 - 22:02 #9

heh, og nu har jeg så ændret til </div> :P

Det gentagne billede bliver ikke vist nu..

Synes godt om

walkie84 Nybegynder

21. oktober 2008 - 22:02 #10

Hvilken jeg så bare sætter til 100%, og så virker det vidst!!

Synes godt om

w13 Novice

21. oktober 2008 - 22:05 #11

Nej, det er vist rigtigt. Med position:absolute; skal man faktisk skrive width:100%; tror jeg. Men godt, det virker.

Synes godt om

olebole Juniormester

21. oktober 2008 - 22:06 #12

<ole>

keysersoze's skrev noget i trådens allerførste indlæg, jeg selv har brugt flere gange:

<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
html {
background: url(http://www.eksperten.dk/img/elogo.png);
}
body {
background: url(http://i1.ytimg.com/vi/x4KmbUCwkyE/default.jpg) no-repeat;
}
</style>

/mvh
</bole>

Synes godt om

walkie84 Nybegynder

21. oktober 2008 - 22:36 #13

Ja, det ser lidt mere overskueligt ud end hvad jeg har bikset sammen :) Det prøver jeg

Synes godt om

walkie84 Nybegynder

21. oktober 2008 - 22:49 #14

Tak til jer alle 4!

Jer der har fortjent point, kan skrive et svar :))

Synes godt om

olebole Juniormester

21. oktober 2008 - 23:08 #15

soze >> min løsning var din, så du lægger svaret for dén =)

Synes godt om

w13 Novice

21. oktober 2008 - 23:12 #16

Heller ingen points til mig. =)

Synes godt om

walkie84 Nybegynder

21. oktober 2008 - 23:19 #17

Det bestemmer i helt selv :)

Synes godt om

keysersoze Ekspert

23. oktober 2008 - 09:28 #18

når nu i andre skal være på tværs såh... :)

Synes godt om

walkie84 Nybegynder

23. oktober 2008 - 09:36 #19

There u go =)

Synes godt om

olebole Juniormester

23. oktober 2008 - 09:38 #20

soze >> jeg fylder vist betydeligt mere på langs end på tværs, så deeeeeet .... ;o)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS