Bild mit css verlängern

Computer: Software & Programmierung HTML & CSS
#1

Hallo

Ich erstelle gerade ein Design zu einer Homepage. auf dieser Homepage ist ein elektronisches Gerät abgebildet dessen Kabel ich mit css verlängern wollte. nun mein Problem:

Das Kabel (png bild) sollte von einem bestimten Punkt, sagen wir mal left:450px; top:300px;, auf der y Achse bis zum unteren Rand (länge abhängig von der Contentlänge) wiederholt werden. es sollten jedoch bei kurzem Content weder Scrollbalken infolge eines zu langen Bildes entstehen noch sollte das Kabel vor Bildschirmende aufhören…

hat jemand eine Ahnung wie ich das Problem lösen könnte?

Bild mit css verlängern
#2

Du kannst ein bild mit css nur verlängern, wenn du es als hintergrundbild festlegst. Ich würde an deiner stelle ein div basteln und das png als background-image festlegen. Nun kannst du background-repeat festlegen, und das bild wird in die gewollte richtung wiederholt.

#3

hallo

das hab ich selbsverständlich bereits gemacht ein repeat: y-repeat ist bereits gesetzt. Nur wie setz ich dies so das es sich der content und/oder bildschirmlänge anpasst? mein ziel ist es ja die grafick so zu setzen das sie mindestens die bildschirmlänge (höhe) erreicht oder die contentlänge so ausfüllt das das kabel bis (nach scrolen) an den unteren bildschirm-rand reicht. ich will ja nicht das die grafik zu früh endet oder einen scrollbalken erzeugt…

#4

Hi,

Also die Position „left:450px; top:300px;“ das geht mit „Background-position: 450px 300px“ und bei dem wiederholen auf der y Achse, aber wahrscheinlich dann nicht auf der x Achse ?!?!?!

Da versuch mal „Background: url(dein-bild.png) repeat-x 0 0“ ich bin mir nicht sicher, aber dann wird es meine ich nur auf der y Achse widerholt… Einfach mal versuchen :smile: !!!

Hoffe ich konnte dir Helfen,
lg. Meganova

#5

zum besseren verständniss hier ein css schnipsel welcher mein problem ersichtlich machen sollten.

#kabel {position:absolute; top:565px;left:50%; right:50%; margin-left:416px; width:11px; Background-image: url(…/images/kabel.png); background-repeat:x-repeat;}

hier ermittle ich die mitte (horiontal) vom bildschirm und setze dann das Kabel am stummelchen des elektrogerätes an. Das bild wird nun (sorry das ich zuvor y achse geschrieben hab) auf der x achse repetiert.
wie kann ich nun das bild bis ganz nach unten repetieren lassen? das kabel sollte mindestens bis zum bildschirmrand kommen und sofern scrollbalken vorhanden sind sollte es sich verlängern so das am schluss beim runterscrollen das bild trozdem den bildschirmrand erreicht.

#6

Also, was Du bei „id=kabel“ Schreibst:

#kabel {position:absolute; top:565px;left:50%; right:50%; margin-left:416px; width:11px; Background-image: url(…/images/kabel.png); background-repeat:x-repeat;}

Eigendlich müsste es doch wiedrholt werden, was mir noch so spontan einfallen würd, gibt doch der „id=kabel“ eine höhe.

#7

ja wenn ich eine feste höhe setze wiederholt sich das bild, dort liegt ja nicht das problem. ich möcht jedoch keine feste höhe geben da sonst entweder durch eine zu grosse höhe scrollbalken entstehen und bei einer zu kleinen höhe das kabel mitten im bild endet. dazu kommt das der content unterschiedlich lang ist.