How To Stretch And Scale Background Image Using CSS?

Trang chủ » Html Background Image Size Stretch » How To Stretch And Scale Background Image Using CSS?

Có thể bạn quan tâm

Skip to content geeksforgeeks
  • Courses
    • DSA Courses
    • Programming Languages
  • Tutorials
    • Python Tutorial
      • Python Loops and Control Flow
    • Java
      • Java Interview Questions
      • Java Quiz
      • Advance Java
    • Programming Languages
    • System Design
    • Interview Corner
    • Computer Science Subjects
    • DevOps
    • Linux
    • Software Testing
    • Databases
    • Android
    • Excel
    • Mathematics
  • DSA
    • Data Structures
    • Algorithms
      • Analysis of Algorithms
      • Searching Algorithms
      • Sorting Algorithms
    • Practice
      • Company Wise Coding Practice
      • Practice Problems Difficulty Wise
      • Language Wise Coding Practice
      • Curated DSA Lists
    • Company Wise SDE Sheets
    • DSA Cheat Sheets
    • Puzzles
  • Data Science
    • Data Science Packages
    • Data Visualization
    • Data Analysis
  • Web Tech
    • Web Development Using Python
      • Django
      • Flask
    • Cheat Sheets
  • 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 How to stretch and scale background image using CSS? Last Updated : 03 Aug, 2023 Summarize Comments Improve Suggest changes Like Article Like Save Share Report Follow

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: This property value is used to stretch the background-image in x and y directions and cover the whole area.
  • length: This property value is used to scale the background-image. It changes the background-image size. The length value can be in the form of px, em, % etc.

Example 1: This example stretches the background-image in x and y direction.

html

<!DOCTYPE html> <html> <head> <style> /*background-size: 100% auto with no repeat */ #example1 { width:600px; /* screen width */ height:200px; /* screen height */ border: 2px solid black; background: url( https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-45-8.png); background-repeat: no-repeat; background-size: 100% auto; } /*background-size:auto with no repeat*/ #example2 { width:600px; /* screen width */ height:200px; /* screen height */ border: 2px solid black; background: url( https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-45-8.png); background-repeat: no-repeat; background-size: auto; } /* background-size: cover with no repeat */ #example3 { border: 2px solid black; width:600px; /* screen width */ height:200px; /* screen height */ background: url( https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-45-8.png); background-repeat: no-repeat; background-size: cover; } </style> </head> <body> <h2>background-size: 100% auto :</h2> <p> The background image is displayed in its original size. </p> <div id="example1"></div> <h2>background-size: auto (default):</h2> <p>The background image is set to auto.</p> <div id="example2"></div> <h2>background-size: cover:</h2> <p> The background image is set to cover to specified area. </p> <div id="example3"></div> </body> </html>

Output:

Example 2: This example scales the background-image.

html

<!DOCTYPE html> <html> <head> <style> /*background-size: initial with no repeat */ #example1 { width:600px;/* screen width */ height:200px;/* screen height */ border: 2px solid black; background: url( https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-45-8.png); background-repeat: no-repeat; background-size: initial; } /*background-size: contain with repeat */ #example2 { border: 2px solid black; width:600px;/* screen width */ height:200px;/* screen height */ background: url( https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-45-8.png); background-size: contain; } /*background-size: 300px 100px with no repeat */ #example3 { border: 2px solid black; width:600px;/* screen width */ height:200px;/* screen height */ background: url( https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-45-8.png); background-repeat: no-repeat; background-size: 300px 100px; } </style> </head> <body> <h2>background-size: initial:</h2> <p>The background image is set to initial.</p> <div id="example1"></div> <h2>background-size: contain:</h2> <p>The background image is set to contain.</p> <div id="example2"></div> <h2>background-size: 300px 100px:</h2> <p>The background image is set in pixel size.</p> <div id="example3"></div> </body> </html>

Output:

S

Sabya_Samadder Follow Improve Previous Article How to set background-image for the body element using CSS ? Next Article

Similar Reads

  • 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 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 Add Image in Text Background using HTML and CSS ? In this article, we will use HTML and CSS to set the image in the text background. To set the image in the text background, some CSS property is used. To add an image in the text background using HTML and CSS, create a container element (e.g., a `<div>`), set its background to the desired imag 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 add a Background Image using Tailwind CSS ? To add a background image using Tailwind CSS, you can use the bg-[image-class] utility class, where [image-class] corresponds to a predefined set of background image classes. You also need to set the actual image URL using inline or external styles. Syntax<div class="bg-cover bg-center h-screen" 1 min read
  • 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 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 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 Fit Background Image to Div using CSS? Fitting background images into HTML divs is important for creating visually appealing web designs. By understanding the concepts of "fill" and "fit," you can effectively use the CSS background-size property to ensure that images cover or fit within divs, enhancing the overall presentation of your we 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
  • Set the size of background image using CSS ? Setting the size of a background image using CSS allows you to control how the image fits within an element. By using the background-size property, you can specify the width and height, ensuring the image scales appropriately for responsive design. Syntax: background-size: width height;Note: If the 2 min read
  • How to Add Background Image in CSS? The CSS background-image property is used to add an image as a background to an element. Syntax background-image: url()1. Setting background Image of an ElementA background image is added to an h1 tag using the URL. [GFGTABS] HTML <h1 style="background-image: url( 'https://media.geeksfor 1 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
  • How to Rotate Container Background Image using CSS ? Rotating a container's background image using CSS involves applying the transform: rotate() property to the container element. This rotates the entire element at a specified angle, including its background image, creating a dynamic, rotating visual effect on the web page's design. Approach: Using tr 2 min read
  • How to Set Offset of Background Image from Right using CSS ? In this article, you can see the ways by which you can set the offset of a background image from the right using CSS. The approach solving involves the use of the CSS background positioning property of background-position. This property is essentially used to specify the space from which the backgro 2 min read
  • How to Place Text Blocks Over an Image using CSS? Placing text blocks over an image is a common technique used in web design to create visually appealing layouts. Here, we will explore different approaches to achieve this effect using CSS. Below are the approaches to place text blocks over an image using CSS: Table of Content Using Absolute Positio 2 min read
  • How to change the background image using jQuery ? To change the background image using jQuery, you can use the jQuery CSS() method. For this, the whole property value is specified using the url() functional notation. Approach: Suppose we have an image URL stored in a variable and then use css() method to change the value of background image. Below 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
Article Tags :
  • CSS
  • Web Technologies
  • CSS-Misc
Like three90RightbarBannerImg Explore More 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 Got It ! Lightbox Improvement Suggest changes 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 CharLimit:2000

What kind of Experience do you want to share?

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

Từ khóa » Html Background Image Size Stretch