eisn81: Hintergrund wird gestreckt?

SELF-Forum

Hintergrund wird gestreckt?

eisn81
– Informationen zu den Bewertungsregeln

Hallo,

folgendes problem: ich habe bei meiner website einen hintergrund per css angegeben, welcher sich nach unten hin wiederholen soll. soweit so gut, er wird allerdings immer gestreckt (vertikal) - ich vermute dass immer gerade zahlen des hintergrundes angezeigt werden (z.B. wird mindestens einmal die grafik angezeigt, nicht etwa 0.8 mal - was zu einer streckung/stauchung führt und jede unterseite anders aussehen lässt). wie kann man dies umgehen, ohne den hintergrund zu fixieren?

ansonsten wird die seite horizontal gestaucht, sobald eine scrollbar an der seite angezeigt wird, kann man dies auch umgehen?

beste grüsse

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Hintergrund wird gestreckt?

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    ansonsten wird die seite horizontal gestaucht, sobald eine scrollbar an der seite angezeigt wird, kann man dies auch umgehen?

    Dein Problem ist nicht nachvollziehbar, bei background-repeat wird meines wissen von keinem Browser irgendetwas gestreckt oder gestaucht.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Hintergrund wird gestreckt?

      eisn81
      – Informationen zu den Bewertungsregeln

      ansonsten wird die seite horizontal gestaucht, sobald eine scrollbar an der seite angezeigt wird, kann man dies auch umgehen?

      Dein Problem ist nicht nachvollziehbar, bei background-repeat wird meines wissen von keinem Browser irgendetwas gestreckt oder gestaucht.

      nun gut, ich kann natürlich nicht nachvollziehen, ob die seite gestaucht, oder aber nur aufgrund eines mit scrollbar anderen zentrums verschoben ist (sämtliche darauf befindlichen elemente sind per html zentriert, der hintergrund ebenfalls per css)...

      ich kann auch keine url angeben, da die seite noch im entstehen ist, aber mit solchen 'mängeln' noch nicht online gehen soll.

      bitte entschuldigt, aber ich mach das zum ersten mal, und bis auf besagte probleme klappt eigentlich alles auch ganz gut ;)

      beste grüsse
      eisn

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Hintergrund wird gestreckt?

    apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz,

    stell doch mal einen Link hier rein. Möglicherweise hast du kein background sondern <img> verwendet.

    Matthias

    --
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Hintergrund wird gestreckt?

      eisn81
      – Informationen zu den Bewertungsregeln

      Om nah hoo pez nyeetz,

      stell doch mal einen Link hier rein. Möglicherweise hast du kein background sondern <img> verwendet.

      Matthias

      die seite is noch nich online, hier aber das stylesheet, was für den background verantwortlich ist:

      body{
      background-color:black ;
      background-image:url(http://i256.photobucket.com/albums/hh186/barry_t/Wallpaper.jpg?t=1263957355) ;
      background-repeat:repeat-y ;
      background-position:center ;
      }

      ich musste die hintergrundfarbe schwarz machen, da sonst neben dem hintergrund weiss vorscheint, was ich als unschön erachte - desweiteren wird die hintergrunddatei später natürlich nicht auf einem fremden server gelagert sein...

      danke erstmal
      grüsse
      eisn

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Hintergrund wird gestreckt?

        apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Om nah hoo pez nyeetz,

        Es erfolgt keine Verzerrung von Hintergründen. Es wird allerdings in horizontaler Richtung (also von links nach rechts) genau einmal das Hintergrundbild angezeigt und zwar in der Mitte wie von dir gewünscht. Wenn der Viewport zu klein wird sieht man irgendwann auch nur die Mitte des Bildes. Scrollbalken entstehen durch den Inhalt und nicht durch den Hintergrund. Sie abzuschalten wäre eine Beeinträchtigung mancher Nutzer und ist mit HTML so nicht möglich, es sei denn durch die Verwendung von overflow.

        Matthias

        --
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Hintergrund wird gestreckt?

          eisn81
          – Informationen zu den Bewertungsregeln

          Om nah hoo pez nyeetz,

          Es erfolgt keine Verzerrung von Hintergründen. Es wird allerdings in horizontaler Richtung (also von links nach rechts) genau einmal das Hintergrundbild angezeigt und zwar in der Mitte wie von dir gewünscht. Wenn der Viewport zu klein wird sieht man irgendwann auch nur die Mitte des Bildes. Scrollbalken entstehen durch den Inhalt und nicht durch den Hintergrund. Sie abzuschalten wäre eine Beeinträchtigung mancher Nutzer und ist mit HTML so nicht möglich, es sei denn durch die Verwendung von overflow.

          Matthias

          also bei mir und bei nem bekannten von mir siehts [link:http://i256.photobucket.com/albums/hh186/barry_t/Unbenannt2.jpg?t=1264610818@title=so] und [link:http://i256.photobucket.com/albums/hh186/barry_t/Unbenannt.jpg?t=1264610926@title=so] aus, ich kopier einfach mal die codes der beiden seiten komplett hier rein - aber an sich ist nichts im html für die positionierung verantwortlich, und beim css ist imo auch nicht anderes ausser dem body-tag dafür verantwortlich...

          die erste seite:

            
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
  
<head>  
  
<title>BF Recordings</title>  
<link rel="shortcut icon" type="image/x-icon" href="fav.ico">  
<link rel="stylesheet" type="text/css" href="css\css.css">  
  
  
  
</head>  
  
  
<body>  
  
	<center><img alt="BF-Recordings" class="banner" src="buttons\banner.gif"></center>  
	<div class="navigation">  
		<nobr><center>  
		<a class="start" href="start.htm"><img src="buttons\homerot.jpg" alt="Home"></a>  
		<a class="about" href="about us.htm"><img src="buttons\aboutus.jpg" alt="About Us"></a>  
		<a class="releases" href="releases.htm"><img src="buttons\releases.jpg" alt="Releases"></a>  
		<a class="freestuff" href="free downloads.htm"><img src="buttons\freestuff.jpg" alt="Free Stuff"></a>  
		<a class="artistz" href="artistz.htm"><img src="buttons\artists.jpg" alt="Artistz"></a>  
		<a class="forthcomin" href="forthcoming.htm"><img src="buttons\forthcomin.jpg" alt="Forthcomin"></a>  
		</center></nobr>  
	</div>  
  
	<div class="news">  
	   <center>  
		<p class="newstext">Latest Release:</p>  
		<p>"Warcry EP" by Shem and Nilow - BFDS001</p>  
		<img class="relpic" alt="Cover" src="http://c4.ac-images.myspacecdn.com/images02/105/l_de8a32464ab941e59e7dbc4f2afd37d7.jpg">  
		<p class="newstext">Next Release:</p>  
		<p>"Quadrupedal EP" by Rolar - BFDB002</p>  
		<img class="relpic" alt="Cover" src="http://c2.ac-images.myspacecdn.com/images02/148/l_83c993397fd044038bd498310bc0ecd9.png">  
	   </center>  
	</div>  
  
</body>  
  
</html>

          und die zweite:

            
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
  
<head>  
  
<title>BF Recordings</title>  
<link rel="shortcut icon" type="image/x-icon" href="fav.ico">  
<link rel="stylesheet" type="text/css" href="css\css.css">  
  
  
  
</head>  
  
  
<body>  
  
	<center><img alt="BF-Recordings" class="banner" src="buttons\banner.gif"></center>  
	<div class="navigation">  
		<nobr><center>  
		<a class="start" href="start.htm"><img src="buttons\home.jpg" alt="Home"></a>  
		<a class="about" href="about us.htm"><img src="buttons\aboutus.jpg" alt="About Us"></a>  
		<a class="releases" href="releases.htm"><img src="buttons\releasesrot.jpg" alt="Releases"></a>  
		<a class="freestuff" href="free downloads.htm"><img src="buttons\freestuff.jpg" alt="Free Stuff"></a>  
		<a class="artistz" href="artistz.htm"><img src="buttons\artists.jpg" alt="Artistz"></a>  
		<a class="forthcomin" href="forthcoming.htm"><img src="buttons\forthcomin.jpg" alt="Forthcomin"></a>  
		</center></nobr>  
	</div>  
  
	<div class="relsofar">  
		<center>  
		<p class="header">Releases</p>  
				<p><span class="styleheaderrel">Drum and Bass</span><br>  
				[BFDB003] "Made In Spain EP" by Bluegoobling and Anthrax<br>  
				[BFDB002] "Quadrupedal EP" by Rolar<br>  
				<a class="catno" href="file:\\\C:\Dokumente und Einstellungen\eisn1\Desktop\website\bfdb001.htm">[BFDB001]</a> "Made In Russia EP" by Gancher and Ruin<br><br><br>  
				<span class="styleheaderrel">Dubstep</span><br>  
				[BFDS002] "Oddboy EP" by Oddboy<br>  
				[BFDS001] "Warcry EP" by Shem and Nilow<br>  
				  
		</p>  
		</center>  
	</div>  
</body>  
  
</html>

          das dazugehörige stylesheet ist folgendes:

            
body{  
background-color:black ;  
background-image:url(http://i256.photobucket.com/albums/hh186/barry_t/Wallpaper.jpg?t=1263957355) ;  
background-repeat:repeat-y ;  
background-position:center ;  
}  
  
.banner{  
margin-top:-10px ;  
}  
  
.navigation{  
margin-top:-5px ;  
margin-left:-30px ;  
}  
  
.start{  
color:black  
}  
  
.releases{  
margin-left:-5px ;  
color:black  
}  
  
.artistz{  
margin-left:-5px ;  
color:black  
}  
  
.freestuff{  
margin-left:-5px ;  
color:black  
}  
  
.about{  
margin-left:-5px ;  
color:black  
}  
  
.forthcomin{  
margin-left:-5px ;  
color:black  
}  
  
p{  
color:white  
}  
a{  
color:white ;  
}  
  
.newstext{  
font-weight:bold ;  
font-size:20px ;  
font-family:verdana ;  
text-decoration:underline ;  
}  
  
.relpic{  
width:300px  
}  
  
.news{  
margin-top:100px ;  
}  
  
.header{  
font-weight:bold ;  
font-size:20px ;  
font-family:verdana ;  
text-decoration:underline ;  
margin-top:100px ;  
}  
  
.catno{  
text-decoration:underline ;  
font-size:15px ;  
}  
  
.relsofar{  
margin-top:100px ;  
}  
  
.styleheaderrel{  
font-weight:bold ;  
text-decoration:underline ;  
}

          tut mir leid, das ist nen bisschen umfangreich, aber ich habe nirgends eine beschreibung dieses problemes gefunden und weiss selbst auch nicht mehr weiter (ausserdem kenne ich niemanden, der sich damit auskennt)...

          vielen dank!

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

        2. Hintergrund wird gestreckt?

          eisn81
          – Informationen zu den Bewertungsregeln

          Om nah hoo pez nyeetz,

          Es erfolgt keine Verzerrung von Hintergründen. Es wird allerdings in horizontaler Richtung (also von links nach rechts) genau einmal das Hintergrundbild angezeigt und zwar in der Mitte wie von dir gewünscht. Wenn der Viewport zu klein wird sieht man irgendwann auch nur die Mitte des Bildes. Scrollbalken entstehen durch den Inhalt und nicht durch den Hintergrund. Sie abzuschalten wäre eine Beeinträchtigung mancher Nutzer und ist mit HTML so nicht möglich, es sei denn durch die Verwendung von overflow.

          Matthias

          alles klar! offensichtlich zentriert der center-befehl nicht nur horizontal, sondern auch vertikal, und von dieser position aus wird das bild in horizontaler richtung sowohl nach oben als auch unten wiederholt, woraus sich das von mir beschriebene problem ergibt.

          lösung: backgound-position:top einfügen...

          vielen dank für die hilfsversuche :)

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Hintergrund wird gestreckt?

            suit Homepage des Autors
            – Informationen zu den Bewertungsregeln

            alles klar! offensichtlich zentriert der center-befehl nicht nur horizontal, sondern auch vertikal, und von dieser position aus wird das bild in horizontaler richtung sowohl nach oben als auch unten wiederholt, woraus sich das von mir beschriebene problem ergibt.

            background-position: center; ist gleichbedeutend zu background-position: center center; du kannst aber natürlich auch background-position: center top; notieren

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln