Hilfe: background (code kürzen!)

Noobie_Chan · 11. November 2019

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:

Code

.hero_img {
    height: 150px;
    width: 150px;
    display: inline-block;
    outline: 1px solid black;
    box-shadow: 0px 0px 0px 6px #F8F8FF, 5px 5px 1.5px 6px #d9d9d9;
    margin-left: .8rem;
    margin-right: .8rem;
    margin-top: 1rem;
}

.aisha {
    background: url(../img/class_wizards.png) no-repeat 75% 0;
    background-size: 500%;
}

.annette {
    background: url(../img/class_mechanics.png) no-repeat 75% 0;
    background-size: 500%;
}

.arch {
    background: url(../img/class_archers.png) no-repeat 100% 0;
    background-size: 500%;
}

.artemia {
    background: url(../img/class_wizards.png) 100% 0;
    background-size: 500%;
}
.....

Alles anzeigen

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:

Code

.class_wizards {
    background-image: url(../img/class_wizards.png) no-repeat;
    background-size: 500%;
}

.class_mechanics {
    background-image: url(../img/class_mechanics.png) no-repeat;
    background-size: 500%;
}

.aisha {
    background-position: 75% 0;
}

.annette {
    background-position: 75% 0;
}
....

Alles anzeigen

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

basti1012 · 12. November 2019

Frag mich nicht warum , aber so geht es

Code

a.hero_img {
    height: 150px;
    width: 150px;
    display: inline-block;
    outline: 1px solid black;
    box-shadow: 0px 0px 0px 6px #F8F8FF, 5px 5px 1.5px 6px #d9d9d9;
    margin-left: .8rem;
    margin-right: .8rem;
    margin-top: 1rem;
     background-size:200%;
}

Alles anzeigen

* 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

Noobie_Chan · 12. November 2019

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:

Code

<div class="container">
  <div class="row">
    <div class="col-6">
      <div id="id_all">
        <a class="aisha class_wizards hero_img" href="index.html"></a>
        <a class="annette class_mechanics hero_img"></a>
        <a class="arch class_archers hero_img"></a>
        <a class="artemia class_wizards hero_img"></a>
        <a class="aselica class_knights hero_img"></a>
        <a class="baudouin class_priests hero_img"></a>
        <a class="bernheim class_warriors hero_img"></a>
        <a class="cain class_wizards hero_img"></a>
        <a class="cassandra class_priests hero_img"></a>
        <a class="cecilia class_mechanics hero_img"></a>
        <a class="chase class_warriors hero_img"></a>
        <a class="chrisha class_mechanics hero_img"></a>
        <a class="clause class_knightshero_img"></a>
        <a class="cleo class_wizards hero_img"></a>
        <a class="crow class_mechanics hero_img"></a>
        <a class="dakaris class_wizards hero_img"></a>
        <a class="demia class_knights hero_img"></a>
        <a class="dimael class_archers hero_img"></a>
        <a class="dosarta class_knights hero_img"></a>
        <a class="epis class_assassins hero_img"></a>
        <a class="erze class_assassins hero_img"></a>
        <a class="esker class_wizards hero_img"></a>
        <a class="ezekiel class_assassins hero_img"></a>
        <a class="fluss class_assassins hero_img"></a>
        <a class="frey class_priests hero_img"></a>
        <a class="gau class_warriors hero_img"></a>
        <a class="gladi class_assassins hero_img"></a>
        <a class="glenwyn class_knights hero_img"></a>
        <a class="hanus class_mechanics hero_img"></a>
        <a class="jane class_knights hero_img"></a>
        <a class="juno class_priests hero_img"></a>
        <a class="kara class_mechanics hero_img"></a>
        <a class="kasel class_warriors hero_img"></a>
        <a class="kaulah class_priests hero_img"></a>
        <a class="kirze class_warriors hero_img"></a>
        <a class="laias class_priests hero_img"></a>
        <a class="lakrak class_mechanics hero_img"></a>
        <a class="laudia class_assassins hero_img"></a>
        <a class="lavril class_priests hero_img"></a>
        <a class="leo class_priests hero_img"></a>
        <a class="lewisia class_wizards hero_img"></a>
        <a class="lilia class_wizards hero_img"></a>
        <a class="loman class_knights hero_img"></a>
        <a class="lorraine class_wizards hero_img"></a>
        <a class="lucias class_priests hero_img"></a>
        <a class="luna class_archers hero_img"></a>
        <a class="maria class_wizards hero_img"></a>
        <a class="may class_priests hero_img"></a>
        <a class="mediana class_priests hero_img"></a>
        <a class="mirianne class_assassins hero_img"></a>
        <a class="miruru class_mechanics hero_img"></a>
        <a class="mitra class_mechanics hero_img"></a>
        <a class="morrah class_knights hero_img"></a>
        <a class="naila class_warriors hero_img"></a>
        <a class="neraxis class_knights hero_img"></a>
        <a class="nia class_assassins hero_img"></a>
        <a class="nicky class_warriors hero_img"></a>
        <a class="nyx class_wizards hero_img"></a>
        <a class="oddy class_mechanics hero_img"></a>
        <a class="ophelia class_wizards hero_img"></a>
        <a class="pavel class_wizards hero_img"></a>
        <a class="philop class_knights hero_img"></a>
        <a class="priscilla class_warriors hero_img"></a>

      </div>
    </div>
  </div>        
</div>

Alles anzeigen

CSS:

Code

html {
    font-size: 16px;
}

body {
    margin: 0;
    background-color: #FAEBD7;
}

* {
    box-sizing: border-box;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;    
}

[id*='id_'] {
    background: #ebebeb;
    border: 1px solid #a3a3a3;
    height: 200px;
    overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
    padding-left: .2rem;
    padding-right: .2rem;
}

#id_all {
    
}

#id_knights {
    display: none;
}

#id_warriors {
    display: none;
}

#id_assassins {
    display: none;
}

#id_archers {
    display: none;
}

#id_mechanics {
    display: none;
}

#id_wizards {
    display: none;
}

#id_priests {
    display: none;
}

.hero_img {
    height: 150px;
    width: 150px;
    display: inline-block;
    outline: 1px solid black;
    box-shadow: 0px 0px 0px 6px #F8F8FF, 5px 5px 1.5px 6px #d9d9d9;
    margin-left: .8rem;
    margin-right: .8rem;
    margin-top: 1rem;
}

.class_knights {
    background: url('https://sebastian1012.bplaced.net/bilder/2.jpg') no-repeat;
    background-size: 500%;
}

.class_warriors {
    background: url('https://sebastian1012.bplaced.net/bilder/3.jpg') no-repeat;
    background-size: 500%;
}

.class_assassins {
    background: url('https://sebastian1012.bplaced.net/bilder/4.jpg') no-repeat;
    background-size: 500%;
}

.class_archers {
    background: url('https://sebastian1012.bplaced.net/bilder/5.jpg') no-repeat;
    background-size: 500%;
}

.class_mechanics {
    background: url('https://sebastian1012.bplaced.net/bilder/2.jpg') no-repeat;
    background-size: 500%;
}

.class_wizards {
    background: url('https://sebastian1012.bplaced.net/bilder/3.jpg') no-repeat;
    background-size: 500%;
}

.class_priests {
    background: url('https://sebastian1012.bplaced.net/bilder/4.jpg') no-repeat;
    background-size: 500%;
}

.aisha { background-position: 75% 0; }
.annette { background-position: 75% 0; }
.arch { background-position: 100% 0; }
.artemia { background-position: 100% 0; }
.aselica { background-position: 50% 0; }
.baudouin { background-position: 25% 25%; }
.bernheim { background-position: 100% 25%; }
.cain { background-position: 25% 50%; }
.cassandra { background-position: 50% 25%; }
.cecilia { background-position: 75% 25%; }
.chase { background-position: 25% 0; }
.chrisha { background-position: 100% 25%; }
.clause { background-position: 75% 0; }
.cleo { background-position: 50% 0; }
.crow { background-position: 50% 0; }
.dakaris { background-position: 50% 50%; }
.demia { background-position: 100% 0; }
.dimael { background-position: 0 25%; }
.dosarta { background-position: 25% 50%; }
.epis { background-position: 50% 25%; }
.erze { background-position: 0 0; }
.esker { background-position: 75% 50%; }
.ezekiel { background-position: 75% 25%; }
.fluss { background-position: 50% 0; }
.frey { background-position: 0 25%; }
.gau { background-position: 75% 0; }
.gladi { background-position: 75% 0; }
.glenwyn { background-position: 0 50%; }
.hanus { background-position: 0 50%; }
.jane { background-position: 0 25%; }
.juno { background-position: 75% 0; }
.kara { background-position: 25% 0; }
.kasel { background-position: 50% 0; }
.kaulah { background-position: 0 0; }
.kirze { background-position: 25% 5 0%; }
.laias { background-position: 25% 0; }
.lakrak { background-position: 100% 0; }
.laudia { background-position: 25% 0; }
.lavril { background-position: 25% 50%; }
.leo { background-position: 50% 0; }
.lewisia { background-position: 0 25%; }
.lilia { background-position: 0 0; }
.loman { background-position: 25% 0; }
.lorraine { background-position: 25% 25%; }
.lucias { background-position: 50% 50%; }
.luna { background-position: 25% 25%; }
.maria { background-position: 50% 25%; }
.may { background-position: 75% 25%; }
.mediana { background-position: 100% 25%; }
.mirianne { background-position: 100% 0; }
.miruru { background-position: 0 25%; }
.mitra { background-position: 0 0; }
.morrah { background-position: 25% 25%; }
.naila { background-position: 100% 0; }
.neraxis { background-position: 0 0; }
.nia { background-position: 0 50%; }
.nicky { background-position: 0 50%; }
.nyx { background-position: 75% 25%; }
.oddy { background-position: 25% 25%; }
.ophelia { background-position: 25% 0; }
.pavel { background-position: 100% 25%; }
.philop { background-position: 50% 25%; }
.priscilla { background-position: 0 25%; }

.container {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.row::after {
    content: "";    /* after pseudo leer ist! */
    clear: both;    /* keine floats zulassen */
    display: block; /* element die ganze zeile einnimmt */
}

[class*='col-'] {
    float: left;
    min-height: 1px;
}

.col-1 { width: 16.666%;  }
.col-2 { width: 33.333%;  }
.col-3 { width: 50%;      }
.col-4 { width: 66.666%;  }
.col-6 { width: 100%;     }

Alles anzeigen

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 =(

Sempervivum · 12. November 2019

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

basti1012 · 13. November 2019

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.

Zitat von Noobie_Chan

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

Noobie_Chan · 13. November 2019

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)

basti1012 · 14. November 2019

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

Noobie_Chan · 25. November 2019

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:

Code

<!-- HELDEN-BEREICH -->
<div class="container">
  <div class="row">
    <div class="col-6">

      <div id="id_priests">
      
        <a class="baudouin class_priests hero_img"></a>
        <a class="cassandra class_priests hero_img"></a>
        <a class="frey class_priests hero_img"></a>
        <a class="juno class_priests hero_img"></a>
        <a class="kaulah class_priests hero_img"></a>
        <a class="laias class_priests hero_img"></a>
        <a class="lavril class_priests hero_img"></a>
        <a class="leo class_priests hero_img"></a>
        <a class="lucias class_priests hero_img"></a>
        <a class="may class_priests hero_img"></a>
        <a class="mediana class_priests hero_img"></a>
        <a class="rehartna class_priests hero_img"></a>
        <a class="rephy class_priests hero_img"></a>
        <a class="shea class_priests hero_img"></a>
                        
      </div>

    </div>
  </div>        
</div>

Alles anzeigen

CSS:

Code

/* === GLOBAL === */

html { font-size: 16px; }

body {
    margin: 0;
    background-color: #FAEBD7;
}

* { box-sizing: border-box; }

a { text-decoration: none; }

/* === GENERELLES === */

.clearfix::after {
    content: "";
    display: block;
    clear: both;    
}

/* === HELDEN-BEREICH === */

[id*='id_'] {
    background: #ebebeb;
    border: 1px solid #a3a3a3;
    height: 200px;
    overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
    padding-left: .2rem;
    padding-right: .2rem;
}

#id_all { display: default; }
#id_knights { display: none; }
#id_priests { display: none; }  /* später mit js ein und ausblenden, irgentwie */

.hero_img {
    height: 150px;
    width: 150px;
    display: inline-block;
    outline: 1px solid black;
    box-shadow: 0px 0px 0px 6px #F8F8FF, 5px 5px 1.5px 6px #d9d9d9;
    margin-left: .8rem;
    margin-right: .8rem;
    margin-top: 1rem;
}

[class*='class_'] {
    background-size: 500%;
    background-repeat: no-repeat;
}

.class_priests { background-image: url(../img/class_priests.png); }

.baudouin { background-position: 25% 25%; }
.cassandra { background-position: 50% 25%; }
.frey { background-position: 0 25%; }
.juno { background-position: 75% 0; }
.kaulah { background-position: 0 0; }
.laias { background-position: 25% 0; }
.lavril { background-position: 25% 50%; }
.leo { background-position: 50% 0; }
.lucias { background-position: 50% 50%; }
.may { background-position: 75% 25%; }
.mediana { background-position: 100% 25%; }
.rehartna { background-position: 75% 50%; }
.rephy { background-position: 0 50%; }
.shea { background-position: 100% 0; }

/* === GRID === */

.container {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.col-1 { width: 16.666%;  }
.col-2 { width: 33.333%;  }
.col-3 { width: 50%;      }
.col-4 { width: 66.666%;  }
.col-6 { width: 100%;     }

/* === Clearfix-hack === */
.row::after {
    content: "";    /* after pseudo leer ist! */
    clear: both;    /* keine floats zulassen */
    display: block; /* element die ganze zeile einnimmt */
}

[class*='col-'] {
    float: left;
    min-height: 1px;
}

Alles anzeigen

bin gespannt auf js.

basti1012 · 26. November 2019

Einfacher wäre es, wenn die Bilder in einer Reihe wäre.

Aber so geht es auch

* Link entfernt, weil existiert nicht mehr *

Gewinnt zwar kein Schönheitspreis aber es zeigt, wie es gehen tut

Noobie_Chan · 26. November 2019

Schaut gut aus, leider kann ich es noch nicht nachvollziehen. Aber ich arbeite fleißig daran!

Hilfe: background (code kürzen!)

Jetzt mitmachen!

Teilen