---
title: "CSS gradient problem"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/191815-css-gradient-problem"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Matsakii"
published: "2013-10-25T19:56:13.000Z"
updated: "2013-10-28T07:46:30.000Z"
replies: 3
views: 984
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/191815-css-gradient-problem"
---

# CSS gradient problem

## #1 — Matsakii, 2013-10-25T19:56Z

Har ett css problem med Internet Explorer (vad annars!) Jag använder <http://www.colorzilla.com/gradient-editor/> för att göra en gradient. Det funkar fint i alla webbläsare utom IE. Koden ser ut så här:

> \*background:#ffffff url(../images/gradient.png) repeat-x bottom center ;\*/ 
> background: #ffffff; /\* Old browsers \*/
> /\* IE9 SVG, needs conditional override of 'filter' to 'none' \*/
> background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUyJSIgc3RvcC1jb2xvcj0iI2ZmZmVmYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc4JSIgc3RvcC1jb2xvcj0iI2ZmZjRmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNGRkZDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
> background: -moz-linear-gradient(top, \*#ffffff 0%, #fffefb 52%, #fff4f0 78%, #f4ddd9 100%); /\* FF3.6+ \*/
> background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(52%,#fffefb), color-stop(78%,#fff4f0), color-stop(100%,#f4ddd9)); /\* Chrome,Safari4+ \*/
> background: -webkit-linear-gradient(top, \*#ffffff 0%,#fffefb 52%,#fff4f0 78%,#f4ddd9 100%); /\* Chrome10+,Safari5.1+ \*/
> background: -o-linear-gradient(top, \*#ffffff 0%,#fffefb 52%,#fff4f0 78%,#f4ddd9 100%); /\* Opera 11.10+ \*/
> background: -ms-linear-gradient(top, \*#ffffff 0%,#fffefb 52%,#fff4f0 78%,#f4ddd9 100%); /\* IE10+ \*/
> background: linear-gradient(to bottom, \*#ffffff 0%,#fffefb 52%,#fff4f0 78%,#f4ddd9 100%); /\* W3C \*/
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4ddd9',GradientType=0 ); /\* IE6-8 \*/

Jag har lagt in taggen:

```
<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->
```

I header. Men likt förbannat så blir den för hög i IE. Är det någon som vet hur jag löser detta?

Tacksam för all hjälp!

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

## #2 — Danne V, 2013-10-26T19:34Z

> **[Matsakii skrev:](https://www.webforum.nu/p/1569165)**
>
> Har ett css problem med Internet Explorer (vad annars!)  Är det någon som vet hur jag löser detta?

Skit i css. Gör en bild.

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

## #3 — nitro2k01, 2013-10-26T20:33Z

Vilken version av IE funkar det inte i?

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

## #4 — prplxr, 2013-10-28T07:46Z

> **[Danne V skrev:](https://www.webforum.nu/p/1569170)**
>
> Skit i css. Gör en bild.

Håller med. Vill du ha en gradient som sträcker sig över hela skärmen, gör en bild som du sätter 100% bredd och höjd på i en div över hela läsaren.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/191815-css-gradient-problem