Button in Bild platzieren

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

philodance

Mitglied
7 Juli 2012
36
0
6
Ich möchte eine einfache Webseite (nur eine Seite), welche einfach aus einem einzigen Bild mit ein paar Buttons besteht. In der CSS hab ich das Bild so eingefügt...

body {
background-image: url(bilder/hintergrund.png);
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-color: black;
background-size: 100% auto;
}


In dem Bild hintergrund.png ist ein Produkt dargestellt und ich will, dass man mit einem Klick auf dieses Produkt eine Datei herunterladen kann. Ganz simpel eigentlich. Hab versucht, das mit einer div-Box zu machen und die an der Stelle zu positionieren...

#download {
background-color: aliceblue;
height: 480px;
width: 500px;
position: absolute;
left; 1180px;
top: 370px;
}


"#download" ist die ID der div-Box. Das "div" müsste ich nachher natürlich noch durch "button" ersetzen, die Farbe "aliceblue" stimmt auch nicht usw., das wird kein Problem sein. Ich will nur wissen, wie man den Button an der einen Stelle im Bild positioniert, sodass dieser auch da bleibt, wenn man das Browser-Fenster verzieht. Kann auch sein, dass ich schon das Bild falsch eingefügt habt, ich weiß es nicht.
 

tk1234

Mitglied
2 September 2020
49
10
8
In dem Bild hintergrund.png ist ein Produkt dargestellt und ich will, dass man mit einem Klick auf dieses Produkt eine Datei herunterladen kann
Warum verwendest du dann nicht einfach ein verlinktes Bild und positionierst das entsprechend? Dabei aber Finger weg von position-absolute und Pixeln als Einheit.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Ich will nur wissen, wie man den Button an der einen Stelle im Bild positioniert, sodass dieser auch da bleibt, wenn man das Browser-Fenster verzieht.
Das ist so weit kein Problem, Du brauchst nur Prozentwerte statt der Pixelwerte für die Positionierung zu verwenden.
Das andere Problem ist, das Bild auf der Seite einzupassen, weil das Seitenverhältnis des Browserfensters nicht mit dem des Bildes übereinstimmt. Dabei musst Du dich entscheiden:
  • Es bleiben oben und unten oder seitlich freie Räume oder
  • es wird seitlich oder oben und unten etwas abgeschnitten oder
  • das Bild wird verzerrt.
Wie hast Du dir denn das vorgestellt?
 

tk1234

Mitglied
2 September 2020
49
10
8
Mir fällt für deine Aufgabenstellung eigentlich nur ein Wort ein: Image-Maps.
… die aber den Nachteil haben nicht barrierefrei zu sein. Wobei mir nicht so ganz klar ist ob es um einen Link oder um mehrere geht, die ersten beiden Absätze widersprechen sich da irgendwie, ich war aber von einem Bild mit einem Link ausgegangen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Neben der Barrierefreiheit gibt es noch den Gesichtspunkt, dass eine Imagemap nicht responsiv ist, siehe hier:
Dort werden auch Alternativen angegeben. Neben einer SVG-Grafik gibt es, wenn die betr. Elemente bzw. Flächen rechteckig sind, die Möglichkeit, einfache HTML-Elemente zu verwenden, wie der TO es vorhat.
 
  • Like
Reaktionen: nonverbal