Bakgrundsbild

Tråden skapades och har fått 5 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • Luleå
  • 2013-09-23 23:30

Jag försöker få ett foto att bli en bakgrundsbild. Jag har letat på nätet och hittat en ganska bra metod. Men det finns ett problem. Den nedersta tredjedelen av fotot klipps av och visas inte. Och jag fattar inte varför det är så.
Koden jag använt ser ni här nedan. Någon som vet varför bilden klipps? Hur ska jag göra för att få med hela fotot?

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}
Senast redigerat 2013-09-24 10:05
Ursprungligen av KOL:

Jag försöker få ett foto att bli en bakgrundsbild. Jag har letat på nätet och hittat en ganska bra metod. Men det finns ett problem. Den nedersta tredjedelen av fotot klipps av och visas inte. Och jag fattar inte varför det är så.
Koden jag använt ser ni här nedan. Någon som vet varför bilden klipps? Hur ska jag göra för att få med hela fotot?

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

Hur ser html-koden ut?

  • Medlem
  • Luleå
  • 2013-09-27 13:03

Eftersom det tog ett tag innan jag fick någon reaktion här på tråden så jag tog ett alternativ. Men svaret på din fråga är ju att man väljer det man själv vill att det ska vara där. Alltså för att css-koden img.bg, ska funka så bör html-koden se ut typ så här:

<img class="bg" src="den bild du vill använda.jpg">

Jag tog koden nedan istället. Nu syns hela bilden som bakgrund. Men tydligen ska man vara lite uppmärksam på att vissa länkar kan vara "döda" om man använder den här koden. Jag har dock inte upplevt några bieffekter än så länge.

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Har du ytterligare förslag på hur man kan göra för att få en bild som bakgrundsbild på en hemsida, responsiv och hela millevippen, så tar jag tacksamt emot det.

Ursprungligen av KOL:

Eftersom det tog ett tag innan jag fick någon reaktion här på tråden så jag tog ett alternativ. Men svaret på din fråga är ju att man väljer det man själv vill att det ska vara där. Alltså för att css-koden img.bg, ska funka så bör html-koden se ut typ så här:

<img class="bg" src="den bild du vill använda.jpg">

Jag tog koden nedan istället. Nu syns hela bilden som bakgrund. Men tydligen ska man vara lite uppmärksam på att vissa länkar kan vara "döda" om man använder den här koden. Jag har dock inte upplevt några bieffekter än så länge.

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Har du ytterligare förslag på hur man kan göra för att få en bild som bakgrundsbild på en hemsida, responsiv och hela millevippen, så tar jag tacksamt emot det.

Rent spontant skulle jag lägga den som background på "body".

Om man gör som i ditt första exempel, så tror jag (utan att sitta med det framför mig) att resultatet beror på var/hur du lägger in <mig > .

Bra att du fick ordning på det hursomhelst.

/Pontus

  • Medlem
  • Luleå
  • 2013-09-29 20:11

Aha, just det. Tack! Jag ska kolla det:)

  • Medlem
  • Luleå
  • 2013-10-04 22:21

Jag har nu provat, för skojs skull lite olika varianter på det där med bakgrundsbild. Sajten här nedan har haft de exempel jag testat.
http://css-tricks.com/perfect-full-page-background-image/

Jag får banne mej bara det översta exemplet att funka. Alla de andra exemplen klipper bilden på olika sätt. Det vill man ju inte. Det finns dock ett megaproblem med denna "fungerande" variant. Den ligger helt och hållet i css-filen. Jag skulle vilja styra bakgrundsbilden genom jQuery men då måste jag ju ha en selector, typ <img> eller <div>, men det har jag ju inte.

Någon som har något förslag?

1
Bevaka tråden