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
    <div id="class_all">
        <a class="aisha hero_img" href="index.html"></a>
        <a class="annette hero_img"></a>
        <a class="arch hero_img"></a>
        <a class="artemia hero_img"></a>
        ......
    </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

    * Link entfernt, weil existiert nicht mehr *

    Wenn man das a wegmacht (so wie du es hattest) geht es nicht. Obwohl das andere alle geht, was da drinnen steht .


    Kennt hier eine die Erklärung dafür?


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

    Vielleicht 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 interessant 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 gleich etwas schöner bzw. passe es so an, dass man es auch mal für andere Zwecke posten kann.

    Gerade Flex-Box und Bilder Vorlagen werden bald täglich gesucht.


    Bei Codepen 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 dem 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 Originalbild. Ist nur kleiner damit man im Beispiel nicht rum Scrollen muss.

    Originalgröße ist 792 X 792 Pixel.


    Unten im Select-Menü kannst du jetzt alle Bilder einzeln sehen.


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

    * Link entfernt, weil existiert nicht mehr *


    Vielleicht wäre das auch was für dich das so zu machen, dann musst du mal dein Originalbild komplett posten und dazu sagen, was du genau vorhast 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)

  • Ohne Javascript wirst du natürlich jedes Bild von Hand die position eingeben müssen.

    Mit javascript kann man auch da was machen.


    Hast du die Bilder die du da verwenden willst irgendwo online ?

    Dann zeige ich dir mal wie ich das mit javascript meine

  • 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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!