Avatar billede kasper3 Nybegynder
30. august 2010 - 10:21 Der er 5 kommentarer og
1 løsning

centrer baggrund og billede

Jeg har en baggrund og et billede som jeg ønsker altid skal ligge i midten af siden, jeg har tidligere brugt følgende CSS til at gøre dette:

body
{
  background-color:#F9F9F2;
  background-image:url('bg.gif');
  background-repeat:repeat-x;
  background-attachment:fixed;
  background-position: 50% 50%;
  text-align:center;
}


.billede
{
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -269px;
  margin-left: -466px;
}


Det virker fint, men problemet er at hvis man kører browser vinduet op så stopper billedet ikke når det når browserens kanter men fortsætter i stedet ud af browseren, jeg vil have billedet til at stoppe når det når kanterne og at scroll kommer frem.
Avatar billede Christopher18 Nybegynder
30. august 2010 - 10:23 #1
prøv sæt den til 100 % i stedet

.billede
{
  position: fixed;
  top: 100%;
  left: 100%;
  margin-top: -269px;
  margin-left: -466px;
}
Avatar billede kasper3 Nybegynder
30. august 2010 - 10:39 #2
Så ryger billedet ned i højre hjørne.
Avatar billede mclemens Nybegynder
30. august 2010 - 14:03 #3
"Det virker fint, men problemet er at hvis man kører browser vinduet op så stopper billedet ikke når det når browserens kanter"

- mener du: problemet er at hvis man laver browser vinduet mindre i højden så stopper billedet ikke når det når browserens kanter ???
... Hvis det er problemet, så er det ikke noget der kan løses med css.
Avatar billede kasper3 Nybegynder
30. august 2010 - 14:36 #4
ja det er problemet, der skal vel noget javascript til at løse det så.
Avatar billede mclemens Nybegynder
30. august 2010 - 15:52 #5
<script type="text/javascript">
window.onresize=function(){
  elm=document.getElementById("billede");
  elm.style.paddingTop=elm.offsetTop<0?elm.offsetTop*-1+"px":"0";
  elm.style.paddingLeft=elm.offsetLeft<0?elm.offsetLeft*-1+"px":"0"

}
</script>

... Husk id på billede
Avatar billede mclemens Nybegynder
30. august 2010 - 22:51 #6
- Og tak for point :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester