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.

Bild zum Beitrag

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, CSS

16.10.2021, 14:18

Der Text soll aber natürlich ohne diesen Hintergrund angezeigt werden.

Dann gib dem Element, in dem der Text steht, einen transparenten Hintergrund:

<!doctype html>
<title>Hintergrund transparent</title>
<style>
div#mitText { background:transparent }
</style>
<div id="mitText">
  <p>lorem ipsum</p>
</div>

Alex

Sopan983

Fragesteller

16.10.2021, 14:22

Hey, vielen Dank für die Antwort. Das hat das Problem gelöst.

Ähnliche Fragen

Hintergrundbild in HTML anpassen?

Hab neu mit HTML und css angefangen...

Ich möchte zum Anfang als Startprojekt sowas wie einen Lebenslauf gestalten und will eben ein bestimmtes Bild als Hintergrundbild.

background-image: url('thumb2-flag-of-bern-4k-swiss-canton-silk-flag-silk-texture.jpg');
background-repeat: no-repeat;

so steht es in meiner CSS, das passt auch nur ist es nur auf dem Viertel des Bildschirms. Was muss ich noch dazuschreiben damit es 1. nur ein Bild ist und nicht wiederholt wird und es sich an die Tabgröße anpasst?

...zur Frage

JavaScript Canvas Bilder werden Komisch angezeigt, Lösung?

Hallo,

ich bastele gerade mit dem HTML5 Canvas herum und möchte dort mit JavaScript ein Bild anzeigen, dies Funktioniert auch allerdings werden sie sehr komisch angezeigt, meist zu groß oder verschwommen hier der JavaScript code:

"function drawImage(url) {

var img = new Image();

img.onload = function () {

ctx.drawImage(img,10, 10, 35, 35);

}

img.src = url

hier habe ich schon mit den drawImage Parametern rumgespielt um es anzupassen allerdings kam kein gutes Ergebnis heraus...

Hier noch die canvas daten: width: 900px; height: 700px;

diese habe ich mit CSS angegeben.

Schonmal vielendank für eure Hilfe!

...zur Frage

Div genauso groß wie das Fenster in dem eine Website geöffnet ist?

Setzt man ein "background-image: ..." dann wird das Bild genauso groß gemacht wie das Fenster selber auch ist: An der unteren und seitlichen Kante wird ggf ein Teil abgeschnitten. Hat man nun ein Div mit mehren Bildern und möchte dieses so setzen wie ein background-image wüsste ich nicht wie ich das umsetzen würde... Konkret also: Wie setzt man ein Div exakt auf die Größe des Fensters in dem die Website selber geöffnet ist sodass am unteren und seitlichen Rand abgeschnitten wird sofern das Div selber größer ist als das eigt sichtbare Fenster?

...zur Frage

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

...zur Frage

[HTML] Chrome zeigt Hintergrundbild nicht an, IE schon

Hallo Leuts!

Ich habe einen Div mit einem Mülleimer als Hintergrund Bild, alles schön und gut, aber im Chrome zeigt er mir ihn nicht an, also da ist kein Bild. Im Internet Explorer schon. Weiß einer eine Lösung??? o_O

Hier mal der CSS Coder:

.newsdeletebutton {
position: relative;
margin-top:105px;
left:310px;
position:relative;
height:25px;
width:25px;
border:none;
color:rgba(255,255,255,0);
background-image: url(images/mülleimerzu.png);
background-repeat: no-repeat;
background-color:rgba(255,255,255,0);
cursor:pointer;
}

...zur Frage

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zur Frage

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zur Frage

CSS Hintergrundbild wird nicht angezeigt?

Ich mache grade eine Website, bei der oben im Header ein Hintergrundbild hinter dem Text stehen soll. Habe also ein div erstellt, eine Klasse gegeben und eine Höhe festgelegt. Wenn ich eine Hintergrundfarbe dort haben will, klappt es einwandfrei. Aber wenn ich ein background-image dort haben möchte, wird es im Browser einfach nicht angezeigt. Der Pfad stimmt, hab ihn schon mehrfach kontrolliert.

Wenn ich auf "untersuchen" klicke im Browser, wird auch dort im Code angezeigt, dass an der Stelle ein Hintergrundbild ist. Aber es wird einfach nicht angezeigt. Keine Ahnung, woran es liegt. Kann mir bitte jemand helfen?

...zur Frage

CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

...zur Frage

CSS Problem - wie ":hover" richtig anwenden?

Hallo,

- etwas dringend -

ich bin noch Anfängerin und möchte folgenden Effekt erreichen:

wenn ich mit der Maus über irgendeinen Bereich in der Spalte (column, s.u,.) gehe, dann sollen sich die Farben ändern: Hintergrund und p-Text (background: / color:) ist kein Problem. Aber ich habe eben auch eine Headline und einen Button da drin, deren Farben sich ebenfalls ändern müssten, da es sonst nicht mehr lesbar ist.

Ich weiß aber nicht wie ich das richtig anspreche. Einzeln hover-Effekt hinzufügen ist sinnfrei.

Mir würde es auch reichen, wenn sich z.B. einfach alle Farben in der Spalte invertieren oder irgendetwas anderes. Vielleicht ist der hover: Ansatz ja auch falsch? Google hat leider nicht geholfen bisher....

#plan .column:hover {

transform:scale(105%);

box-shadow: 0px 0px 40px rgba(0, 0, 0, .3);

background-color: #FF4772;

color: #C6EBE9;

}

So sieht es bis jetzt aus. Headline schlecht lesbar und den Button sieht man gar nicht

...zur Frage

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”)

...zur Frage

Hintergrund bild im header wird nicht angezeigt?

Hallo, ich will in meine Html Website ein Bild als Hintergrund im Header haben, dies geht nicht, ich habe schon mehrmals gegoogelt und verschiedene Codes probiert, aber wenn ich die Seite aktualisiere bleibt sie weiß, und sagt, dass das Bild nicht gefunden werden konnte, obwohl ich es im gleichen Ordner habe wie meine Index und CSS Datei. Wisst ihr einen Rat? Danke im Voraus.

hier der Css Code:

.header{

min-height: 100vh;

width: 100%;

background-image: /*linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),*/ url(Website4/Dateien/Bilder/12.png);

background-position: center;

background-size: cover;

position: relative;

overflow: hidden;

}

...zur Frage

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?

...zur Frage

CSS background gif UND background color?

Halloo, Eine Frage zu CSS, wie man im Titel schon erkennen kann :)

Undzwar habe ich folgendes Programm geschrieben:

html, body {
 margin: 0;
 padding: 0;
}

.hintergrund {
 background: url(bla.gif) no-repeat center center;
 background-size: cover;
 height: 350px;
 text-align: center;
}

So, mein Wunsch wäre es unter dem Gif noch die Hintergrundfarbe zu ändern.. Weiß jmd wie das funktioniert?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen