Wie erhalte ich Text, der in Dreamweaver über einem Bild eingeblendet wird?

-1

Wie würde ich Text in Dreamweaver überlagern? Wie das verknüpfte Bild unten: http://i.stack.imgur.com/8GvkW.png Wie erhalte ich Text, der in Dreamweaver über einem Bild eingeblendet wird?

Hier ist, was wie mein Code aussieht:

HTML

<body> 
<main> 
<header> 
<img src="images/headerimage.jpg" alt="" height="500" width="1280"> 
</header> 
<h1>Hidden Gems of</h1> 
<h2>Canada</h2> 
</main> 
</body>

CSS

body{ 
    margin:0; 
    } 
main{ 
    width: 1280px; 
    margin: 0 auto; 
    background-color: #FFF; 
    } 
header{ 
    height: 500px; 
    background-color: #FF751F; 
    margin-top: 23px; 
    } 
h1{ 
    font-family: "Ailerons"; 
    font-size: 83px; 
    font-weight:lighter; 
    text-shadow: 7px 7px 15px #000; 
    color: #FFF; 
    float: left; 
    margin-top: -300px; 
    margin-left: 314px; 
    } 
h2{ 
    font-family: "SkolaSans"; 
    font-size: 44px; 
    font-weight:100; 
    text-shadow: 7px 7px 10px #000; 
    color: #FFF; 
    float: left; 
    margin-top: -200px; 
    margin-left: 536px; 
    padding-top: 15px; 
    }

Quelle

2016-03-21 navyhouses

Sie wollen zu s und dein Bild als Hintergrundbild in deinem CSS.

setzen Sie zuerst Ihren Text innerhalb des <header>-Tag und das Bild entfernen, etwa so:

<header> 
    <h1>Hidden Gems of</h1> 
    <h2>Canada</h2> 
</header>

Dann in Ihrem CSS die Header-Bild als Hintergrund hinzufügen:

header{ 
    width: 1280px; 
    height: 500px; 
    background:url('images/headerimage.jpg') no-repeat center; 
    /* 'no-repeat' stops the image tiling inside its container, and 'center' will position the image in the middle of its containing div */ 
    margin-top: 23px; 
}

Quelle

2016-03-21 01:25:54 dave

dass Ausprobiert und leider es hat nicht funktioniert. Als ich es in meinem Browser sah, gab es kein Bild oder Text. – navyhouses

Ist Ihre CSS-Datei im selben Ordner wie Ihr HTML? Der Pfad ist relativ, wenn Sie also einen CSS-Ordner haben, muss die URL möglicherweise '' ../ images/headerimage.jpg'' sein. – dave

Das hat das Problem behoben !! Vielen Dank für Ihre Hilfe. – navyhouses

Wie erhalte ich Text, der in Dreamweaver über einem Bild eingeblendet wird?

Antwort

Verwandte Themen