---
title: "Centrera en bakgrundsbild som är större än skärmen"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/182126-centrera-en-bakgrundsbild-som-är-större-än-skärmen"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "geeky"
published: "2010-01-22T21:46:46.000Z"
updated: "2010-01-23T19:15:57.000Z"
replies: 3
views: 1496
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/182126-centrera-en-bakgrundsbild-som-är-större-än-skärmen"
---

# Centrera en bakgrundsbild som är större än skärmen

## #1 — geeky, 2010-01-22T21:46Z

Hej,

Jag har en bakgrundsbild som är 1460px bred och det är bredare än upplösningen på de flesta skärmar, så det skapas en horisontell scroll. Jag vill kunna centrera denna bakgrundsbild på skärmen och samtidigt slippa scrollen. Men jag lyckas inte klura ut hur jag ska göra det.

Sidan är i princip uppbyggd på följande sätt:

```
<body>
<div id="bakgrundsbilden i denna div">

Innehållet finns här

</div>
</body>
```

Jag har försökt köra overflow:hidden på body men resultatet blir bara att innehållet på sidan högerställs. Att minska ner bakgrundsbilden till lämligare storlekar går inte eftersom att bakgrundsbildens design är på ett sådant sätt att designen skulle skymmas av innehållet om den minskades.

Jag vill att det ska fungera som det fungerar på Twitter. Om man kollar på [en random sida på Twitter](http://twitter.com/myracedriver) så ser man att bakgrundsbilden kan bli hur stor som helst utan att det skapas en scroll och innehållet är alltid centrerat. Det är så jag vill ha det på min sida, men kan inte klura ut hur Twitter gör det.

Någon som vet hur man kan göra så?

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

## #2 — voigtann1, 2010-01-22T22:19Z

sätt det som en CSS bakgrund, centera den, inga problem.

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

## #3 — nitro2k01, 2010-01-22T22:47Z

Så här t ex:

```
<style type="text/css">
#mindiv{
    background-position: top center;
    background-image: url('http://farm3.static.flickr.com/2798/4226215232_28f6bffb6c_o.jpg');
    background-attachment: fixed;
}
</style>
<div id="mindiv">
```

Då får du bakgrunden centrerad. Om du vill ha det som på Twitter-sidan kan du byta **top center** mot **top left**. Du kan också **background-repeat** och **background-color** vid behov. Se denna sida: <http://www.w3schools.com/css/css_background.asp>

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

## #4 — geeky, 2010-01-23T19:15Z

Tack för hjälpen. Jag hade skrivit css:en som nitro2k01 tipsar men jag hade även satt dess exakta width (width: 1460px) och det skapade scrollen. Men man behövde visst inte specifikt sätta width:en.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/182126-centrera-en-bakgrundsbild-som-är-större-än-skärmen
