Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • CSS Tutorial
  • CSS Exercises
  • CSS Interview Questions
  • CSS Selectors
  • CSS Properties
  • CSS Functions
  • CSS Examples
  • CSS Cheat Sheet
  • CSS Templates
  • CSS Frameworks
  • Bootstrap
  • Tailwind
  • CSS Formatter
Open In App
Next Article:
How to transform background image using CSS3 ?
Next article icon

How to Fit Background Image to Div using CSS?

Last Updated : 10 Jan, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

To fit a background image to a div using CSS, you can utilize the background-size property. Here are some approaches:

1. Using background-size: cover;

This method scales the background image to cover the entire div, maintaining the image's aspect ratio.

HTML 
<html> <head>     <style>         .background-cover {             width: 300px;             height: 200px;             background-image: url('image.jpg');             background-size: cover;             background-position: center;             background-repeat: no-repeat;         }     </style> </head> <body>     <div class="background-cover"></div> </body> </html>

In this Example;

  • The background-size: cover; property ensures the image covers the entire div, potentially cropping parts of the image to maintain aspect ratio.
  • The background-position: center; centers the image within the div.

2. Using background-size: contain;

This method scales the background image to be fully visible within the div, maintaining the image's aspect ratio.

HTML 
<html> <head>     <style>         .background-contain {             width: 300px;             height: 200px;             background-image: url('image.jpg');             background-size: contain;             background-position: center;             background-repeat: no-repeat;         }     </style> </head> <body>     <div class="background-contain"></div> </body> </html>

In this Example;

  • The background-size: contain; property ensures the entire image fits within the div, which may result in empty space if the aspect ratios differ.
  • The background-repeat: no-repeat; prevents the image from repeating if it's smaller than the div.

3. Using background-size with Specific Dimensions

This method sets the background image to specific dimensions within the div.

HTML 
<html > <head>     <style>         .background-size {             width: 300px;             height: 200px;             background-image: url('image.jpg');             background-size: 150px 100px;             background-position: center;             background-repeat: no-repeat;         }     </style> </head> <body>     <div class="background-size"></div> </body> </html>

In this Example;

  • The background-size: 150px 100px; sets the background image to 150 pixels wide and 100 pixels tall.
  • The background-position: center; centers the image within the div.

Next Article
How to transform background image using CSS3 ?

T
triashabiswas
Improve
Article Tags :
  • Web Technologies
  • CSS

Similar Reads

  • How to Add filter to the background image using CSS?
    Adding filters to background images using CSS allows you to apply visual effects like blur, grayscale, brightness adjustment, and more without modifying the actual image file. CSS provides a set of filter functions that can be applied to elements with background images. This approach enhances design
    3 min read
  • How to transform background image using CSS3 ?
    In this article we will learn how to transform a background image using CSS3, The transform property in CSS is used to transform the background image. In Approach: The CSS transform property is used to apply the two-dimensional or three-dimensional transformation to an element. The transform propert
    1 min read
  • How to blur background image using CSS ?
    CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of a document written in HTML. In this article, we will learn how to blur background images using CSS, along with basic implementation examples. Blurring Background Images with CSSTo blur a background image usi
    3 min read
  • How to set multiple background images using CSS?
    The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images. The used background property are listed below: backgr
    2 min read
  • How to Set background Image using jQuery css() Method ?
    This article will show you how to set the background image using jQuery. To set the background image, we are using the jQuery css() method. jQuery css() MethodThis method sets/returns one or more style properties for the specified elements. Syntax: Return a CSS property:$(selector).css("propertyname
    2 min read
  • How to set a Responsive Full Background Image Using CSS ?
    The purpose of this article is to set a Responsive Full Background Image Using CSS. To set a Responsive Full Background Image using CSS we will use the CSS background-size property that has a value auto that tells the browsers to automatically scale the image's width and height based on the containe
    1 min read
  • How to set background-image for the body element using CSS ?
    In this article, we set the image into the background using CSS property. The background-image property is used to set one or more background images to an element. By default, it places the image in the top left corner. To specify two or more images, separate the URLs with a comma. Syntax: backgroun
    2 min read
  • How to Set Background Image in CSS?
    CSS (Cascading Style Sheets) can allow developers to set the background image for the web pages or specific HTML elements. This feature can help enhance the visual aesthetics of the website. The background-image property in CSS can be used to specific one or multiple background images to be applied
    3 min read
  • How to stretch and scale background image using CSS?
    The background-size property is used to stretch and scale the background image. This property set the size of the background image. Here we will see all possible examples of background-size and background-scale properties. Syntax: background-size: auto|length|cover|contain|initial|inherit;cover: Thi
    2 min read
  • How to Change Background Images on Scroll using CSS?
    Background images are crucial in web development, significantly enhancing the user experience. Using background images on a webpage can effectively showcase a brand or convey specific messages. Here, we will explore how to change background images on scroll using CSS. ApproachThe HTML includes a spa
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences