---
title: "css: bakgrundsbild längs hela sidan?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/145513-css-bakgrundsbild-längs-hela-sidan"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "joonas"
published: "2006-04-13T14:49:02.000Z"
updated: "2006-04-15T02:05:06.000Z"
replies: 2
views: 493
page: 1
pages: 1
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/145513-css-bakgrundsbild-längs-hela-sidan"
---

# css: bakgrundsbild längs hela sidan?

## #1 — joonas, 2006-04-13T14:49Z

Tjenare

har lite problem med att bakgrunden inte vill följa med längs hela sidan...
jag har utgått ifrån en layout ungefär som denna: <http://blog.html.it/layoutgala/LayoutGala36.html>

grejen är det att jag vill ha en bakgrund som löper i y-led längs hela sidan bakcom alla divarna 2, 3 och 4.
jag har lagt bakgrunden med repeat-y i container diven men då får man problemet att den inte sträcks ut av innehållet i navigation div och content diven osv..

finns det nått smidigt sätt att lösa detta? gillar upplägget och enkelheten hos layouten väldigt mycket...

vore underbart om nån kan hjälpa mig lösa problemet!

kan ge ett exempel på hur jag har försökt:

layout.html:

```
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="header"></div>
  <div id="main">
    <div id="content">bla<br />bla<br />bla<br /></div>
    <div id="column">col</div>
	asd
  </div>
  <div id="footer"><p>foot</p></div>
</body>
</html>
```

 

layout.css:

```
body{
	margin: 10px 0;
	padding: 0;
	text-align: center;
	font-family: "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
	font-size: 12px;
	color: #000;
}

p{
	margin:0 10px 10px
}

a{
	display: block;
	color: #981793;
	padding: 10px
}

#header {
	background-color: #00FFFF;
	margin: 0px auto;
	padding: 0px;
	height: 81px;
	width: 750px;
}

#main {
	background-image: url(img/main-bg.gif);
	background-repeat: repeat-y;
	background-position: center top;
	width: 750px;
	height:auto;
	margin: 0px auto;
}

#content {
	background-color: #99FF00;
	float: right;
	width: 590px;
	margin-top: 10px;
	margin-right: 9px;
	margin-bottom: 0px;
	margin-left: 0px;
}

#column {
	background-color: #FFFFCC;
	text-align: left;
	float: left;
	width: 130px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
}

#footer {
	font-size: 10px;
	color: #FFFFFF;
	background-color: #999999;
	text-align: center;
	padding: 0px;
	width: 750px;
	height: 25px;
	margin: 0 auto;
}
#footer p{margin:0;padding:5px 10px}
```

på denna bild syns problemet litegrann..
det jag vill är alltså att den "gråvita" bakrunden sträcks ut av innehållet i den gröna diven, och foot diven flyttas ner..
<http://www.flame.se/dude/Upload/Bild%201.png>

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

## #2 — joonas, 2006-04-13T16:24Z

jag hittade en artikel som löste problemet:
<http://www.csscreator.com/attributes/containedfloat.php>

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

## #3 — CatZ, 2006-04-15T02:05Z

Härligt att kunna lösa det själv. Brukar gå lite segt att få svar under påsken ;)

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/145513-css-bakgrundsbild-längs-hela-sidan
