How To Insert A Picture Into A Header

Table of contents:

How To Insert A Picture Into A Header
How To Insert A Picture Into A Header

Video: How To Insert A Picture Into A Header

Video: How To Insert A Picture Into A Header
Video: Insert Picture in Header in Word | Logo in Header (1 MINUTE | 2020) 2024, May
Anonim

Often, with similar functionality, a picture in the header of a site or blog gives the necessary individuality, and the proposed templates, on the other hand, are often simply "faceless". It is convenient to put a company logo, or a picture with a geographic location, or certain photos that are important for the site owner in the picture, at the very top.

A piece of code leading to the link to the picture in the header of the site
A piece of code leading to the link to the picture in the header of the site

Necessary

Skills of working in a graphics editor

Instructions

Step 1

If you have a site manager, it usually includes the "change picture" function. In this case, you just have to substitute your own.

Analyze your content management system carefully. If you do not have the required function, you will have to get into the html code. If you work with Joomla, look for the file: mw_joomla_logo.png, it lies in the images folder in the template folder (Joomla emplates template_name imagesmw_joomla_logo.png) To change the picture: in html html site code ("view"> "view html code").

Find the "head" highlighted with head tags

Find a picture by looking at the img tags in the title

The link to the picture looks like: img src = "picture.jpg"

Step 2

Download and analyze the size and weight of the picture.

In a graphics editor, draw your own picture of the same parameters

Upload the image to the server, place it in the same directory where all the images of the site are (either in a simple network, or in an album of images, the main thing is that the storage is long-term)

Step 3

Open the site code again.

Substitute the address of your picture instead of the one that is there now.

As a safety net, you can set the exact size of the picture and invisible borders as follows:

img src = "image address / picture.jpg" alt="Explanation of the picture"

Tags meaning:

img = image - image.

src = source - source, that is, address

border = borders. If you play with this value, a border (stroke) will appear around the picture.

alt = alternate - text that will be substituted in place of images if they are turned off from view (to save traffic, for example). This text, being invisible, is still read by search engines and can serve as a good tool for promoting your site. Save the code with a new image.

Clear the cache if necessary. Perhaps the old image is still loaded into it, and it does not display your site correctly.

Recommended: