"bakgrunnsbilde" på nettside!

8 innlegg i emnet

Skrevet

jeg har laget følgende nettside: http://wjks.net/side222/index.html

På denne siden ønsker jeg en annen bakgrunn, tenker på noen kule brushes uansett, hvordan kan jeg adde en bakgrunn jeg har laget selv til nettsiden, + at nettsiden tilpasser seg alle oppløsninger?

Er det mulig å lage ett bilde i 800x600 format eventuelt større og adde det som bakgrunn? Såfall hvordan kan jeg adde det bildet som bakgrunn?

takker for alle tips som kan hjelpe meg med dette problemet!

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Legge til et bakgrunnsbilde gjør du inni body taggen:

<body background="background.jpg"> (hvor background.jpg er navnet på bildet ditt)

</body>

Problemet med bakgrunnsbilder er ofte at de er for små til å dekke f.eks skjermer som er 22" men dekker hele skjermen på f.eks en 17".

Løsningen da er å ha et bakgrunnsbilde som ser likt ut over alt og få det til å gjenta seg ved å gjøre slik :

background-repeat: repeat-x

background-repeat: repeat-y

Da vil bildet gjenta seg både i x og y retningen.

Bilder hvor du kan finne for bakgrunnen f.eks her :http://www.fg-a.com/backgrounds.htm

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Jeg har ett bilde: 353788.jpeg Det er dette jeg ønsker på nettsiden, som bakgrunn, tror det ville passet ganske ok. det er 800x600. Hvordan kan jeg få det in, samtidig som alle oppløsninger kan kjøre nettsiden uten buggs? dele opp de 3 elementene bakgrunnen består av? såfall hvordan?

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet (endret)

Jeg har allerede nevnt det :)

Det bildet du har lagrer du som f.eks bilde.jpg

Så inni html koden din som sikkert ser slik ut (ikke tatt med alt, bare for å vise deg) gjør du slik :

<html>

<body background="bilde.jpg" >

</body>

</html>

Jeg har jo forklart at det vil se bra ut på mindre skjermer antar jeg, men hvis det er større skjermer så vil bildet prøve å gjenta seg. Derfor er det fint med et bilde som ser likt ut overalt slik at sånne ting ikke merkes.

Endret av DeathAngel
0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet (endret)

Forstår det, derfor nevnte jeg at om jeg delte bakgrunnsbildet opp i 3 deler, som inneholder bare de elementene som ligger i bakgrunnsbildet jeg nevnte tidelgiere, og plasserer disse små bilde i hjørnene de hører hjemme, vil ikke dette problemet bli eleminert da ? Er det i det hele tatt mulig å gjennomføre ?

Litt vanskelig å forklare... Her kommer en enkel illustrasjon:

353801.jpeg

Jeg plasserer bildene slik i css koden, og adder #666666 som bakgrunnsfarge, slik at alt ser ut til å høre sammen. er det gjennomførbart?

Endret av spelly
0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Noe sånt burde funke, trenger kanskje litt modifisering.


/*CSS kode*/
body {
Background:#fff url('images/vst.jpg') no-repeat;
height:300px;
width:420px;

}
#hst{
position:absolute;
right:0px;
top:0px; /*dette blir bildet øverst til høyre*/
Background:#ffffff url('images/hst.jpg') no-repeat;
height:300px;
width:420px;
z-index:-1;
}

#vst{

position:absolute;
left:0px;
bottom:0px;/*Dette blir bildet nederst til venstre*/
Background: #ffffff url('images/hst2.jpg') no-repeat;
height:300px;
width:420px;
z-index:-2;

}

#content {
background-color:#fff;
width: 600px;
margin:auto;
z-index:1;
display:block;
}[/codebox]

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Noe sånt burde funke, trenger kanskje litt modifisering.


/*CSS kode*/
body {
Background:#fff url('images/vst.jpg') no-repeat;
height:300px;
width:420px;

}
#hst{
position:absolute;
right:0px;
top:0px; /*dette blir bildet øverst til høyre*/
Background:#ffffff url('images/hst.jpg') no-repeat;
height:300px;
width:420px;
z-index:-1;
}

#vst{

position:absolute;
left:0px;
bottom:0px;/*Dette blir bildet nederst til venstre*/
Background: #ffffff url('images/hst2.jpg') no-repeat;
height:300px;
width:420px;
z-index:-2;

}

#content {
background-color:#fff;
width: 600px;
margin:auto;
z-index:1;
display:block;
}[/codebox]

Det funket ikke:S

skrev følgende i CSS:

[code]#hst{ position:absolute; right:0px; top:0px; Background:#ffffff url('images/bilde2.jpg') no-repeat; height:300px; width:420px; z-index:-1; } #vst{ position:absolute; left:0px; bottom:0px; Background: #ffffff url('images/bilde3.jpg') no-repeat; height:300px; width:420px; z-index:-2; } #content { background-color:#fff; width: 600px; margin:auto; z-index:1; display:block; }[/code]

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Høyde og bredde på #vst og #hst må tilpasses bildene dine. Så må du lage to <div> tagger med id="hst" og "vst". Ser at du i hovedsak har brukt class på resten av css'en din, det kan du selvfølgelig gjøre på dette også, men da må du huske å skifte # til . i css'en :)

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!


Start en konto

Logg inn

Har du allerede en konto? Logg inn her.


Logg inn nå

  • Hvem er aktive   0 medlemmer

    Ingen innloggede medlemmer aktive