Bilder bei einem HTML-Code einfügen?

Hallo!

Ich benutze oft die Seite ''ToyHouse'', wo ich meine Charaktere unter Kontrolle habe und ordnen kann. Ich wollte einen der Codes benutzen, den ich gefunden habe (ist free to use - von vomco; für ein Beispiel siehe unten).Ich weiß jedoch nicht, wo Ich das Bild einfügen muss. Hier ist ein bisschen vom Code:

-->
<div class="mx-auto w-100" style="font-size:13px;max-width:768px;">
  <div class="row no-gutters" style="margin:-4px;">
    <!-- ------------------------------
      AVATAR
    ------------------------------- -->
    <div class="col-md-4 p-1">
      <div class="card rounded-0 h-100" style="min-height:200px;border-color:#e09d7e;
        background: url (IMG URL)
      </div>
    </div>center;background-size:cover;">
  </div>
</div>
<div class="col-md-8 p-1 accordion" style="min-height: 460px;" id="accordion">

Wenn ich die Bilder erst ''hochladen'' muss, dann habe ich das auf Sta.sh/DeviantArt gemacht. Ich habe auch schon den Ersteller des Codes angeschrieben, jedoch keine Antwort erhalten und nichts klappt, egal was ich versuche.

Bild zum Beitrag

2 Antworten

Destranix

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, programmieren

30.09.2019, 14:36

Ich vermute, die URL des Bildes soll da hin, wo IMG URL steht. hinder "url()" muss in der zeile aber noch ein

;">

sonst wird das nichts.

EDIT:

Du musst statt des ;"> das " </div></div>" dahinter durch ein leerzeichen ersetzen.

Taiyakii

Beitragsersteller

30.09.2019, 14:42

Das habe Ich bereits versucht - wenn Ich jedoch ;"> einfüge, wird alles verschoben und das bild wird trotzdem nicht angezeigt. Ich denke Ich weiß wo das Bild hin muss, aber wenn Ich es da hin tue, wird in dem Kästchen wo das Bild angezeigt werden soll nur der Link angezeigt

Destranix

30.09.2019, 14:45

@Taiyakii

Habe meine Antwort nocheinmal editiert^^

Wenn man das so macht,w ei vopn mir zuvor vorgeschlagen, dann bleiben Fragmente übrig, die nicht in den Syntax passen.

das " </div></div>" gehört an sich nicht da hin, wo es steht, sondern vermutlich ans Ende der Datei.

Destranix

30.09.2019, 14:46

@Taiyakii

i.e.:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<<div class="mx-auto w-100" style="font-size:13px;max-width:768px;">

<div class="row no-gutters" style="margin:-4px;">

<!-- ------------------------------

       AVATAR

------------------------------- -->

<div class="col-md-4 p-1">

<div class="card rounded-0 h-100" style="min-height:200px;border-color:#e09d7e;

 

 

 background: url(https://images.gutefrage.net/media/fragen/bilder/bilder-bei-einem-html-code-einfuegen/0_big.png?v=1569846714132) center;background-size:cover;">

 

 

</div>

</div>

<div class="col-md-8 p-1 accordion" style="min-height: 460px;" id="accordion">
</div>
</div>
</body>
</html>

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

30.09.2019, 15:38

Korrektur deines geposteten Snippets:

-->
<div class="mx-auto w-100" style="font-size:13px;max-width:768px;">
  <div class="row no-gutters" style="margin:-4px;">
    <!-- ------------------------------
      AVATAR
    ------------------------------- -->
    <div class="col-md-4 p-1">
      <div class="card rounded-0 h-100" style="min-height:200px;border-color:#e09d7e;background: url('path/to/your/image') center;background-size:cover"></div>
    </div>
  </div>
</div>
<div class="col-md-8 p-1 accordion" style="min-height: 460px;" id="accordion">

An der Stelle:

background: url('path/to/your/image')

fügst du zwischen die einfachen Anführungszeichen die Bild-URL ein.

Im nächsten Zuge wäre es dennoch nicht unwichtig zu erfahren, wo genau du diesen Snippet einfügst. Ist das irgendein Textfeld, in dem du festlegen kannst, wie dein Profil aussieht? Was steht zudem in den ersten beiden Zeilen deines kompletten Snippets?

Taiyakii

Beitragsersteller

30.09.2019, 16:03

Hi! Auf der Seite welche Ich benutze habe Ich ein großes, Leeres Feld in dem Ich rein theoretisch schreiben kann was Ich will. Ich müsste kein HTML Code benutzen aber so ist mir das lieber und es gefällt mir besser.
Dein Code funktioniert zwar aber irgendwie ist es jetzt ein bisschen verschoben, das bild hängt jetzt oben obwohl es an der Seite sein sollte. Kann man da irgendwas machen?
Sieht jetzt so aus: https://sta.sh/0ij8xb6wkvu (Ist wegen Privatsphäre zensiert)

regex9

30.09.2019, 16:08

@Taiyakii

Du hast den gesamten Block über dem Block eingefügt, in dem das Bild eigentlich sein sollte, bzw. dein HTML-Code liegt noch an der falschen Stelle. Kannst du über dein Feld überhaupt festlegen, wie der untere Abschnitt (Profil) aussehen soll?

regex9

30.09.2019, 16:11

@Taiyakii

Ach doch, sollte möglich sein, da du in deinem Code ja bereits Elemente des Akkordions definierst.

Poste mal deinen gesamten Code-Snippet via pastebin. Wenn er private Daten beinhaltet, ersetze sie durch das Wort test o.ä..

Taiyakii

Beitragsersteller

30.09.2019, 16:40

@regex9

Hier ist der gesamte Code: https://pastebin.com/NG8sx8jh

regex9

30.09.2019, 17:31

@Taiyakii

Ich habe es mal kurz auf einer Toyhouse-Seite on the fly ausprobiert: https://pasteboard.co/IzOY8uT.png. Es sollte genügen, in Zeile 24 die URL einzusetzen.

Taiyakii

Beitragsersteller

30.09.2019, 17:50

@regex9

Ich versuchte bereits bei Zeile 24 einfach nur die URL einzusetzen aber in dem Kästchen wo das Bild sein soll wird dann einfach nur der Link angezeigt

regex9

30.09.2019, 18:26

@Taiyakii

Angenommen, du würdest dieses Bild verwenden: https://sta.sh/0ij8xb6wkvu. Dann klicke nochmal mit der rechten Maustaste auf das Bild und kopiere dir die Bildadresse.

Ähnliche Beiträge

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

Html / Css Text auf Header bzw. Div-Container Text über Hintergrund?

CSS formatiert die Schrift so, dass immer der ganze Querbalken über dem Hintergrund nicht transparent ist. Wie mache ich das? ** Siehe Grafiken **

h1 { font-family: arial, verdana, helvetica; font-size: 40px; font-weight: 200; }

header { position: relative; height: 200px; display: block; background-color: black;

} nav { width: 500px; height: 200px; background-color: aqua; }

...zum Beitrag

Div Box ragt über Rand hinaus?

Hallo, mein Problem ist, dass wenn ich das Browserfenster verkleinere die Div über den Rand geht. Perfekte Lösung wäre, wenn der Text dann unter dem Bild erscheint, sobald er zu klein für das Fenster ist. Code:


                <div id="produkte">
                    <figure class="produkt">
                        <a href="#schuh">
                            <div class="bild">
                              <img src="bilder/schuh.jpg" alt="Schuh"></div>
                            
                            <figcaption class="beschreibung">
                            <strong>Nike Air - 790€</strong>
                            <p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>
                            </figcaption>
                        </a>
                    </figure>
                    <figure class="produkt">
                        <a href="#schuh">
                            <div class="bild">
                              <img src="bilder/schuh.jpg" alt="Schuh">
                    </div>
                            
                            <figcaption class="beschreibung">
                            <strong>Nike Air - 790€</strong>
                            <p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>
                            </figcaption>
                        </a>
                    </figure>
                    <figure class="produkt">
                        <a href="#schuh">
                            <div class="bild">
                              <img src="bilder/schuh.jpg" alt="Schuh">
                            </div>
                            
                            <figcaption class="beschreibung">
                            <strong>Nike Air - 790€</strong>
                            <p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>
                            </figcaption>
                        </a>
                    </figure>
                </div>
  } 
  @media screen and (min-width: 751px){
    #produkte {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
    }
}
    .produkt {
        width: 700px;
        border: solid #e4e4e4;
        background-color: white;
        padding: 10px;
        margin: 20px;
        height: 200px;
        text-align: left;
        height: 200px;    
    }
    .produkt img {
        width: 180px;
        padding: 15px;
    }
    a {
        font-size: x-large;
        color:#3f79e6;
        display: flex;
        text-decoration: none;
}
    @media screen and (max-width: 750px){
      #produkte {
          display: flex;
          flex-direction: column;
          align-items: center;
          max-width: 100%;
          height: auto;
      }
      .produkt a {
          display: flex;
      }
    }

...zum Beitrag

HTML / CSS: Meine div-Box-Breite passt sich automatisch dem Inhalt an?

Wie löse ich das Problem? Die div-Box soll immer die gleiche Breite behalten.

CSS-Code:

.btn-1 {
  text-transform: none;
  cursor: pointer;
  overflow: visible;
  font-family: inherit;
  line-height: inherit;
  padding: 20px 50px;
  color: white;
  background-color: #424242;
  border-color: #fff;
  transition-duration: 0.4s;
  border-radius: 15px !important;
  font-size: 1.3em !important;
  text-rendering: auto;
  word-spacing: normal;
  letter-spacing: normal;
  text-shadow: none;
  align-items: flex-start;
  font: 400 13.3333px Arial;
  border-width: 2px;
  border-style: outset;
  border-image: initial;
}

HTML:

<button data-shoppy-product="hzX6G9S" class="btn-1">Pay 15 €</button>

Unwichtig:

<script src="https://shoppy.gg/api/embed.js"></script>

...zum Beitrag

HTML/CSS, Bilder werden nicht angezeigt?

Ich habe im <body> mehrere divs, in denen abwechselnd divs und Texte untereinander angezeigt werden sollen. Die Bilder sollen auf voller Höhe sein (height: 100vh;). Wenn ich die Bilder mit <img src=""> im HTML Code im div einfüge, wird es angezeigt. Will ich es aber in meiner CSS Datei als background-image vom div einfügen, wird der Bereich, wo das Bild sein sollte, einfach nur grau. Die style.css ist richtig in der HTML-Datei angegeben, da andere Styles funktionieren. Der Pfad ist ebenfalls richtig angegeben. Hat jemand Ideen, was ich falsch mache? :(

...zum Beitrag

Bild in CSS formatieren?

Hallo,

ich habe ein kleines Problem:

Auf meiner Webseite gibt es ganz oben ein Bild, welches mit

background-image:

gesetzt wird. Doch es wird nicht der obere leere Linke Rand angezeigt. Kann ich das Bild irgentwie kleiner machen damit alles angezeigt wird? Z. B.:

background-image: 200px 200px url(“../img/image.jpeg”)

...zum Beitrag

CSS Image wird nicht angezeigt?

CSS:
.top-banner {
  width: 100%;
  height: auto;
  background-size: contain;
  background: url("../img/start.jpg") no-repeat;
}

HTML:
 <div class="top-banner"></div>

Das Bild soll responsive angezeigt werden. Es liegt an dem height: auto;

gebe ich zum Beispiel eine feste height von 400px, wird es wieder angezeigt, ist aber natürlich nicht responsiv.

Gibt es da eine andere Möglichkeit, ein Image anzuzeigen, welches mitskaliert?

...zum Beitrag

CSS 3D-Würfel: Wie kann ich die Rückseite so wie die anderen Würfelseiten bewegen lassen?

Ich habe einen 3D-Würfel per CSS erstellt und würde ihm nun gerne eine 3D-Animation beim Hovern verleihen.

An sich komme ich auf das richtige Ergebnis, aber irgendwie verstehe ich die Rotation der Rückseite nicht und würde gerne wissen, wie ich sie so wie die anderen Würfelseiten bewegen lasse und nicht über diese komische Seitwärtsbewegung. Beziehungsweise ich möchte wissen, weswegen es bei rotateX überhaupt eine Seitwärtsbewegung durchführt.

Hier der Code:

HTML:

<div class="scene">
  <div class="cube">
    <div class="cube__face cube__face--front"></div>
    <div class="cube__face cube__face--back">back</div>
    <div class="cube__face cube__face--right">right</div>
    <div class="cube__face cube__face--left">left</div>
    <div class="cube__face cube__face--top">top</div>
    <div class="cube__face cube__face--bottom">bottom</div>
  </div>
</div>

CSS:

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 80px;
  perspective: 400px;
  transition-duration: 1s
}

.cube {
  transition-duration: 1s;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
}

.scene:hover .cube {
  transform: translateZ(-10px);
}

.cube__face {
  ;
  border: 3px solid black;
  position: absolute;
  width: 200px;
  height: 200px;
  color: white;
  font-size: 2.5em;
  transform: scale(2.5);
  text-align: center;
  font-weight: bold;
  line-height: 200px;
  transform: perspective(500px) translateZ(250px)
}

.cube__face--front {
  transition-duration: 1s;
  transform: rotateY(0deg) translateZ(100px);
  background: url(Gesichr.png) hsla(214, 100%, 46%, 0.7);
  opacity: 0.5;
  background-size: cover;
}

.cube__face--right {
  transition-duration: 1s;
  transform: rotateY(90deg) translateZ(100px);
  background: hsla(99, 100%, 36%, 0.7);
}

.cube__face--back {
  transition-duration: 1s;
  transform: rotateY(180deg) translateZ(100px);
  background: hsla(63, 99%, 59%,0.7)
}

.cube__face--left {
  transition-duration: 1s;
  transform: rotateY(-90deg) translateZ(100px);
  background: hsla(10, 100%, 50%, 0.7)
}

.cube__face--top {
  transition-duration: 1s;
  transform: rotateX(90deg) translateZ(100px);
  background: hsla(181, 100%, 67%,0.8)
}

.cube__face--bottom {
  transition-duration: 1s;
  transform: rotateX(-90deg) translateZ(100px);
  background: hsla(38, 100%, 52%,0.7)
}

.scene:hover .cube__face--front {
  transform: rotatex(-30deg) translateZ(100px);
}

.scene:hover .cube__face--right {
  transform: rotateY(90deg) translateZ(100px) rotatez(-30deg);
}

.scene:hover .cube__face--back  {
  transform: rotateY(0deg) rotateX(150deg) translateZ(100px) rotate(-180deg);
}

.scene:hover .cube__face--left {
  transform: rotateY(-90deg) translateZ(100px) rotatez(30deg);
}

.scene:hover .cube__face--top  {
  transform: rotateX(60deg) translateZ(100px);
}

.scene:hover .cube__face--bottom {
  transform: rotateX(-120deg) translateZ(100px);
}

...zum Beitrag

Abstand nach oben entfernen <CSS>?

Hallo,

ich möchte den Abstand oben entfernen. Es funktioniert einfach nicht, egal was ich mache.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <H1>Willkommen auf meiner Webseite</H1>
</div>
    <script>
        function myFunction() {
           var element = document.body;
           element.classList.toggle("dark-mode");
        }
        </script>
        <button onclick="myFunction()">Toggle dark mode</button>
</body>
</html>

CSS:

body {
  padding: 0%;
  margin: 0%;
  background-color: white;
  color: black;
  font-size: 25px;
  width: 100%;
  height: 100%;
  
}
.dark-mode {
  background-color: black;
  color: white;
}
.box{
  justify-content: center;
  padding: 0%;
  margin: 0%;
  padding-top: 0%;
  margin-top: 0%;
  background-repeat: no-repeat;
  width: 100%;
  height: 6cm;
  background-image: url(img/web-1012467_1920\ \(1\).jpg);
}

Das wäre der Code, ich hoffe irgendwer kann mir helfen.

So sieht es aus:

Danke im voraus.

...zum Beitrag

CSS Buttons verschieben?

Hallo, ich möchte auf meiner Website, dass die Buttons untereinander und nicht nebeneinander angezeigt werden wie hier:

habe schon einiges probiert aber nichts funktioniert richtig...

mein html Code ist das hier:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="style_bypass.css" rel="stylesheet">
    <title>Bypass</title>
</head>
<body id="links">


<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Set Lockscreen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Einstellungen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Test Video</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Galaxy Store</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Google Quick Search</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Youtube</button></a>



</body>

Und mein CSS Code der hier:

button {
    --border: 5px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #37E8FC; /* the color */
    
    font-size: 35px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000a;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  body#links {
    display:grid;
    grid-auto-flow:column;
    grid-gap:px;
    place-content:center;
    margin:0;
    height:100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

Was genau muss ich in der CSS Datei bearbeiten, dass die Buttons nicht nebeneinander sondern untereinander angezeigt werden?

...zum Beitrag

Wie kann ich ein Foto in einer CSS oben links in die Ecke machen?

Moin, ich möchte ein Bild in meiner CSS oben links in die Ecke machen, damit das auf jeder Seite so ist.

Der Code für meine HTML:

<!doctype html>
<html>
<head>
<title>Informatik</title>
<link href="Kurz.css" rel="stylesheet" type="text/css">
</head>
<body>
<footer></footer>
<script language="javascript" type="text/javascript" src="Footer.js"></script>
</body>
</html>

Der Code für CSS:

html {
  height: 100%;
}
body {
 background-image: url("Bilder/getraenkeguenther.jpg");
 background-repeat: no-repeat;
 background-position: left top;
 min-height: 100%;
 margin: auto;
 display: flex;
 flex-direction: column;
}
footer {
  margin-top: auto;
  height: 200px;
  text-align: center;
background-color: deepskyblue;
}

Der Code der JS:

var footer = `
<a>Impressum</a>
`;
document.getElementsByTagName("footer")[0].innerHTML = footer;

Das backgroundimage soll quasi als einzelnes Bild oben links in die Ecke

...zum Beitrag

Wie diesen Code im input-Feld einfügen?

Einen schönen Abend zusammen,

hat jemand eine Idee wie ich diesen Unicode (🔎) in die input Suchleiste einfügen könnte ?

ich habe es bei CSS sou versucht:

input{

background-image: url(🔎);

Meine zweite Idee war ein Bild in meinen Dateien abzuspeichern und diese ebenfalls wie angeführt zu verlinken.

background-image: url(Bild 1);

Leider funktioniert es nicht, hat jemand eine Lösung für dieses Problem ?

Ich würde gerne darauf hinweisen, dass ich versuche eine Lupe im Suchfeld einzufügen.

...zum Beitrag

Wieso ändert sich bei height und width nur die Position des Elements?

Hallo zusammen,

ich versuche mit CSS meinen Slider höher bzw. breiter zu stellen (mit width und height).

Leider ändert sich nur die Position des Sliders. Weiß jemand, wo das Problem ist bzw. wie man es beheben kann?

Es ist ein .slider bei CSS und ich benutze VS, falls diese Info relevant sein sollte.

...zum Beitrag

CSS rollender Ball mit Bild?

Guten Tag,

ich habe in CSS einen rollenden Ball programmiert. Dieser rollt auch ist aber unsichtbar obwohl ich ein background: url gesetzt habe.

.circle {
    display: block;
    width: 100px;
    height: 100px;
    background: url("logo.png");
    border-radius: 50%;
   
    -webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    
    position: absolute;
    left: 0;
  }

Das Bild gibt es und die Rotation auch, ist aber nicht wichtig.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen