---
title: "Backgrunds bild slutar när du börjar scrolla i ff"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/125581-backgrunds-bild-slutar-när-du-börjar-scrolla-i-ff"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "yrvaken2"
published: "2005-04-01T15:14:34.000Z"
updated: "2005-04-03T12:34:13.000Z"
replies: 23
views: 731
page: 1
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/125581-backgrunds-bild-slutar-när-du-börjar-scrolla-i-ff"
---

# Backgrunds bild slutar när du börjar scrolla i ff

_Sida 1 av 2._

## #1 — yrvaken2, 2005-04-01T15:14Z

Hej!
Jag har nu länge försökt läsa och lösa detta problem men lyckas inte. Kan någon hjälpa mig tro?

Jag har en mittendel som på sidan med en backgrundsbild som repiterar sig i y-led som går 100% på sidan. Det funkar bra både i ie och ff. 
Dock blir det problem i ff när sidan blir mer än 100% så man måste scrolla ner. Då slutar den att repitera backgrundsbilden i ff. Dock funkar det fortfarande fint i ie.

```
html,body {
	height: 100%;
}
#huvud {
		min-height: 100%; /* detta är för Firefox */
		height: 100%;
		background: url("Bilder/huvud_mit.png") repeat-y;
	}
#huvud[id] {
		height: auto;
	}
```

Permalänk: https://www.webforum.nu/p/125581

## #2 — icaaq, 2005-04-01T15:20Z

En lösning kan vara 

```
[red]
#huvud {
		min-height: 100%; /* detta är för Firefox */
		_height: 100%;
		background: url("Bilder/huvud_mit.png") repeat-y;
	}
[/red]
```

Men jag vet inte om det är den bästa llösningen .....

Välkommen till wF anyway :)

mv icaaq

Permalänk: https://www.webforum.nu/p/1582986

## #3 — yrvaken2, 2005-04-01T15:30Z

Tackar!
Nej det hjälpte tyvärr inte så mycket!

Permalänk: https://www.webforum.nu/p/1582992

## #4 — icaaq, 2005-04-01T15:36Z

Klassikern
<http://www.alistapart.com/articles/fauxcolumns/>

mv icaaq

Permalänk: https://www.webforum.nu/p/1583000

## #5 — yrvaken2, 2005-04-01T17:50Z

Jag har redan läst det där och det är så jag gör. Det funkar ju bra tills sidan råkar bli större än fönstret och jag måste scrolla.

Permalänk: https://www.webforum.nu/p/1583067

## #6 — zcorpan, 2005-04-01T17:53Z

Testa: 

```
html { background: url("Bilder/huvud_mit.png") repeat-y; }
```

Permalänk: https://www.webforum.nu/p/1583071

## #7 — jarvklo, 2005-04-01T17:57Z

Hmm...
... eller också kan man ta till någon av de här lite mer omständliga varianterna om det bara är MSIE man vill fulkoda för (funkar även för andra hack än just 100%höjdproblematiken):

```
<style type="text/css">
html,body {
  height: 100%;
}
#huvud {
  min-height: 100%; /* denna är för alla utom MSIE */
  background: url("Bilder/huvud_mit.png") repeat-y;
}
</style>
<!--[if IE]>
<style type="text/css">
  #huvud {height:100%} /* detta är ett separat hack för MSIE */
</style>
<![endif]-->
```

eller alternativt (om du inte vill ha CSS-koden liggande i ditt HTML-dokument)

```
<link rel="stylesheet" type="text/css" href="stilar_fur_alle.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css"  href="stilhack_fur_msie.css">
<![endif]-->
```

 där du lägger all CSS för "vettiga" webbläsare i "stilar_fur_alle" och sedan smackar på de skillnader/hacks/fulkodningar som behövs för att få till utseendet även i MSIE i "stilhack_fur_msie.css" ;)

Permalänk: https://www.webforum.nu/p/1583074

## #8 — yrvaken2, 2005-04-01T19:13Z

jarvklo: det funkar redan bra i ie, det är firefox det krånglar i när sidan blir så lång att man måste scrolla, tack ändå.

zcorpan: att sätta in backgrounden i html tagen funkar inte så bra!

Permalänk: https://www.webforum.nu/p/1583111

## #9 — icaaq, 2005-04-01T19:20Z

Har du någon länk till sidan? eller har du möjlighet att lägga upp den i [dina filer](http://www.webforum.nu/userfiles.php?s=)?

mv icaaq

Permalänk: https://www.webforum.nu/p/1583116

## #10 — jarvklo, 2005-04-01T19:54Z

> **yrvaken2 skrev:**
>
> jarvklo: det funkar redan bra i ie, det är firefox det krånglar i när sidan blir så lång att man måste scrolla, tack ändå.

Det förstod jag - och det brukar kunna bli så när man både sätter height och min-height så att FF kan se dem - vilket inte bör hända om du t.ex. flyttar height: för #huvud till en villkorlig kommentar och tar bort den ur det som FF kan se  eller gör som icaaq föreslog ;)

Annars kan du ju har råkat ut för att någon annan stil för ett omgivande element kan ha "ärvts med" så att den påverkar, så jag instämmer med icaaq.. Show us all the code dude !

Permalänk: https://www.webforum.nu/p/1583135

## #11 — yrvaken2, 2005-04-01T19:55Z

ni kan se på en bild här hur det blir..

[bild](http://www.andersohrn.se/wf.jpg)

Permalänk: https://www.webforum.nu/p/1583136

## #12 — jarvklo, 2005-04-01T19:58Z

Hmm... 
Ja det blir som du skrev - och det är det nog ingen som tvivlar på...

Men vill du ha hjälp med koden (och inget av de föreslagna trixen hjälper) måste du tillhandahålla mer koddetaljer för att vi skall kunna kunna hjälpa till ;)

Det du råkat ut för är inget ovanligt - men det kan ha flera orsaker och det är omöjligt att gissa utan att se vad du gjort kodmässigt ;)

Permalänk: https://www.webforum.nu/p/1583139

## #13 — yrvaken2, 2005-04-01T20:04Z

okej :) jag ska fixa koden!

Permalänk: https://www.webforum.nu/p/1583142

## #14 — yrvaken2, 2005-04-01T20:10Z

hmtlkoden:

```php
		<div id="centrera">
			<!--LOGON-->
			<div id="logo"></div>
			<!--FLASH MENY-->
			<div id="meny">
	
			</div>
			<div id="huvudtop"></div>

			<div id="huvud">
				<!--HÖGERRUTAN-->
				<div id="hoger">
					<div class="hoger">
						<? visaUtbildningar();	?>
					</div>
					<div class="topobot"></div>
			
				</div>

				<!--VÄNSTERRUTAN-->
				<div id="vanster">
					<? visaNyheter(); ?>
				</div>
			</div>

			<div id="huvudbot"></div>			
			<!--BOTTENRUTAN-->
			<div id="botten">
				<span id="nav"><a href="">Feedback</a> | <a href="">Sitemap</a> | <a href="">Kontakta</a> | <a href="Admin/admin.php">Administration</a></span>
			</div>
		</div>
```

CSS koden:

```
html,body {
	height: 100%;
}
body {	
		background: url("Bilder/bg.png") repeat; 
		margin: 0;
		padding: 0;
		color: #333;
		font: 10pt Verdana, Tahoma;
		text-align: center; /* Behövs för Ie */
	}
#centrera {	
		width: 780px;
		height: 100%;
		padding: 0; 
		margin: auto; 
		text-align: left;
	}
	
/* TOPPEN AV SIDAN */

#logo, #meny {
		margin: 0;
		padding: 0;	
	}
#logo {
		height: 125px;
		background: url("Bilder/logo.jpg") no-repeat;
	}
#meny {	
		height: 51px;
		width: 780px;
	}

/* HUVUD RUTAN	*/						

#huvud, #huvudtop, #huvudbot {
		margin: 0;
		padding: 0;
	}
#huvudtop {		
		width: 780px;
		height: 10px;
		background: url("Bilder/huvud_top.png") no-repeat bottom;
	}
#huvudbot {
		clear: both;
		width: 780px;
		height: 10px;
		background: url("Bilder/huvud_bot.png") no-repeat top;
	}
#huvud {
		min-height: 100%; /* detta är för Firefox */
		background: url("Bilder/huvud_mit.png") repeat-y;
	}

/* Botten */
#botten {
		clear: both;
		height: 35px;
		margin: 0;
		padding: 10px 15px;	
		background: url("Bilder/botbild.png") no-repeat ;
	}
```

Permalänk: https://www.webforum.nu/p/1583147

## #15 — martin, 2005-04-01T21:02Z

ser ut som om du behöver en clearfix till huvudrutan. Testa att sätta overflow:auto på #huvud, eller testa det som finns på <http://www.positioniseverything.net/easyclearing.html>

/ m a r t i n

Permalänk: https://www.webforum.nu/p/1583169

## #16 — yrvaken2, 2005-04-02T08:34Z

overflow: kommer nog inte funka så bra då får jag ju en scroll mitt på sidan och det vill jag inte ha..
Ska ta en titt på det där md clearfix.
Tack!

Permalänk: https://www.webforum.nu/p/1583281

## #17 — jarvklo, 2005-04-02T12:04Z

Hmm... 
Vad händer om du provar att använda "min-height-till-FF-och-height-till-MSIE"-tricket på #centrera (istället för att bara begränsa den till just 100%) ?

Permalänk: https://www.webforum.nu/p/1583346

## #18 — yrvaken2, 2005-04-02T12:37Z

testade det nu och det hjälpte tyvärr inte heller..

Permalänk: https://www.webforum.nu/p/1583358

## #19 — jarvklo, 2005-04-02T18:45Z

OK - Då är det, som jag ser det , antagligen bara en länk till sidan som kan hjälpa oss att hjälpa dig ;)

Permalänk: https://www.webforum.nu/p/1583475

## #20 — yrvaken2, 2005-04-03T08:13Z

[Sådär en länk fixad!](http://www.andersohrn.se/test5/)

:)

Permalänk: https://www.webforum.nu/p/1583615

---

Tråden på webben: https://www.webforum.nu/amne/html-css/125581-backgrunds-bild-slutar-när-du-börjar-scrolla-i-ff  
Nästa sida: https://www.webforum.nu/amne/html-css/125581-backgrunds-bild-slutar-när-du-börjar-scrolla-i-ff/page2.md