HTML Links and CSS Background Images Explained for Beginners with Real Code Examples

CodeEasy May 10, 2025

In our previous post, we explored how to use the <img> tag and image maps to create clickable images in HTML, adding interactivity and engagement to your web pages.

Now, we’re stepping up your web design skills by learning how to add background images in HTML and CSS and design internal and external links for smooth user experience.
We’ll also cover essential HTML text formatting tags to make your content more readable and visually appealing in our coming posts. These are must-know basics for every beginner learning HTML and CSS for web development. Let’s begin!

What is background image in HTML.

A background image is actually a property of css, which allows to set an image as background at an HTML element, such as <div>, <p>, or even the entire body of the page. This technique is widely used to enhance the visual appeal of websites.

Applying Background Images to Elements.

To add a background image to a specific element, we use the background-image property in your CSS:

Example :


.element {

  background-image: url('your-image.jpg');

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

}

Explanation of Properties:

  • background-image: Specifies the path to the image you want to use.
  • background-repeat: Determines the if/how the background image repeats. no-repeat ensures the image does not repeat itself to fill the entire background of an element.
  • background-size: Defines the size of the background image. cover scales the image to cover the entire container.
  • background-position: Sets the starting position of a background image. center centers the image within the element.

Setting a Full-Page Background Image.

Example :


body {

  margin: 0;

  padding: 0;

  height: 100vh;

  background-image: url('your-          background.jpg');

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

}

Key Points:

  • height: 100vh;: Ensures the body takes up the full viewport height.
  • background-size: cover;: Scales the image to cover the entire viewport, maintaining aspect ratio.
  • background-position: center;: Centers the image both vertically and horizontally.

This approach ensures your background image covers the entire page without distortion.

Understanding background-repeat

The background-image property decides how the background image will repeat.

  • repeat: Repeats background image both vertically and horizontally.
  • repeat-x: Repeats background image horizontally.
  • repeat-y: Repeats background image vertically.
  • no-repeat: Stops background image to repeat.

Example :


.element {

  background-image: url('pattern.png');

  background-repeat: repeat-x;

}

This will repeat the image horizontally across the element.

Note:

If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element.

To avoid the background image from repeating itself, set the background-repeat property to no-repeat.

How Images Look Under Different repeat Values:

repeat-x

no-repeat

cover

stretch

default

⭐ Bonus Tips

Use cover instead of stretching your background images, for a cleaner, more professional background image.

  • cover keeps the image’s natural proportions while filling the space, giving your site a cleaner, more professional look.
  • stretch (or 100% 100%) can make images look squished or stretched unnaturally. Stretched images often appear distorted and unpolished.

Exploring background-size Options

The background size property decides the size of the background image.

  • auto: Displays the background image at its original size.
  • cover: Scales the background image to cover the entire container, maintaining aspect ratio.
  • contain: Scales the background to be fully visible within the container, maintaining aspect ratio.
  • Specific values (e.g., 100% 100%): Stretches the image to fit the container completely. This may distort the image.

Example :


.element {

  background-image: url('image.jpg');

  background-size: contain;

}

This will scales the image to ensure the entire image is visible within the element.

Positioning with background-position

The background-position property sets the starting position of the background image.

  • left top: Starts the image from top-left corner.
  • center center: Sets the image at center both vertically and horizontally.
  • right bottom: Ends the image at bottom-right corner.

Example :


.element {

  background-image: url('image.jpg');

  background-position: right bottom;

}

This position the image at the bottom-right corner of the element.

Css Background-Position Demo with Your Photo

Top Left

Bottom Right

Center

⭐ Bonus Tips

Combine background-position with background-repeat: no-repeat to place a background image exactly where you need it, such as top right or center, ensuring it displays only once.
This technique is ideal for adding icons, logos, or decorative visuals without repetition, keeping your layout clean.

HTML Links: Create Clickable Text, Buttons, Images and Email Links Easily

HTML links, or hyperlinks, are one of the core building blocks of the web. They allow users to jump between pages, open documents, send emails, and more. Understanding how to use links effectively is essential for creating user-friendly and SEO-optimized websites.

What HTML Links Do

HTML links make content clickable. When a user clicks a link, it navigates to:

  • A different web page
  • A section within the same page
  • A file (like a PDF)
  • An email application
  • A new browser tab or window

HTML Link Syntax

Example :

  
    
<a href="URL" target="_value">Link Text</a>

Explanation:

  • <a> – Anchor tag that defines a hyperlink
  • href – Specifies the destination URL
  • – Optional; controls where the link opens
  • Link Text – The clickable text users see

href Attribute

The href (Hypertext REFerence) tells the browser where the link should go.

Example :


<a href="https://example.com">Visit Example</a>

Types of URLs:

  • Absolute URL: Full address (https://example.com)
  • Relative URL: Internal file (/about.html)

More On Absolute URL

1. file.html

Means: File is in the same folder as the current HTML page.

/website/
├── index.html   ← current page
└── file.html    ← linked file

Example :


<a href="file.html">Open File</a>

2. /file.html

Means: File is in the root directory of the website.

/website/          ← root directory
├── file.html      ← linked file
└── folder/
    └── page.html  ← current page

Example :


<a href="/file.html">Open Root File</a>

3. /folder/file.html

Means: Look in folder located in the root directory.

/website/          ← root directory
├── folder/
│   └── file.html  ← linked file
└── index.html     ← current page

Example :


<a href="/folder/file.html">Open File in Root Folder</a>>

4. folder/file.html

Means: Look in a folder next to the current file (same directory).

/website/
├── index.html     ← current page
└── folder/
    └── file.html  ← linked file

Example :


<a href="folder/file.html">Open File in Local Folder</a>

What Is a Directory and Root Directory?

  • Directory = A folder on your website that holds files (like images, HTML pages, etc.).
    Example: images/, blog/, or css/.
  • Root Directory = Main folder (mother of all folders)
    All other folders (subdirectories) live inside it.

🎯 target Attribute

Controls how the link opens:

  • _self: Opens the link in the same tab or window (default behavior).
  • _blank: Opens the link in a new tab or window.
  • _parent: Opens the link in the parent frame.
  • _top: Opens the link in the full body of the window.

Example :

    
<a href="https://example.com" target="_blank">Open in New Tab</a>
Note:

By default, links will appear in all browsers as:

  • Unvisited link = underlined and blue.
  • Visited link = underlined and purple.
  • Active link = underlined and red.

🔗 Types of HTML Links

1. Text Link

The most common type, where clickable text directs users to another page.

Example :

  

<a
href="https://google.com">Visit Google</a>

2. Image Link

An image can function as a hyperlink by nesting the <img> tag within an <a> tag.

Example :


<a href="https://example.com">

<img src="banner.jpg" alt="Click to   visit">

</a>

3. Link as a Button

You can style a link as a button using css.

HTML:


<a href="https://example.com" class="btn">Click Me</a>

CSS:


.btn {

  background: #007BFF;

  color: white;

  padding: 10px 15px;

  text-decoration: none;

  border-radius: 5px;

}

Example :

Try It

Visit Example

Hey, no worries if the CSS properties above seem a bit confusing right now!
We’ll explore each of them step by step later on.
For now, just know that yes — you can create cool stuff like this with a little CSS magic. Exciting, right?

4. Email Link

Using mailto: inside the href attribute, you can create a link that opens the user's email program.

Example :


<a href="mailto:info@example.com">Send us an Email</a>

⭐ Bonus Tips

  • Use title attribute for better accessibility:

Example :


<a href="https://example.com" title="Go to Example Site">Visit</a>
  • Combine links with icons (Font Awesome or SVG) to improve UX.

Project: My Little Web World

Create a small website with two pages:
1. Your Personal Page (you already made this!)
2. A New Page with a Background Image.
3. Connect both pages by adding a link to your personal page. You are free to choose a text link, image link, or button link for your link.

I truly enjoyed creating this section where we explored background images and links. I hope you enjoyed it too!
Great job on completing the previous project! Keep practicing and experimenting with what you’ve learned, and I’ll see you in the next post!

Happy Coding!

CodeEasy

Posted by CodeEasy

Post a Comment

0 Comments