Browser Support
Flex Direction
Flex Wrap
Flex
Flex Basis
Menu

Tailwind CSS Object Position

Object Position in CSS allows developers to control how replaced elements (such as images or iframes) are displayed within their containing boxes.

Tailwind CSS offers a comprehensive set of utility classes to help you manage Object Position. These utilities provide enormous flexibility when you need precise control over the alignment or focal point of any replaced element on your screen.

ClassPropertiesExample
object-bottomobject-position: bottom;<div className="object-bottom"></div>
object-centerobject-position: center;<div className="object-center"></div>
object-leftobject-position: left;<div className="object-left"></div>
object-left-bottomobject-position: left bottom;<div className="object-left-bottom"></div>
object-left-topobject-position: left top;<div className="object-left-top"></div>
object-rightobject-position: right;<div className="object-right"></div>
object-right-bottomobject-position: right bottom;<div className="object-right-bottom"></div>
object-right-topobject-position: right top;<div className="object-right-top"></div>
object-topobject-position: top;<div className="object-top"></div>

Overview of Object Position

Adding the Object Position

In Tailwind, you can apply classes like object-bottom, object-center, object-right, etc., directly to your elements to set the position of the replaced elements. Because these are simple classes, it is straightforward to add them or remove them conditionally to achieve various visual effects when building user interfaces.

This is a live editor. Play around with it!
export default function CenteredCoverImage() {
  return (
    <div className="grid grid-cols-3 h-screen w-screen bg-gray-100">
      <img
        className="object-none object-bottom h-28 w-28"
        src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200"
      />
      <img
        className="object-none object-center h-28 w-28"
        src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200"
      />
      <img
        className="object-none object-left h-28 w-28"
        src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200"
      />
      <img
        className="object-none object-left-bottom h-28 w-28"
        src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200"
      />
      <img
        className="object-none object-left-top h-28 w-28"
        src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200"
      />
      <img
        className="object-none object-right h-28 w-28"
        src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200"
      />
      <img
        className="object-none object-right-bottom h-28 w-28"
        src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200"
      />
      <img
        className="object-none object-right-top h-28 w-28"
        src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200"
      />
      <img
        className="object-none object-top h-28 w-28"
        src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200"
      />
    </div>
  );
}

States and Responsiveness

Tailwind also provides various state and responsive modifiers to help your apply the object-position utilities based on specific states and breakpoints.

Hover and Focus States

State-based modifications allow you to alter properties of elements when users hover or tab into them. Pairing these with Object Position utilities can create compelling visual transitions, such as shifting the focal point on hover to highlight a specific part of an image.

This is a live editor. Play around with it!
export default function HoverShiftImage() {
  return (
    <div className="relative h-screen w-screen bg-gray-100">
      <img
        className="
          h-full
          w-full
          object-cover
          object-left       
          hover:object-center
          transition-all
          duration-300
          ease-in-out
        "
        src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
        alt="Hover shift illustration"
      />
      {/* On hover, the object-position transitions from left to center. */}
    </div>
  );
}

Breakpoint Modifiers

Responsive layouts are essential in modern web development. Tailwind eases the pain of writing media queries by associating breakpoints with modifiers. This concept applies seamlessly to Object Position utility classes as well. For instance, using sm:object-left, md:object-center, or lg:object-right allows you to align replaced elements differently at various screen sizes.

This is a live editor. Play around with it!
export default function ResponsiveObjectPosition() {
  return (
    <div className="relative h-screen w-screen bg-blue-100">
      <img
        className="
          h-full
          w-full
          object-cover
          sm:object-left-top    /* object-position: left top for small screens */
          md:object-center      /* object-position: center center for medium screens */
          lg:object-right-bottom/* object-position: right bottom for large screens */
          transition-all
          duration-500
          ease-in-out
        "
        src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
        alt="Responsive layout"
      />
      {/* This image repositions itself at different breakpoints, 
          creating a dynamically evolving layout. */}
    </div>
  );
}

Custom Object Position

While the built-in object-position utilities in Tailwind CSS often suffice for typical layouts, there are times you will need precise positioning. Tailwind provides two ways for customizing these classes. You can either extend the theme in your tailwind.config.js file or directly use arbitrary values.

Extending the Theme

Theme extensions allow you to add your own naming conventions and values for Object Position. This is particularly useful if you have repeated custom offsets in your designs or if you want to standardize unique positions across multiple components or projects. When you add custom entries to your Tailwind configuration, they become part of the available utility classes.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function CustomFocusPoint() {
  return (
    <div className="relative h-screen w-screen bg-gray-50">
      <img
        className="
          h-full
          w-full
          object-cover 
          object-focus-point   /* Custom class from theme extension */
        "
        src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
        alt="Focus Point"
      />
      {/* Our custom position or 'focus point' 
          is placed at 25% on the x-axis and 75% on the y-axis. */}
    </div>
  );
}

Using Arbitrary Values

Arbitrary values in Tailwind let you define custom property values on the fly. Perhaps you have a one-off design scenario that does not justify adding a new value to your theme, or you need a very specific alignment that is not used anywhere else. In these cases, you can take advantage of square bracket notation to specify your desired Object Position.

This is a live editor. Play around with it!
export default function ArbitraryValuePosition() {
  return (
    <div className="relative h-screen w-screen bg-gray-300">
      <img
        className="
          h-full
          w-full
          object-cover
          object-[90%_50%]
        "
        src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
        alt="Arbitrary Position"
      />
      {/* Here, the image focuses more on its right side, 
          centering vertically at the 50% mark. */}
    </div>
  );
}

Real World Examples

Featured Recipe Banners

A dynamic recipe banner that showcases food photography with different object positions based on the recipe's visual focal point.

This is a live editor. Play around with it!
const RecipeBanner = () => {
  const recipes = [
    {
      title: "Mediterranean Salmon Bowl",
      category: "Seafood",
      cookTime: "25 mins",
      difficulty: "Medium",
      src: "https://images.unsplash.com/photo-1467003909585-2f8a72700288",
      alt: "Mediterranean Salmon Bowl",
      position: "object-left-bottom"
    },
    {
      title: "Vegan Buddha Bowl",
      category: "Vegan",
      cookTime: "20 mins",
      difficulty: "Easy",
      src: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd",
      alt: "Vegan Buddha Bowl",
      position: "object-left-top"
    },
    {
      title: "Spicy Ramen",
      category: "Asian",
      cookTime: "30 mins",
      difficulty: "Medium",
      src: "https://images.unsplash.com/photo-1569718212165-3a8278d5f624",
      alt: "Spicy Ramen",
      position: "object-left-bottom"
    },
    {
      title: "Classic Margherita Pizza",
      category: "Italian",
      cookTime: "35 mins",
      difficulty: "Medium",
      src: "https://images.unsplash.com/photo-1604382355076-af4b0eb60143",
      alt: "Classic Margherita Pizza",
      position: "object-right-bottom"
    },
    {
      title: "Grilled Steak",
      category: "Meat",
      cookTime: "40 mins",
      difficulty: "Hard",
      src: "https://images.unsplash.com/photo-1558030006-450675393462",
      alt: "Grilled Steak",
      position: "object-bottom"
    }
  ];

  return (
    <div className="w-full p-4 bg-gray-100">
      <div className="flex flex-col gap-4">
        {recipes.map((recipe, index) => (
          <div key={index} className="relative bg-white rounded-lg shadow-lg overflow-hidden">
            <div className="h-40 md:h-56">
              <img
                src={recipe.src}
                alt={recipe.alt}
                className={`w-full h-full object-cover ${recipe.position}`}
              />
            </div>
            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
              <h3 className="text-white font-bold text-xl mb-1">{recipe.title}</h3>
              <div className="flex flex-wrap gap-2">
                <span className="text-white/90 text-sm bg-black/30 px-2 py-1 rounded">
                  {recipe.category}
                </span>
                <span className="text-white/90 text-sm bg-black/30 px-2 py-1 rounded">
                  {recipe.cookTime}
                </span>
                <span className="text-white/90 text-sm bg-black/30 px-2 py-1 rounded">
                  {recipe.difficulty}
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default RecipeBanner;

Team Member Profile Cards

A team member profiles section with differently positioned headshots.

This is a live editor. Play around with it!
const TeamGrid = () => {
  const data = {
    teamMembers: [
      {
        name: "Sarah Chen",
        role: "CEO",
        src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
        alt: "Sarah Chen profile photo",
        position: "object-top"
      },
      {
        name: "Michael Rodriguez",
        role: "CTO",
        src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
        alt: "Michael Rodriguez profile photo",
        position: "object-center"
      },
      {
        name: "Emma Thompson",
        role: "Design Director",
        src: "https://images.unsplash.com/photo-1580489944761-15a19d654956",
        alt: "Emma Thompson profile photo",
        position: "object-left-top"
      },
      {
        name: "James Wilson",
        role: "Lead Developer",
        src: "https://images.unsplash.com/photo-1522075469751-3a6694fb2f61",
        alt: "James Wilson profile photo",
        position: "object-right"
      },
      {
        name: "Aisha Patel",
        role: "Product Manager",
        src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
        alt: "Aisha Patel profile photo",
        position: "object-left"
      },
      {
        name: "David Kim",
        role: "Marketing Lead",
        src: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6",
        alt: "David Kim profile photo",
        position: "object-bottom"
      }
    ]
  };

  return (
    <div className="p-6 bg-gray-50">
      <div className="grid grid-cols-3 gap-6">
        {data.teamMembers.map((member, index) => (
          <div key={index} className="text-center">
            <div className="relative mx-auto w-24 h-24 mb-4">
              <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full animate-pulse" />
              <div className="absolute inset-1 bg-white rounded-full overflow-hidden">
                <img
                  src={member.src}
                  alt={member.alt}
                  className={`w-full h-full object-cover ${member.position}`}
                />
              </div>
            </div>
            <h3 className="font-semibold">{member.name}</h3>
            <p className="text-sm text-gray-600">{member.role}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default TeamGrid;

Travel Destination Gallery

A gallery showcasing travel destinations with varying image focal points.

This is a live editor. Play around with it!
export default function TravelGallery() {
  const destinations = [
    {
      id: 1,
      name: "Paris",
      country: "France",
      src: "https://images.unsplash.com/photo-1502602898657-3e91760cbb34",
      alt: "Eiffel Tower in Paris",
      position: "object-right"
    },
    {
      id: 2,
      name: "Tokyo",
      country: "Japan",
      src: "https://images.unsplash.com/photo-1540959733332-eab4deabeeaf",
      alt: "Tokyo cityscape",
      position: "object-right-bottom"
    },
    {
      id: 3,
      name: "Venice",
      country: "Italy",
      src: "https://images.unsplash.com/photo-1514890547357-a9ee288728e0",
      alt: "Venice canals",
      position: "object-left"
    },
    {
      id: 4,
      name: "New York",
      country: "USA",
      src: "https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9",
      alt: "New York skyline",
      position: "object-left-bottom"
    },
    {
      id: 5,
      name: "Sydney",
      country: "Australia",
      src: "https://images.unsplash.com/photo-1506973035872-a4ec16b8e8d9",
      alt: "Sydney Opera House",
      position: "object-right"
    },
    {
      id: 6,
      name: "Santorini",
      country: "Greece",
      src: "https://images.unsplash.com/photo-1613395877344-13d4a8e0d49e",
      alt: "Santorini white buildings",
      position: "object-right-bottom"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-8">
      {destinations.map((destination) => (
        <div key={destination.id} className="group relative cursor-pointer">
          <div className="h-96 overflow-hidden rounded-2xl">
            <img
              src={destination.src}
              alt={destination.alt}
              className={`w-full h-full object-cover ${destination.position} transition-transform duration-300 group-hover:scale-110`}
            />
          </div>
          <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <div className="absolute bottom-6 left-6 text-white">
              <h3 className="text-2xl font-bold">{destination.name}</h3>
              <p className="text-lg">{destination.country}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Blog Post Hero Images

A blog listing with hero images using different object positions for optimal content display.

This is a live editor. Play around with it!
export default function BlogPosts() {
  const posts = [
    {
      id: 1,
      title: "The Art of Modern Architecture",
      category: "Design",
      src: "https://images.unsplash.com/photo-1511818966892-d7d671e672a2",
      alt: "Modern building architecture",
      position: "object-center"
    },
    {
      id: 2,
      title: "Sustainable Living in Urban Spaces",
      category: "Lifestyle",
      src: "https://images.unsplash.com/photo-1518780664697-55e3ad937233",
      alt: "Urban garden",
      position: "object-top"
    },
    {
      id: 3,
      title: "The Future of Transportation",
      category: "Technology",
      src: "https://images.unsplash.com/photo-1519389950473-47ba0277781c",
      alt: "Electric vehicle charging",
      position: "object-bottom"
    },
    {
      id: 4,
      title: "The Rise of Remote Work Culture",
      category: "Business",
      src: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d",
      alt: "Home office setup",
      position: "object-top"
    },
    {
      id: 5,
      title: "Farm to Table Movement",
      category: "Food",
      src: "https://images.unsplash.com/photo-1498837167922-ddd27525d352",
      alt: "Organic vegetables",
      position: "object-bottom"
    }
  ];

  return (
    <div className="max-w-6xl mx-auto p-8">
      {posts.map((post) => (
        <article key={post.id} className="mb-12">
          <div className="relative h-[40vh] mb-6 rounded-xl overflow-hidden">
            <img
              src={post.src}
              alt={post.alt}
              className={`w-full h-full object-cover ${post.position}`}
            />
            <div className="absolute top-4 left-4 bg-white px-4 py-2 rounded-full">
              <span className="text-sm font-medium">{post.category}</span>
            </div>
          </div>
          <h2 className="text-3xl font-bold mb-4">{post.title}</h2>
          <div className="flex items-center space-x-4">
            <button className="bg-black text-white px-6 py-2 rounded-lg">
              Read More
            </button>
            <button className="border border-black px-6 py-2 rounded-lg">
              Share
            </button>
          </div>
        </article>
      ))}
    </div>
  );
}

Property Listing Cards

A real estate listing component with property images using different object positions.

This is a live editor. Play around with it!
export default function PropertyListings() {
  const properties = [
  {
    id: 1,
    title: "Modern Downtown Loft",
    price: "$750,000",
    location: "New York, NY",
    beds: 2,
    baths: 2,
    sqft: 1200,
    src: "https://images.unsplash.com/photo-1522708323590-d24dbb6b0267",
    alt: "Modern loft interior",
    position: "object-left"
  },
  {
    id: 2,
    title: "Beachfront Villa",
    price: "$2,500,000",
    location: "Miami, FL",
    beds: 4,
    baths: 3,
    sqft: 3500,
    src: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750",
    alt: "Luxury beachfront home",
    position: "object-left-bottom"
  },
  {
    id: 3,
    title: "Mountain View Cabin",
    price: "$450,000",
    location: "Denver, CO",
    beds: 3,
    baths: 2,
    sqft: 1800,
    src: "https://images.unsplash.com/photo-1518780664697-55e3ad937233",
    alt: "Cabin exterior",
    position: "object-right-top"
  },
  {
    id: 4,
    title: "Urban Townhouse",
    price: "$899,000",
    location: "Chicago, IL",
    beds: 3,
    baths: 2.5,
    sqft: 2200,
    src: "https://images.unsplash.com/photo-1494526585095-c41746248156",
    alt: "Townhouse exterior",
    position: "object-left"
  },
  {
    id: 5,
    title: "Historic Victorian",
    price: "$1,200,000",
    location: "San Francisco, CA",
    beds: 5,
    baths: 3,
    sqft: 3200,
    src: "https://images.unsplash.com/photo-1518780664697-55e3ad937233",
    alt: "Victorian house",
    position: "object-right-bottom"
  },
  {
    id: 6,
    title: "Desert Modern Estate",
    price: "$1,800,000",
    location: "Phoenix, AZ",
    beds: 4,
    baths: 4,
    sqft: 4000,
    src: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750",
    alt: "Modern desert home",
    position: "object-left-bottom"
  }
];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-8">
      {properties.map((property) => (
        <div key={property.id} className="bg-white rounded-xl shadow-lg overflow-hidden">
          <div className="relative h-64">
            <img
              src={property.src}
              alt={property.alt}
              className={`w-full h-full object-cover ${property.position}`}
            />
            <div className="absolute top-4 right-4 bg-white px-4 py-2 rounded-lg">
              <span className="font-bold text-lg">{property.price}</span>
            </div>
          </div>
          <div className="p-6">
            <h3 className="text-xl font-bold mb-2">{property.title}</h3>
            <p className="text-gray-600 mb-4">{property.location}</p>
            <div className="flex justify-between text-sm text-gray-500">
              <span>{property.beds} beds</span>
              <span>{property.baths} baths</span>
              <span>{property.sqft} sqft</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Customization Examples

Product Gallery Spotlight

This example demonstrates a customized object position for a product gallery where the focal point of each image is positioned differently to create visual interest.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function ProductGallery() {
  const products = [
    {
      id: 1,
      image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
      title: "Premium Watch",
      position: "object-spotlight"
    },
    {
      id: 2,
      image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      title: "Headphones",
      position: "object-product-focus"
    },
    {
      id: 3,
      image: "https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f",
      title: "Camera",
      position: "object-detail-view"
    }
  ];

  return (
    <div className="grid grid-cols-3 gap-4 p-8 bg-gray-100">
      {products.map((product) => (
        <div key={product.id} className="overflow-hidden rounded-lg shadow-lg">
          <img
            src={product.image}
            alt={product.title}
            className={`w-full h-64 object-cover ${product.position} transition-transform hover:scale-105`}
          />
          <h3 className="text-xl font-bold p-4">{product.title}</h3>
        </div>
      ))}
    </div>
  );
}

Hero Banner Composition

This example shows how to create a dynamic hero banner with custom object positions for different screen sizes.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function HeroBanner() {
  return (
    <div className="relative h-screen">
      <img
        src="https://images.unsplash.com/photo-1504384764586-bb4cdc1707b0"
        alt="Hero Banner"
        className="w-full h-full object-cover
          object-hero-mobile
          md:object-hero-tablet
          lg:object-hero-desktop"
      />
      <div className="absolute inset-0 bg-black bg-opacity-40">
        <div className="container mx-auto px-6 h-full flex items-center">
          <div className="text-white max-w-lg">
            <h1 className="text-5xl font-bold mb-4">Welcome to the Future</h1>
            <p className="text-xl mb-8">Discover our innovative solutions</p>
            <button className="bg-white text-black px-8 py-3 rounded-full hover:bg-opacity-90">
              Learn More
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

Team Member Profile Cards

This example showcases profile cards with customized image positioning for team member photos.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function TeamProfiles() {
const team = [
    {
      id: 1,
      name: "Emma Williams",
      role: "CEO",
      image: "https://images.unsplash.com/photo-1589729132389-8f0e0b55b91e",
      position: "portrait-top"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "CTO",
      image: "https://images.unsplash.com/photo-1629425733761-caae3b5f2e50",
      position: "portrait-center"
    },
    {
      id: 3,
      name: "David Johnson",
      role: "Design Director",
      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      position: "portrait-bottom"
    }
  ];


  return (
    <div className="bg-gray-50 py-16">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {team.map((member) => (
            <div key={member.id} className="bg-white rounded-2xl overflow-hidden shadow-xl hover:shadow-2xl transition-shadow">
              <div className="h-60 overflow-hidden">
                <img
                  src={member.image}
                  alt={member.name}
                  className={`w-full h-full object-cover object-${member.position} transition-transform hover:scale-105`}
                />
              </div>
              <div className="p-6 text-center">
                <h3 className="text-2xl font-bold mb-2">{member.name}</h3>
                <p className="text-gray-600 text-lg">{member.role}</p>
                <button className="mt-4 bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700">
                  View Profile
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Best Practices

Maintain Design Consistency

Maintaining a consistent visual identity across a project ensures that users immediately recognize your application’s unique style. When working with Tailwind CSS object-position utilities, strive for a uniform approach that assigns logical focal points to images and media. This uniformity not only helps you present consistent branding but also makes it simpler for teams to collaborate without confusion about design decisions.

A consistent strategy typically involves defining a set of go-to positions for various media types—portraits, banners, product photos, or backgrounds—and documenting how and when each should be used. By standardizing placements, you avoid inconsistent imagery, which can disrupt the user experience.

Optimize for Reusability

Reusability ensures that design and development efforts pay long-term dividends. By encapsulating frequently used object-position configurations into reusable components, you can significantly reduce redundancy.

For example, creating a dedicated React component that automatically assigns object-center, or a custom focus point from your Tailwind configuration, can streamline repetitive tasks. For instance, a <ProfilePhoto> component can systematically apply object-cover and a default object position suitable for headshots. This approach contributes to a more uniform interface, especially if these patterns recur throughout a large application.

Accessibility Considerations

Enhance Readability and Navigability

Proper object positioning can enhance readability by ensuring media elements are placed logically within the layout. When using object positioning with images containing important content, such as infographics or text overlays, position them in a way that does not obstruct essential information. This improves usability for all users.

Logical object positioning also improves content flow, making it easier for users to scan and navigate a page. When aligning images next to text, positioning them consistently (e.g., object-left for left-aligned text) improves readability by reducing visual strain and maintaining logical order.

Focus on High Contrast

A well-designed interface often employs layered content, such as text or icons placed over images. To maintain visibility of these elements, make sure your object-position does not inadvertently place dark text over dark areas or light text over bright backgrounds.

Strategically controlling where an image is anchored can drastically improve color contrast. For instance, if your brand palette includes a black text overlay, ensure the image’s background at the overlay area is lighter in color. If you are stuck with an inherently uneven image, you can push the focal point into an area with less visual noise, then apply a subtle darkening or lightening overlay.

Object FitVisibility

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy