What is the best method for placing text over an image in Dreamweaver?

What steps should I take to overlay text on an image using Dreamweaver? Similar to the example linked below: https://i.stack.imgur.com/8GvkW.png

Below is a snippet of my code:

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;
}
htmlcssimagedreamweaver

Answer №1

To utilize your image as a background in your CSS, follow these steps:

Start by putting your text inside the <header> tag and eliminating the image, like this:

<header>
    <h1>Discovering</h1>
    <h2>Beautiful Destinations</h2>
</header>

Next, in your CSS, include the header image as a background:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the height of the HTML overlay to span the entire visible page

I have a website that utilizes AJAX to load content dynamically. To enhance user experience, I implemented an overlay with a loading indicator during the loading process using jQuery and the jQuery BlockUI plugin. When invoking $(element).block(), everyth ...

htmlcssdomjquery-ui

Create a server directory structure that populates multiple HTML dropdown lists using either jQuery or AJAX

As a novice navigating jQuery and Ajax, I find myself faced with a specific challenge. My current situation involves a structured set of directories on a server. My goal is to populate a dropdown dynamically with this file hierarchy. Upon click ...

javascriptphpjqueryhtmlajax

"Border-radius becomes less prominent on pointer interaction in Chrome and Safari due to WebKit's behavior

Having an issue with a list inside a div. The problem arises when there is a div containing a list, which limits the visibility of items for users. If the limit is exceeded, a scroll bar appears inside the div to allow users to see more items. Additionally ...

google-chromesafariwebkitcss

Instructions on deactivating the background when the sidebar is displayed and closing the sidebar by clicking anywhere other than the sidebar

I'm in the process of creating a sidebar for my website. When the sidebar is displayed (by clicking showRight), I want to disable the background content so that the user can't interact with anything outside of the menu. If the user clicks on th ...

javascriptjquerycsssidebar

Restoring text boxes to their original styling

I've been working on a jQuery script that scans through form input elements and turns their border color to red if they are empty. When the submit button is pressed, it reassesses the elements; this time I'm trying to revert the textbox back to i ...

jqueryhtmlcss

Creating a dynamic nested list in HTML using JavaScript with data retrieved from a JSON source

I'm trying to generate a dynamic nested ul\li list from a JSON array. IMPORTANT! While I can use jQuery for this transformation, it's in a node.js environment where DOM access is restricted and I must work with a string. The depth of the a ...

javascripthtmlarraysjsonnode.js

Ensuring the accuracy of user input in JavaScript, even after fixing a mistake and submitting again, will not cause the code to exit the else clause

I am currently working on a coupon code field that needs to accept a specific set of coupon keys. Below is the code I have written for validation. If a user enters an invalid key at first, they receive an alert saying "Invalid Key." However, if they corr ...

javascriptjqueryhtmlarraysloops

Having trouble getting items to align properly in Bootstrap

As a student, I am struggling with my development skills while attempting to create a personal website. I am encountering difficulty aligning items on my rows in bootstrap. Here is what I am trying to accomplish: 1. However, I am currently stuck at this po ...

htmlcsstwitter-bootstrap

Removing specific text from a textarea containing a vast quantity of information

I developed a simple XML formatter using HTML and Javascript. I am looking to incorporate a delete feature into it. Essentially, I want the ability to remove an entry without affecting any other data. <contact <!--Jane Smith--> first_name="Jane" ...

javascripthtml

Remove the most recent row that was dynamically inserted into an HTML table

Currently, I am in the process of developing an ASP.NET Web Api 2.2 application using .NET Framework 4.5, C#, and jQuery. Within one of my views, I have set up the following table: <table id ="batchTable" class="order-list"> <thead> ...

javascriptjqueryhtmlasp.netrazor

Is there a way to have incoming messages automatically align to the left or right based on the sender, without using the float property?

I am currently working on a webpage where I want the messages sent by different users to appear in a yellow conversation window based on who sent them - user 1 or user 2. I want it to mimic the messaging layout commonly seen on phones, distinguishing betwe ...

javascripthtmlcss

Tips on incorporating Angular ng-include

As a newcomer to AngularJS on an Express Framework, I am facing an issue with loading HTML pages as includes. Although my routing in Angular is set up correctly and functioning well, when I try to use ng-include in my HTML pages, it results in a loop and t ...

javascriptjqueryhtmlangularjsinclude

Get rid of the border when the display property is changed to none

I am facing a challenge with removing a border when the display property is set to none, despite it being a seemingly simple task. My understanding has always been that setting the display property to none removes an element from the HTML flow. However, i ...

htmlcssborderdisplay

What steps can I take to address a 500 internal server error when attempting to execute a Python script within a CGI file?

Looking to execute a python script on a Strato-hosted website (.nl) using a CGI file. The setup includes my code: a cgi file, python file, and dependencies file for adding something to the PATH. Check out the files here. Here's what the folders look ...

pythonhtmlflaskcgicgi-bin

What is the best way to interpret numerous rows of Form elements simultaneously?

What is the most efficient way to name form elements across rows for easy conversion into JSON format? Considering HTML does not have built-in Array support, what alternative method should be used? In each row, there are 2 text fields and 1 select dropdow ...

javascriptjqueryhtmljson

IE 9 isn't displaying the Dropdown CSS Navigation

Welcome to my test page. Click here to view the test page. I recently found out that this page is not displaying correctly on Internet Explorer 9. Since I don't have IE 9, I'm using Net Renderer to preview my test page. Below you will find my ...

htmlcssdrop-down-menunavigationinternet-explorer-9

Creating a Canvas Viewport Tailored for Multiplayer Gaming

Lately, I've been playing around with the HTML5 Canvas while working on an io game. However, I've hit a roadblock when it comes to handling the viewport. Setting up the viewport itself isn't too complicated, but accurately displaying other p ...

javascripthtmlcanvasviewport

Having trouble retrieving alert message after submitting form using jquery

Trying to submit a form using jQuery, but when clicking on the submit button it displays a blank page. I understand that a blank page typically means the form has been submitted, but I want to show an alert() for testing purposes instead. However, it only ...

javascriptjqueryhtmlforms

Python Selenium returning 'None' when attempting to retrieve the source attribute of an image

Having trouble retrieving the src of images in the class "KfFlO" using selenium. Whenever I try to print for the source, Python keeps returning "none." Can anyone help me identify the problem? Below is my code snippet: from selenium import webdriver from s ...

pythonhtmlimageselenium-webdriverweb-scraping

Displaying a div upon hovering over another div is resulting in numerous server requests and a flickering effect

I am attempting to create a hover effect where one div floats next to another. The layout of the divs is like a grid, placed side by side. Check out my code on this fiddle. Using plain JavaScript, I want to display a second div (div2) floating next to div ...

javascripthtmlcss