html hintergrund?

hey,

ich habe ein problem mit den hintergrund

wenn ich ein div mache und den ein hintergrund zu weise wird es nicht angezeigt wenn ich es in den body tag rein schreibe wird es angezeigt aber dann wenn ich eine neue section machen will ändert es das bild vom body tag

und ich wollte jetzt fragen wie ich es hinkriege das das hintergrund bild vom div angezeigt wird

30.12.2022, 02:18

hier codepen link:https://codepen.io/wvnlabi/pen/zYLqdmJ

paaauleee

30.12.2022, 02:08

Veröffentliche doch mal html und css - dann kann man sich n besseres Bild vom Problem machen

Labinkz

Fragesteller

30.12.2022, 02:17

yo hier ist es https://codepen.io/wvnlabi/pen/zYLqdmJ

BlackHawk2306

30.12.2022, 02:11

Bitte 1x HTML + CSS einfügen, z.B. auf pastebin hochladen und rein-bearbeiten.

Labinkz

Fragesteller

30.12.2022, 02:17

https://codepen.io/wvnlabi/pen/zYLqdmJ

2 Antworten

paaauleee

30.12.2022, 02:26

meinst du die Div Class "Background"? das Div hat keine Höhe - somit kann man nix sehen, wenn ein HintergrundBild eingefügt ist - nur wenn du ein img einfügst, wird die Höhe automatisch vom Bild übernommen

Labinkz

Fragesteller

30.12.2022, 02:42

ich habe den div schon eine größe und breite gegeben und dann ist immernoch nix

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, IT

30.12.2022, 04:11

Gewönne dir eine saubere Trennung von HTML und CSS an
Das <style> Element hat im <body> eigentlich nichts zu suchen
Beim Einbinden der Grafik wurden die Anführungszeichen vergessen
Validiere dein HTML und behebe die angezeigten Fehler

HTML:

<div class="cluster">
  <h2>Hello world</h2>
  <p>some text....</p>
</div>

CSS:

.cluster {
  /* CSS shorthand: bg-img, bg-repeat, bg-pos & bg-size */
  background: url("path/bg-img.jpg") no-repeat center / cover;

  /* CSS background properties */
  background-image: url("bg-img.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

LG medmonk

Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer

Hallo,

ich habe dieses Widget für HTML auf CodePen gefunden:

https://codepen.io/eehayman/pen/jVPKpN

Nun möchte ich das auf einer Seite einbetten. Könnte mir da jemand helfen?

...zur Frage

HTML/CSS: Wie kann ich diesem Slider einen Text hinzufügen?

Hi,

würde gerne bei diesem Slider: https://codepen.io/valaxin/pen/jmEBL

Text (mit Überschrift) an die rechte Seite stellen, der sich mit jedem Bild ändert. Wie muss ich den Code dafür ändern?

...zur Frage

Wie lasse ich ein Bild in CSS einem DIV-Element überlappen?

Hallo,

ich veranstalte bald eine Reihe von Gewinnspielen anlässlich des 10-jährigen Bestehens. Über die volle Breite des Bildschirms soll am unteren Rand fixiert eine Leiste zu sehen sein, mit der man schnell per Klick zum Gewinnspiel kommt.

Links im DIV soll ein Bild von einem Luftballon zu sehen sein, der dann sozusagen über dem DIV "schwebt"; also die Styles des DIVs nicht übernimmt, sondern transparent einfach darüber liegt.

Ich habe jetzt folgenden Codepen: https://codepen.io/gooloonetwork/pen/KKvXoMO

Aber irgendwie sieht man das Bild nicht. Hat jemand einen Tipp, wie ich es hinbekomme, dass das Bild zu sehen bleibt (und vielleicht auch eine Idee, wie sich Bild und Text nicht beißen, also der Text aus dem ersten DIV nicht aus Versehen in den Hintergrund des Bilds schwappen)?

...zur Frage

Webentwicklung mit Baukasten oder selber programmiert?

Moin, ich frage mich zurzeit, macht es noch Sinn, eine Website selbst zu programmieren? Also zum Beispiel wenn man eine Restaurant Website oder eine Unternehmenswebsite entwickelt. Also mit zum Beispiel React und so. Oder auch React und ein Headless CMS? Weil viele verwenden ja oft Baukasten Systeme oder Templates. Ist man als Webentwickler noch gut, wenn man selbst programmiert?

...zur Frage

Text über Bild anzeigen lassen? Webdesign?

Hallo,

ich würde gerne auf einer Internetseite Text auf einem Hintergrundbild anzeigen lassen.

Das Bild habe ich über CSS mit background-image: url(Bildname); eingefügt. Den Text normal mit HTML. Der Text wird zwar jetzt auch auf dem Bild angezeigt, allerdings mit einem weißen Hintergrund mitten im Bild (siehe Bild). Der Text soll aber natürlich ohne diesen Hintergrund angezeigt werden.

Da ich noch relativer Anfänger bin und nicht weiter weiß, hoffe ich erstmal hier auf Hilfe.

Danke im Vorraus.

...zur Frage

Javascript Array Name von Element ausgeben?

Hallo!

Ich habe ein Code erstellt, welcher in einem Text Zählt wie oft jeder einzelne Buchstabe vorkommt.
Anschliessend habe ich die einzelnen Buchstaben in eine Liste eingesetzt.

let Liste = [Aa,Bb,Cc,Dd,Ee,Ff,Gg,Hh,Ii,Jj,Kk,Ll,Mm,Nn,Oo,Pp,Qq,Rr,Ss,Tt,Uu,Vv,Ww,Xx,Yy,Zz];

Nun habe ich die Liste sortiert und ein paar Zeilen geschrieben, damit mir der Buchstabe ausgegeben wird, der am häufigsten Vorkommt. Dies hat auch funktioniert, doch mir wird nur der Wert ausgegeben. Also ich weiss somit nicht welcher Buchstabe am häufigsten vorkommt.

Wie kann ich nun auch noch zusätzlich den ursprünglichen "Namen" Ausgeben?

...zur Frage

HTML <div> in Wordpress wird nicht (richtig) angezeigt?

Moin,

ich würde gerne in meine WordPress Seite eine Sektion mit Tabs einfügen. jquery läuft und die Styles (CSS) kann ich auch einfügen. Nun ist mein Problem, dass entweder die Tabs nicht horizontal sondern vertikal zerstückelt angezeigt werden, wenn ich den Code direkt in Wordpress einfüge, oder garnichts angezeigt wird, wenn ich das ganze im Child Theme als Template anlege. Das Template wird auf die Seite angewendet, aber es ändert sich nichts.

Hat jemand eine Idee oder Erfahrung mit Child Themes?

Theme: ARK
Code Snippet der hinzugefügt werden soll: https://codepen.io/pagefreak/pen/oNbEdVB

Aktuelles Resultat: http://cv.webdesign-jh.de/test/

...zur Frage

Benutzt ihr beim Programmieren div-Tags?

Hallo liebe Community,

mir ist nun mehrmals aufgefallen, dass viele Programmierer keine div-Boxen mehr benutzen, da diese scheinbar "veraltet" sind.

Stattdessen benutzen sie häufig: nav, header, footer, article, section etc..

Wie sieht das denn bei euch aus. Benutzt ihr weiterhin divs?

Bitte möglichst mit Begründung.

...zur Frage

Hintergrund mit button ändern?

Beim folgenden Code ändert sich die Farbe von Hintergrund, Schrift.außerdem die Beschriftung vom Button auf die Farbe die als nächstes kommt.

Ich würde aber gerne noch eine dritte Farbe hinzufügen aber auch nach lagen googlen leider nicht fündig geworden des halb Versuche ich es nochmal hier.

...zur Frage

Panorama Bild wie bei Google Maps?

Hi,

Ich habe folgenden Code:

HTML:

<div id="panorama-container">
  <img src="https://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg" id="panorama-image" />


  <a href="#" id="fullscreen-button">Vollbildschirm</a>
</div>

CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}


#panorama-container {
  width: 100%;
  height: 100%;
}


#panorama-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: auto;
  overflow-y: hidden;
}


#fullscreen-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

JS:

var panoramaContainer = document.getElementById("panorama-container");
var panoramaImage = document.getElementById("panorama-image");
var fullscreenButton = document.getElementById("fullscreen-button");
var position = 0;
var initialX = null;


fullscreenButton.addEventListener("click", function() {
  if (panoramaContainer.requestFullscreen) {
    panoramaContainer.requestFullscreen();
  } else if (panoramaContainer.webkitRequestFullscreen) {
    panoramaContainer.webkitRequestFullscreen();
  } else if (panoramaContainer.mozRequestFullScreen) {
    panoramaContainer.mozRequestFullScreen();
  } else if (panoramaContainer.msRequestFullscreen) {
    panoramaContainer.msRequestFullscreen();
  }
});


document.addEventListener("touchstart", function(event) {
  initialX = event.touches[0].clientX;
});


document.addEventListener("touchmove", function(event) {
  if (initialX === null) {
    return;
  }


  var currentX = event.touches[0].clientX;
  var diffX = currentX - initialX;
  initialX = currentX;


  movePanorama(diffX); /* Change this value to adjust the speed of the movement */


  event.preventDefault();
});


document.addEventListener("touchend", function() {
  initialX = null;
});


function movePanorama(amount) {
  position += amount;
  panoramaImage.style.left =        position + "px";


 
  
}

Nun wird zwar das bild wie bei Google maps angezeigt, also genauer gesagt möchte ich das wenn ich auf meinem Bild nach links wische, dass es sich nach links dreht und rechts genau so. Das Problem ist nur wenn ich zu weit Wische, zeigt er mir ein weißen Screen, aber wie kann man das verhindern.

Vielleicht versteht ihr was ich meine

...zur Frage

Wie kann ich eine Tabelle Handytauglich mit Bootstrap Grid machen?

Hallo,

ich habe eine Tabelle mit bootstrap grit in der form

heder header header ...

value1 value1 value1

value2 value2 value2

...

wenn das ganze auf Handygröße eingestampft wird erhalte ich

header

value1

value2

wie könnte ich so ein Layout realisieren

header

value1

header

value1

header

value1

header

value2

...

oder

...zur Frage

Unterschied: section - div? id - class? | Wie lerne ich am besten (HTML,CSS,PHP etc.)?

Hey,

wo liegt eigentlich der unterschied zwischen section - div ? und id - class? ich bitte um eine ausführliche Erklärung die jeder dummie wie ich versteht. Danke ! Desweitern benötige ich tipps, wie ich mir am besten HTML, CSS, PHP, Java usw beibringen kann, sprich am effizientesten ? Denn ich sitze seit über einem Monat vor dem PC und beherrsche lediglich zum Teil die Auszeichnungssprache HTML und die Gestaltungssprache CSS.

Für jede hilfreiche Antwort wäre ich sehr dankbar.

Gruß

...zur Frage

Wie macht man eine HTML Webseite responsive?

Ich habe in einem div Container zwei div Container nebeneinander.

Wenn man die Webseite vom Handy aus öffnet, sollen die zwei div Container welche nebeneinander sind übereinander angezeigt werden, ansonsten sieht der Text echt schlecht aus, wie kriege ich das hin?

...zur Frage

Toggle Plus-Minus HTML JavaScript?

Hallo, ich habe folgenden Quellcode:

Codepen.io/anon/pen/GpmrLr

Css hab ich fast komplett rausgenommen zur vereinfachung und auch der html code ist stark gekürzt um das ganze einfacher zu machen :)

Leider sieht man bei codepen die plus und minus png's nicht (ist ja klar)

Nun will ich über java script dafür sorgen, dass entweder plus ODER minus angezeigt wird (so wie ich bisher gelesen habe müsste das mit toggle funktionieren) und dementsprechend die tabelle bei minus ausgeklappt und bei plus eingeklappt ist, und wenn man draufklickt dass sich das eben dann ändert. (Tabelle einklappen und ausklappen habe ich die lösingsansäze visible oder display gefunden) ich bekomme das einfach nicht hin, denke die syntax ist bei mir jedes mal komplett falsch. Ich weiss dass ich z.b. noch ids vertrilen muss.

Wäre nett wenn mir jemand helfen könnte.

Danke schonmal im Vorraus! :)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen