JPG Image Integration Examples

This page demonstrates different methods to add JPG images to your website.

Method 1: Direct HTML IMG Tags

The most common way to add JPG images:

Support Team

Support Team

IT Services

IT Services

Network Setup

Network Setup

<img src="images/your-image.jpg" alt="Description" style="width: 300px; height: 200px; object-fit: cover;">

Method 2: CSS Background Images

Perfect for hero sections and card backgrounds:

Hero Section with JPG Background

This uses hp-hero.jpg as background

Canon Printers

HP Printers

IT Services

.hero {
  background-image: url('images/hero-background.jpg');
  background-size: cover;
  background-position: center;
}

Method 3: Responsive Image Grid

Images that adapt to different screen sizes:

HP Support

HP Printer Support

Canon Support

Canon Printer Support

Support Team

Professional Team

.responsive-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

Method 4: Scrollable Image Gallery

Horizontal scrolling gallery of JPG images:

HP Printer 1

HP LaserJet

Canon Printer 1

Canon PIXMA

Support Team

Expert Team

IT Services

IT Solutions

Network Setup

Network Config

.image-gallery {
  display: flex;
  gap: 15px;
  overflow-x: auto;
}

How to Add Your Own JPG Images

  1. Save JPG files to the images/ folder
  2. Name them descriptively:
    • hp-printer-setup.jpg
    • support-team-photo.jpg
    • office-environment.jpg
  3. Reference in HTML: <img src="images/your-image.jpg" alt="Description">
  4. Or use as CSS background: background-image: url('images/your-image.jpg');

Recommended JPG Images for Your Site: