Autor |
Nachricht |
Snifferdog
Threadersteller
Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht:
|
Verfasst Do 30.07.2009 22:15
Titel Background-Position - Bildkante mittig |
|
|
Nabend zusammen,
stehe vor nem kleinen Problem und komme leider grad nicht weiter.
Ich habe ein Hintergrundbild mit einer Holzstruktur, die nur vertikal kantenlos wiederholbar ist.
Problem also: bei höheren Bildschirmauflösungen wird das Hintergrundbild horizontal wiederholt (was auch so bleiben soll) und man sieht natürlich die Schnittkante.
Der Inhalt (mit weißem Hintergrund) ist immer mittig angeordnet, quasi wie ein Blatt Papier. Meine Idee war jetzt den Hintergrund so zu positionieren, dass die Schnittkante immer in der Mitte des Bildes ist, sodass sie vom Inhalt verdeckt wird.
Allerdings beziehen sich die Prozentangaben bei background-position ja nicht nur auf die den Bildschirm sondern auch auf das Bild, was dazu führt dass ich nie die Schnittkante in die Mitte bekomme ohne feste Werte zubenutzen.
Gibt da irgendwie ne ordentliche Lösung?
Besten Dank und gute Nacht
Gruß
|
|
|
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Fr 31.07.2009 06:24
Titel
|
|
|
ich glaub n kleines onlinebeispiel wäre besser, denn zumindest ich verstehe dein problem nicht ganz.
wie wärs mit Code: | background-position: center top; |
?
|
|
|
|
|
Anzeige
|
|
|
Snifferdog
Threadersteller
Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht:
|
Verfasst Fr 31.07.2009 09:39
Titel
|
|
|
Hey,
ich schau mal, ob ich gleich ein Beispiel zusammenhauen kann.
Code: | background-position: center top; |
Habe ich leider schon versucht. Das ist eben genau das Problem mit der Definition von background-position. Das heißt, soweit ich das jetzt verstanden habe nämlich nur, dass die Mitte des Bildes in der Mitte des Elements ist.
Letztendlich kann ich das ganze natürlich einfach mit nem extra Div für den Hintergrund lösen, aber das möchte ich halt möglichst umgehen.
Gruß
EDIT:
Code: |
<html>
<head>
<title>Background Position</title>
<style type='text/css'>
html{
background-image: url(hintergrund.jpg);
background-position: center top;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
|
Online: http://www.alternategrafix.de/files/robin/background_position.html
Zuletzt bearbeitet von Snifferdog am Fr 31.07.2009 09:56, insgesamt 1-mal bearbeitet
|
|
|
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Fr 31.07.2009 09:58
Titel
|
|
|
Dann ändere dein Hintergrundbild so, dass die Schnittkante genau in der Mitte der Grafik ist.
(z. B. in PS mit Filter>Sonstige Filter>Verschiebungseffekt... )
|
|
|
|
|
Snifferdog
Threadersteller
Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht:
|
Verfasst Fr 31.07.2009 13:55
Titel
|
|
|
Hey,
das ist ne gute Idee ^^
Hätte man auch selbst drauf kommen können, vielen Dank
Gruß
|
|
|
|
|
|
|
|
Ähnliche Themen |
CSS: background-position bei repeat-y
[CSS] Firefox 1.5 und background-position: bottom
Safari Background Position Problem?
CSS background-position center bei Firefox
[CSS] Problem mit "background-position" im firefox!
mittig positionieren ...
|
|