Using Image as Button or Link

Using Image as Button, Link, & Background

Previously we have seen, Inserting an Image in the Webpage. Now we are going to learn about Using an Image as a link or button and setting the Image as a background. So let's get started...

In HTML, the images can also be used as links. Image links are constructed by embedding a <img> tag inside of an anchor element <a>.

In HTML image links require opening and closing anchor tags with a valid source path of the image. The syntax is as follows :

<a href="Link_path"><img src="Image_Source_Path"></a>

The same logic applied to "Using Image as Button". The syntax is as follows :

<button type="button" ><img src="Image_Path"></button>

For Example,

Consider Two web pages, that are created with the names "First_Page.html" and "Second_Page.html". The first page is linked with the second page by implementing an image as a link. By clicking on the image link created on the first page, the second page will appear.

Using Image as a Button

Example :

<!DOCTYPE html>
<html>
    <head>
        <title>Image as Button</title>
    </head>
    <body>
        <h3>Using Image as The "Button"</h3>
        <button type="button" ><img src="https://bit.ly/3IhGZFG"></button>
    </body>
</html>

Output :

Using Image as a Link

Example :

First_Page.html

<!DOCTYPE html>
<html>
    <head>
        <title> Image as The Link - First Page </title>
    </head>
    <body>
        <h3> Using Image as The Link </h3>
        <p>First Page</p>
        <a href="https://rb.gy/pxycpf" target="_blank"><img src="https://bit.ly/3IhGZFG"></a>
    </body>
</html>

Second_Page.html

<!DOCTYPE html>
<html>
    <head>
        <title> Second Page </title>
    </head>
    <body>
        <h1>My Second Page</h1>
        <p>Welcome to world of Hyperlinking..!!!</p>
    </body>
</html>

Output :

Setting Image as the Web-page Background

In HTML, the Background Image of the web page is used to make the web page attractive. In HTML, the Background attribute is used to set the background of web pages to make them attractive.

To set an image in the background of a web page, a valid source of the image is required. The syntax is as follows :

<body background="Valid Source Path of Image">

Image as the Web-page Background

Example :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> Setting Image as The Background </title>
    </head>
    <body background="https://bit.ly/3K5uBtx">
        <br>
        <h2> Look at The Web-page Background</h2>
    </body>
</html>

Output :

So, now it's time to end the session. See you guys Next Time, stay tuned for further updates on HTML Programming Languages...!!!

Our website will definitely help you to improve your Programming Skills and Knowledge.

Thanks for Visiting...!!!

Also Visit

Tags:

html

Posted by: Mr. Rohan Kumar Bhoi

Hello Everyone, Currently, I’m working as the Founder and CEO of Computer Tips Tricks.tech I have an approach to making our generation more intelligent in IT Field. To make it possible, me and my team are working on this website daily. We have to develop our generation and be self-dependent. " Do something different than others, be professional, and Develop yourself ! "

Latest posts

Using Image as Button or Link | Set Image as The Webpage Background

Using Image as Button, Link, & Background