Highlighted

Inserting Image Banner

New Here ,
Jun 13, 2019

Copy link to clipboard

Copied

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

Annotation 2019-06-13 112753.jpgThis is where I want to add it to.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

TOPICS
Learn Dreamweaver

Views

528

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Inserting Image Banner

New Here ,
Jun 13, 2019

Copy link to clipboard

Copied

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

Annotation 2019-06-13 112753.jpgThis is where I want to add it to.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

TOPICS
Learn Dreamweaver

Views

529

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 13, 2019 0
LEGEND ,
Jun 13, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 13, 2019 0
New Here ,
Jun 13, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 13, 2019 0
Adobe Community Professional ,
Jun 13, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 13, 2019 2
New Here ,
Jun 13, 2019

Copy link to clipboard

Copied

So you're saying there is no way to add a background image?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 13, 2019 0
Adobe Community Professional ,
Jun 13, 2019

Copy link to clipboard

Copied

No I'm not saying you cannot use a background-image.  I'm saying  a background-image used this way is not ideal for lots of reasons.   Real text is better.  To understand why, read the Google SEO Starter Guide.  It's best you learn about this now than after it's too late.

Search Engine Optimization (SEO) Starter Guide - Search Console Help

header {

margin: 0;

padding: 1%;

background: navy url("https://placeimg.com/1200/200/nature") no-repeat;

color: white;

}

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 13, 2019 2
Adobe Community Professional ,
Jun 13, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 13, 2019 1