Hilfe: background (code kürzen!)

  • Hy liebe community,


    ich bin hier neu und brauche eure hilfe beim verständis beim coden. Ich lerne selbstständig (html5, css3, js,....) und möchte es auch beruflich ausüben. Einiges ist mir leider nicht ganz so klar, trotz Dr. Google. Ich habe leider keinen Mentor oder der gleichen der mich etwas leitet. Ich benutze brackets als editor und firefox. Mein wissen ist auf HTML5 und CSS3 begrenzt. (Bin aber dabei mir js anzueignen). Nun zu meinem problem/frage ist:


    Ich habe eine bilderreihe die von links nach rechts geht. (ca. 100 bilder) und ich möchte in css den code kürzen, weil ich "background-size: 500%;" für jedes bild extra geschrieben habe. (muss theoretisch nicht sein, 1x sollte reichen) Problem ist wenn ich "background: url(); & background-size: 500%;" trenne (nicht in einer class oder id schreibe, funktioniert das nicht). Müssen die 2 teile immer zusammenstehen oder kann man das auch irgentwie anders zusammen fassen?


    HTML:

    Code
    1. <div id="class_all">
    2. <a class="aisha hero_img" href="index.html"></a>
    3. <a class="annette hero_img"></a>
    4. <a class="arch hero_img"></a>
    5. <a class="artemia hero_img"></a>
    6.     ......
    7. </div>

    CSS:


    Wäre super wenn ich das kürzen könnte. Meine Idee Wäre folgende (aber die rechnung geht nicht auf sobald ich background trenne):

    CSS:

    Ich hoffe das es verständlich ist. Sollte ich es irgendwie unverständlich geschrieben habe, werde ich mich bemühen es verständlich zu schreiben. Bitte jetzt um eure hilfe wie ich das am besten schreiben kann damit der code kürzer wird (400 Zeile sind es die sich theoretisch wiederholen)


    PS: (tipps zum nachlesen, wichtige lexis, nach schlagwerke, gern gesehen)


    Ich danke im vorraus :)

  • Frag mich nicht warum , aber so geht es

    https://codepen.io/basti1012/pen/KKKxPJM


    Wenn man das a weg macht ( so wie du es hattest ) geht es nicht. Obwohl das andere alle geht was da drinne steht .


    Kennt hier eine die erklärung dafür ?????



    Warum nutzt du eigentlich 500% ? was hast du vor ? Sind die Bilder so klein ?

    Vieleicht könnte dir auch background-size : contain oder cover helfen

  • Hy basti1012,


    danke das du dir meinen code angeguckt hast. Hab mir das auf codepen.io angeguckt. Du verwendest max-height/width und flexboxen? ich hab jetzt auch eine lösung gefunden wie ich den code um 400 Zeilen gekürzt habe.


    HTML:

    CSS:


    bei codepen konnte ich hier kein link reinsetzten. Muss mir mal codepen angucken. Zu den bildern sie sind klein ^^ (sprites) bild ist 1000x1000px (in denen sind 200px bilder drinen) und muss einen 500% faktor benutzen zum ausfüllen.


    Hier wie es aussieht: https://www.bilder-upload.eu/bild-1663c0-1573590033.png.html


    Aber verstehen tue ich noch immer nicht warum das so sein muss =(

  • Zitat

    Wenn man das a weg macht ( so wie du es hattest ) geht es nicht. Obwohl das andere alle geht was da drinne steht .

    Kennt hier eine die erklärung dafür ?????

    Der Grund ist, dass ihr das Hintergrund-Bild einfach mit background zuweist. Dadurch werden alle anderen Eigenschaften des Hintergrundes auf ihre Defaultwerte gesetzt. Verwendet man background-image funktioniert es auch ohne a im Selektor. Siehe das erste Bild:

    https://codepen.io/Sempervivum/pen/XWWPezN?editors=1100

  • Danke Sempervivum , da habe ich wieder was dazu gelernt.

    Ich mache das schon so lange und man lernt immer wieder was dazu. Habe schon so oft ein Hintergrund ein Bild gegeben aber dies verhalten noch nie bemerkt , bzw nicht benutzt.

    Immer wieder interesant das man fast täglich noch was dazu lernen tut.


    Du verwendest max-height/width und flexboxen? ich hab jetzt auch eine lösung gefunden wie ich den code um 400 Zeilen gekürzt habe.

    das min und max ,width-height und flex-box gedönst wahr in diesen Fall unwichtig für dich.

    Wenn ich mal ein Codepen fertig mache , mache ich es gleioch etwas schöner bzw passe es so an das man es auch mal für andere Zwecke posten kann.

    Gerade Flexbox und Bilder Vorlagen werden bald Täglich gesucht.


    Bei Codpen kannst du keine Bilder hochladen ( normale User ), nur verlinkungen zu Bilder.


    Willst du das große Bild mit Css aufteilen oder geht auch Javascript ?

    Mit Javascript sind das ca 10 Zeilen Code .

    Es gibt auch ein Plugin womit man in Css auch schleifen erstellen kann, aber das lassen wir mal .


    Mit den Javascript Code zeige ich dir mal wie ich das meine so ein Bild in 200 Stücke zu schneiden


    Edit:

    Mit Javascript meine ich das so

    Oben zeigt dir das original Bild. Ist nur kleiner damit man im Beispiel nicht rum Scrollen muß.

    Original größe ist 792 X 792 Pixel.


    Unten im selectmenü kannst du jetzt alle Bilder einzelnd sehen .


    Der Code der für dich jetzt wichtig wäre steht im html Bereich , weil unten im Seleect ist nach mehr code den du für ie Bilder trennen nicht brauchst.

    https://codepen.io/basti1012/pen/vYYzjLG?editors=1000


    Vieleicht wäre das auch was für dich das so zu machen , dann mußt du mal dein Original Bild komplett posten und dazu sagen was du genau vor hast und so

  • habe mich jetzt auch angemeldet bei codepen. Ich hoffe das ich dir zeigen kann wie es aussehen soll.


    https://codepen.io/Noobie_Chan/pen/dyyqLVG


    Ich benutze ein GRID (contain, row, col-1). Die Bilder muss du dir so vorstellen: ein Gesamtbild wo mehrere kleinere bilder drauf sind (Schachbrett). Ich lade dann zb. 1x das bild und zeige nur einen kleinen bereiche. (genannt: Sprites; https://de.wikipedia.org/wiki/CSS-Sprites) Ich habe noch KEINE möglichkeit JAVASCRIPT zu verwenden (bin erst dabei mir die grundlagen anzueignen, so mathe formeln oder was das sein soll)

  • Mir ist klar das man mit Js was machen kann. (aber mit meinem aktuellen wissen, noch nicht ^^) Ich habe dir mal das bild hochgeladen: https://www.bilder-upload.eu/bild-31f2fa-1574706774.png.html / Namen von links nach rechts: Kaulah, Laias, Leo, Juno, Shea, Freya, Baudouin, Cassandra, May, Mediana, Rephy, Lavril, Lucias, Rehartna / Bereich der grau ist, ist ein platzhalter für neue chars.


    Mein code "auf bereich beschränkt" (hoffe ich habe nix ausgelassen):

    HTML:

    CSS:

    bin gespannt auf js.