---
title: "Två bakgrundsbilder"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/134009-två-bakgrundsbilder"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Kvarner"
published: "2005-09-09T16:01:04.000Z"
updated: "2005-09-10T18:49:38.000Z"
replies: 5
views: 508
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/134009-två-bakgrundsbilder"
---

# Två bakgrundsbilder

## #1 — Kvarner, 2005-09-09T16:01Z

Hej!

Går det att använda två separata bakgrundsbilder på en sida? En vill jag ska synas på vänster sida och den andra på höger sida, som gardiner. Som det är nu har jag bakgrundsbilden i body (css) men kan inte få till ännu en bakgrundsbild utan att den första försvinner.

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

## #2 — Tengblad, 2005-09-09T16:03Z

Du kan använda divs som du sätter bakgrunder på med css

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

## #3 — Kvarner, 2005-09-09T16:36Z

Jag är inte sådär jättebra på detta. Hur skulle det i sådana fall se ut om jag valde att använda divs?

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

## #4 — Troxy, 2005-09-09T18:46Z

Såhär löste jag det:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
	<style type="text/css">

		body { margin: 0; padding: 0; width: 100%; height: 100%; }
		div#left_bg { width: 50%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; background: url("left_bg.gif"); }
		div#right_bg { width: 50%; height: 100%; position: absolute; right: 0; top: 0; z-index: -1; background: url("right_bg.gif"); }
		div#content { width: 700px; margin: 20px auto 20px auto; }

	</style>
</head>

<body>

	<div id="left_bg"></div>
	<div id="right_bg"></div>

	<div id="content">Innehåll här</div>

</body>
</html>
```

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

## #5 — jarvklo, 2005-09-09T21:42Z

Annars kan man också köra med tricket att ha olika bakgrund på html och body så slipper man hantera några absolutpositionerade block  t.ex. såhär:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
  <title>Ett exempel</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
html, body {margin:0; padding:0; height:100%}
html {
  background-image:url(gardin1.gif);
  background-position:top left;
}

body {
  background-image:url(gardin2.gif);
  background-position:top right;
  padding-left:250px;
  padding-right:250px;
}

</style>

<body>
  <div>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
  Aenean tristique tortor nec neque. Nullam risus turpis, 
  bibendum vitae, dapibus id, tempor et, orci. 
  Etiam sed nunc eu lacus semper interdum. Aenean sollicitudin
  nunc vel purus pharetra ultrices. Donec molestie ipsum at libero.
  Praesent euismod pharetra risus. Donec condimentum quam ut quam 
  posuere rutrum. Aliquam erat volutpat. Mauris venenatis massa
  id lectus. Mauris scelerisque, mi at condimentum eleifend, 
  arcu est iaculis lectus, id porta ipsum turpis at erat. 
  Morbi ac nunc ac erat dapibus mollis. Integer ipsum. Vestibulum 
  egestas, libero eu egestas rutrum, diam ligula commodo purus, 
  eu tincidunt quam eros et tellus. In hac habitasse platea dictumst.
  </div>
</body>
</html>
```

 [Testa](http://member.webforum.nu/2241/dubbelgardin.html) ;)

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

## #6 — Kvarner, 2005-09-10T18:49Z

Stort tack, fungerar utmärkt.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/134009-två-bakgrundsbilder
