---
title: "bilder och mediaquery"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/191077-bilder-och-mediaquery"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Heatseeker"
published: "2013-01-21T06:15:03.000Z"
updated: "2013-01-21T07:45:57.000Z"
replies: 11
views: 653
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/191077-bilder-och-mediaquery"
---

# bilder och mediaquery

## #1 — Heatseeker, 2013-01-21T06:15Z

Hej
Nu vänder jag mig till er igen då det har kört fast sig.

Håller på och bygger en responsiv sida där jag vill ha 3 olika banners vid 3 olika resolutioner.
Har jätteproblem med att få in dessa banners och få dom att bli 100% width & height.

Ena sättet jag provat är att tilldela alla bilder "class 1-3" i html koden.
Ex:

```
<div id="wrap">
<div id="header">
      <img class="logga1" src="logga1.png">
      <img class="logga2" src="logga1.png">
      <img class="logga3" src="logga1.png">
</div>
</div>
```

CSS

```
      #header{height:13%; width:100%; margin:0; padding:0; overflow:hidden; background-repeat:no-repeat;
      .logga1{width:100%; height:100%;}
```

det här verkar inte funka i 3:e steget i mediaquery av nån anledning.
Vet inte om man kan göra såhär?

Andra steget som jag funderat över är att lägga in bilderna direkt i css koden
men jag har inte riktigt lyckats få bilderna att bli 100% via den vägen. Dessutom så vet jag inte om jag kan ändra föregående bild i nästa steg i mediaquery.

Förslag?

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

## #2 — Heatseeker, 2013-01-21T06:17Z

class ska altså vara 1-3 och INTE 1 som det står på alla bilder i html koden ovan

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

## #3 — voigtann1, 2013-01-21T06:21Z

Heatseeker, du kan redigera dina inlägg, du behöver inte postar ett nytt inlägg ;)
Och snälla använda \[kod\]-block runt dina koder, bli betydligt enklare att läsa vad som är text och vad som är kod.

var är media query koden?
Lite andra tips är att du behöver inte sätta bredd eller padding+margin på #header (utgå ifrån att detta är det ända div, #header css kod du har, background-repeat behöver du inte heller, då det inte ser ut att du ha någon bakgrund).

Om bilderna är från samma källa så räcker det med att du ändra img CSS koden för de olika upplösningar.

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

## #4 — Heatseeker, 2013-01-21T06:55Z

voigtann1 Hur skulle det se ut då?

typ 

```
{background-image:url(logga1.png)}
```

      sen

     

```
@media screen and (max-width:1280px) {
     {background-image:url(logga2.png)}
}
```

??

Bilden expanderar ju hela bilden. och eftersom jag använder border radius i toppen så har jag bara stött på problem:(

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

## #5 — voigtann1, 2013-01-21T07:00Z

Du måste ju ha en selector på dina CSS koder, sen om du har problem med radius så sätt bara en overflow hidden (vilket du redan har på din #header) och sätt border radius på den.

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

## #6 — Heatseeker, 2013-01-21T07:02Z

Så här ser det ut nu.

```
html, body{height:100%; margin-bottom:0; padding:0; background:#999;}

#wrap{min-height:100%; width:70%; margin:0 auto; background:#fff; border-top-right-radius:100px; border-top-left-radius:10px;}

#header{height:13%; width:100%; overflow:hidden;}

.logga1{border-top-right-radius:100px; border-top-left-radius:10px;  width:100%;height:100%;}
```

```
@media screen and (min-width:901px) and (max-width:1280px) {

#wrap{min-height:100%; width:70%; margin:0 auto; background:#fff; border-top-right-radius:70px; border-top-left-radius:10px;}

#header{ width:100%; height:13%;border-top-right-radius:70px; overflow:hidden; }

.logga1{border-top-right-radius:70px; border-top-left-radius:10px; width:100%; height:100%;}
}
```

```
@media screen and (min-width:600px) and (max-width:900px){
	
	#wrap{min-height:100%; width:70%; margin:0 auto; background:#fff; border-top-right-radius:70px; border-top-left-radius:10px;}

	#header{ width:100%; height:13%;border-top-right-radius:70px; }

	.logga2{border-top-right-radius:70px; border-top-left-radius:10px; width:100%; height:100%; overflow:hidden;}
}
```

```
@media screen and (min-width:200px) and (max-width:599px){
	
	#wrap{min-height:100%; width:70%; margin:0 auto; background:#fff; border-top-right-radius:70px; border-top-left-radius:10px;}

	#header{ width:100%; height:13%; border-top-right-radius:70px;}

	.logga3{border-top-right-radius:70px; border-top-left-radius:10px; width:100%; height:100%;}
}
```

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

## #7 — voigtann1, 2013-01-21T07:05Z

Postar relevant kod (tex du avslutar aldrig dina @media frågor).

Sen litet tips, om alla #wrap alltid har en min-height på 100% så behöver du inte upprepa dig på dina media querys, du har redan angett det i din huvud #wrap, lägg bara in vad som diffar på dina frågor.

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

## #8 — Heatseeker, 2013-01-21T07:08Z

Jo jag är helt med på att jag upprepar mig i det jag anget nu. Och jag har en "}" på slutet. Men bilden borde väl ändå ändra sig??

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

## #9 — voigtann1, 2013-01-21T07:15Z

Inte som jag ser det, du har sagt:

```
.logga2, logga3{display:none;}
```

 att .logga2 och .logga3 skall vara display none, du visar aldrig dom

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

## #10 — Heatseeker, 2013-01-21T07:17Z

men tog bort det nu:) nu ser det exakt ut som det jag skrev senast:)

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

## #11 — Heatseeker, 2013-01-21T07:27Z

Och btw, sker ändringarna alltid från orgininal koden eller från föregående query?

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

## #12 — voigtann1, 2013-01-21T07:45Z

Om kravet uppfylls så kommer den köra media också, ja.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/191077-bilder-och-mediaquery