• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Inserting Image Banner

New Here ,
Jun 13, 2019 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.

Views

786

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
community guidelines

correct answers 1 Correct answer

Community Expert , Jun 13, 2019 Jun 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">

<!--G

...

Votes

Translate

Translate
LEGEND ,
Jun 13, 2019 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.

Votes

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
community guidelines
New Here ,
Jun 13, 2019 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.

Votes

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
community guidelines
Community Expert ,
Jun 13, 2019 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
New Here ,
Jun 13, 2019 Jun 13, 2019

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
Jun 13, 2019 Jun 13, 2019

Copy link to clipboard

Copied

LATEST

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Expert ,
Jun 13, 2019 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines