Gå til innhold

Repitere bilde 100% ned?


Gjest medlem-77217

Anbefalte innlegg

Gjest medlem-77217
Skrevet

Hei sann! Jeg kommer alltid på et problem når jeg lager design. Når jeg skal få et bilde til å repitere seg nedover siden, går det fint. Men problemet som kommer da, er at det siste bilde i repitasjonen vil ikke repitere seg 100%!

 

Bilde:

 

|header-|

|---------|

| |

|---------|

| |

|---------|

| |

|---------|

| |

|---------| <---- Vil ikke repitere seg som de andre bildene!

|FOOTER|

 

 

 

-Takker for svar.

Videoannonse
Annonse
Skrevet

Dette kommer av at det vanligvis ikke skal settes høyde i html. Grunnen er at hvis man forandrer tekststørrelse, vil høyden forskyve seg. Et bakgrunnsbilde ligger innen et definert område. Og hvis området er akkurat like høyt som bildet, vil det bli som du vil ha det. Det kan eventuelt være bedre å lage hele bakgrunnen (tar ofte mye plass), eller å sette bakgrunnen der du vil ha den. For eksempel inne i en <div>. :)

Gjest medlem-77217
Skrevet

Hm... Så det du sier er i en litt enklere verriant?

Skrevet

Hehe, beklager litt knotete forklaring..

 

Dersom du vil ha repetert det siste bildet hundre prosent, er du nødt til å vite høyden på siden. Eller området du vil ha bakgrunnsbildet i. Her vil du ha bildet fem ganger repetert hundre prosent. Dersom bildet er 200 px høyt, sitter du igjen med en høyde på 1000 px. Så langt, alt vel.

 

Men det er ikke nødvendigvis en enkel sak å angi høyde i html. Og ofte, lite fornuftig. Så derfor er det ofte bedre å løse problemet på andre måter. Eventuelt å lage bakgrunnen annerledes, eller å bruke dette bakgrunnsbildet i elementer du kan sette høyde på.

Skrevet

ok, jeg sliter skikkelig med å forstå problemet her...

 

Er det slik at du har repetert et bilde nedover siden, et bilde som har f.eks høyde 200px, og at det da blir kuttet helt nederst på siden? Og at du ønsker å unngå at bildet blir kuttet?

 

Eller har du problemer med å få bildet til å repetere seg helt ned, altså at det er områder på siden hvor bildet ikke vises i det hele tatt?

 

---

 

Hvis du har problem nr 1 er du nødt til å sette høyden på siden/diven til et tall som er delig på høyden til bildet (hvis bildet er 200px høyt, må diven være 200,400,600,800,.......2000,2200 osv). På den måten kan bildet repeteres uten at det kuttes. Problemet her er at du kanskje har ulik lengde på innhold i denne div'en? Da blir det ikke så lett...

 

Problem 2: har man ikke nok innhold til at siden strekkes helt ned, og man har satt "background:#FFF img("bilde.jpg") repeat-y;" på body/html, kan et tips være å tilføre height:100%; (eventuelt min-height:100%;)

Gjest medlem-77217
Skrevet

Det er problem nummer 1 jeg sliter med Qualbeen. Men det jeg også vil, er at siden blir lengre når teksten er lang. Altså, at siden er like lang som teksten. Og da at den ikke kutter seg selv på slutten, men fullfører bilde.

Skrevet (endret)

<style>
body {
  background:  url(./bilde.png) repeat;
}
</style>

 

Plasser den mellom <head></head>, eller aller hels plasser dette på toppen av CSS-dokumentet ditt:

 

body {
  background:  url(./bilde.png) repeat;
}
img {
  border: 0px; /*nyttig*/
}

Endret av neitakk
Gjest medlem-77217
Skrevet

Jeg har en egen CSS fil for det. Men må det være i body tagen? Vil helst ha den i en egen tag.

Skrevet

Hvis du vil ha det ønskelige resultatet, er det både funksjonelt og riktig å legge den egenskapen til body i CSS. Det er sånn man gjør det...

 

Du spesifiserer jo bare body i css. HTML-sourcen forblir lik.

Gjest medlem-77217
Skrevet

Jeg tenker mer på om jeg vil ha en bakgrunn der igjen?

Skrevet

css-koden for bakgrunn på hele siden er

body {
 background:  url(./bilde.png) repeat;
}

 

Ønsker du kun bakgrunn på deler av siden, putter du ønsket tekst inn i en div, og legger til css-koden (altså bytte ut "body" med "din-div-her" i koden ovenfor).

 

Ulike div-er kan fint ha ulik bakgrunn, og hvis man har satt en egenskap på en div til noe, kan man fint endre på denne lenger nede i css-dokumentet. Det er siste skrevne regel som gjelder.

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å
×
×
  • Opprett ny...