May 042015
 

Last Updated: June 18, 2016

KompoZer Insert Header Image shows you how to insert a header image to the header.

Latest News: I have added a new link to the menu.

In this lesson you will learn how to insert a header image to the header and add the correct image path whether it be relative or static.

KompoZer Insert Header Image Steps

Step 1 ) The following image shows you where you need to click with your left mouse to select <div#header> tag as shown in arrow 2 below.

Note: Make sure you click inside the div tag as shown in arrow 1 below.

kompozer-insert-header-image

Step 2 ) Click on Insert -> Image to search for the image you want to insert. See image below.

kompozer-select-insert-menu

Step 3 ) The following image Image Properties -> Location allows you to set up the following options.

  • Image Location = Click on the folder to browse for the image location or you can type the URL path i.e. http://yourwebsite.com/images/imagename.jpg
  • URL is relative to page location. In this example the relative path is images/kompozer-header-mbrsolution.jpg (This option is optional. For this example I selected URL is relative….) I don’t encourage relative path. It is always best to select a static path.
  • Tooltip
  • Alternative text = For this example I added an alternative text KompoZer Header Image
  • Don’t use alternative text
  • Image Preview = Notice the image size 990 x 202
  • Advanced Edit
  • Click on OK when you finish adding your image

kompozer-image-selected

Step 3-1 ) The following image shows you the path added when you don’t select URL is relative to page location. The following path is added file///E:/….. because this was added from a local laptop. If you were working from a server then you might choose a static path http://yourwebsite.com/images/imagename.jpg. (Note: Your path will be different.)

kompozer-url-not-relative

Step 4 ) The following image shows you the header image added.

Note: The image is sitting nicely in between all the div tags. Remember to resize the images to fit in nicely.

kompozer-image-added

Click on the following URL Borders Tutorial to continue.

Go Back To KompoZer Tutorial List:

I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.

  2 Responses to “KompoZer Insert Header Image”

  1. bookmarked!!, I really like your website!

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept
Reject
Privacy Policy