Skip to main content
M
michaelj70767115
Participant
June 13, 2019
Answered

Inserting Image Banner

  • June 13, 2019
  • 2 replies
  • 1103 views

I want to add an image to my heading at the top of the home page, but how do I do that? Please help.

This is where I want to add it to.

This topic has been closed for replies.
Correct answer Nancy OShea

You should use real text for search engines, language translators and screen readers.  Images of text especially in the background cannot be indexed.  Feel free to use a Google or Typekit web font to dress it up a little. 

Here's a working example of a Goggle web font styled with CSS.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Example Header</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Google Web Font-->

<link href="https://fonts.googleapis.com/css?family=Bungee+Shade&display=swap" rel="stylesheet">

<style>

body { margin: 0;}

header {

margin: 0;

padding: 1%;

background: navy;

color: white;

}

header h1 {

text-align: center;

border: 4px double white;

border-left:none;

border-right:none;

font-family: 'Bungee Shade', cursive;

line-height:1.5;

}

</style>

</head>

<body>

<header>

<h1>My Awesome Website</h1>

</header>

</body>

</html>

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
June 13, 2019

The generic way to add an image in DW is to go to Insert > Image or Ctrl + Alt + i.

Choose an image from your site folder and hit OK.

For more specific instructions, we would need to see your code.

Nancy O'Shea— Product User & Community Expert
Brad Lawryk
Brad Lawryk
Legend
June 13, 2019

Not sure of what you are having a problem with? Just add it like you would any other image on your site. Maybe elaborate a bit more on where you are stuck.

M
michaelj70767115Author
Participant
June 13, 2019

Adding a background image to the heading of the page. Instead of using color, use an image. I want to add a background image to that heading I shared.

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
June 13, 2019

You should use real text for search engines, language translators and screen readers.  Images of text especially in the background cannot be indexed.  Feel free to use a Google or Typekit web font to dress it up a little. 

Here's a working example of a Goggle web font styled with CSS.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Example Header</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Google Web Font-->

<link href="https://fonts.googleapis.com/css?family=Bungee+Shade&display=swap" rel="stylesheet">

<style>

body { margin: 0;}

header {

margin: 0;

padding: 1%;

background: navy;

color: white;

}

header h1 {

text-align: center;

border: 4px double white;

border-left:none;

border-right:none;

font-family: 'Bungee Shade', cursive;

line-height:1.5;

}

</style>

</head>

<body>

<header>

<h1>My Awesome Website</h1>

</header>

</body>

</html>

Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices