How To Stretch And Scale Background Image Using CSS?

Trang chủ » Html Body Background Image Stretch To Fit » 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 Next Article How to set multiple background images using CSS?

Similar Reads

How to Stretch Elements to Fit the Whole Height of the Browser Window Using CSS? To stretch elements to fit the whole height of the browser window using CSS, you can use "vh" units, where "1vh" equals 1% of the viewport height, so setting the height to "100vh" spans the entire height. Approach: Using CSS height PropertyIn this approach, we are using the Height property to fit the whole height of the browser. The height does not 1 min read CSS font-stretch Property The font-stretch property in CSS is used to set the text wider or narrower. This property is not working any font. Its only work when font family has a width-variant face. Syntax: font-stretch: normal|ultra-condensed|extra-condensed|condensed| semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded; Default Value: normal Property Values 2 min read How to stretch flexbox to fill the entire container in Bootstrap? We are given an HTML document (linked with Bootstrap) with a flexbox and a container. The goal is to stretch the flexbox to fill the entire container. Table of Content Using Bootstrap flex-fill classUsing Bootstrap's flex-grow ClassUsing Bootstrap flex-fill classThe .flex-fill class stretches the width of an element to fill the entire horizontal sp 3 min read How to stretch div to fit the container ? Stretching a child div to fit the full width and height of its parent container can be achieved through various CSS methods. Here are two effective methods to accomplish this: Method 1: Using 100% Width and HeightThis is the most simple approach. By setting the width and height properties of the child div to 100%, it will automatically stretch to f 2 min read How to Create a Wave Image for a Background using HTML and CSS ? This type of background creates uniqueness on your webpage by avoiding regular rectangular sized background or header. The following header design will show your creativity. This design can be achieved in two ways: Using ::before and ::after selector on a div element in CSS.Using SVG in HTML. Example: This example uses ::before and ::after selector 3 min read How to repeat background image vertically and horizontally using CSS ? In this article, we are going to discuss the background image repeat property of CSS. Also, we are going to discuss how to repeat the background image in horizontal and vertical directions. The background-repeat property in CSS is used to repeat the background image both horizontally and vertically. It also decides whether the background-image will 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 image using CSS ('background-image property), and adju 2 min read How to Modify the Fill Color of an SVG Image when being Served as Background Image ? In this article, we will see how to modify the fill color of an SVG image when being served as a background image. SVGs also known as scalable vector images, While being served as a background image we can change their background color easily. It has a number of approaches like using HTML only or using CSS or JavaScript. For starters let's look at 5 min read How to add an image as background image of a web page ? In this article, we will be adding an image as the background image of a web page. Background images are used to make a website more interactive and attractive. It can be applied in many stylings. Approach: In the body tag, specify a background image in the background attribute by passing the URL of the image or location path.Adding CSS styling pro 2 min read How to give text or an image transparent background using CSS ? In this article, we will know to make the text or image a transparent background using the CSS & will see its implementation through the example. The opacity property is used to set image or text transparent using CSS. The opacity attribute is used to adjust the transparency of text or pictures. The value of opacity lies between 0.0 to 1.0 wher 2 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: background-image: url("url"); Property value: It holds the 2 min read How to set the background image start from the upper left corner of the content using CSS? In this article, we will learn how to set the background image starting from the upper left corner of the content using CSS. Approach: We use the background-image property of CSS to set the background image. And for putting it in the upper left corner, we will use the background-origin property to adjust the webpage's background image. So to set th 1 min read How to apply background image with linear gradient using Tailwind CSS ? In this article, we will see how to apply background images with a linear gradient using Tailwind CSS. Tailwind CSS is a highly customizable, utility-first CSS framework from which we can use utility classes to build any design. To apply background images with linear gradients we use the background image utility of Tailwind CSS. It is the alternati 2 min read Which property is used to set the background image of an element using CSS ? In this article, we will see the property used for setting the background image of an element in CSS. The background image can be set using the background-image property that is used to set one or more background images for an element. By default, it places the image in the top left corner. To specify two or more images, we need to specify the sepa 1 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 background image is starting. This property takes the one 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");Set a CSS property:$(selector).css("propertynam 2 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" style="background-image: url('your-image-url.jpg') 1 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 first value is omitted then the image takes its or 2 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 using CSS, you can utilize the filter property. The f 3 min read Create an Image Background Remover App Using HTML CSS & JavaScript Building an Image Background Remover using HTML, CSS, and JavaScript demonstrates the power of combining these technologies to create interactive and user-friendly applications. The clean design and intuitive features make this tool not only functional but also enjoyable for users to interact with. The goal of our project is to provide users with a 3 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 container, to make the element centered. And for small-siz 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 flexibility, enabling dynamic adjustments to back 3 min read How To Show Background Image In Tailwind CSS Using React Dynamic Url? Tailwind CSS is a utility-first framework that uses preset classes to greatly speed up styling. However, utility classes are insufficient when handling dynamic content such as background graphics. We'll demonstrate how to use Tailwind CSS for layout and styling in a React component while managing dynamic URLs. ApproachIn this article, we will show 3 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 transform PropertyThe transform property in CSS allo 2 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 web content. Understanding Background SizeThe backgr 3 min read How to place background image using ::before pseudo selectors in CSS ? The ::before pseudo-element to place a background image in CSS means adding an image behind content by creating a virtual element before the main content. The ::before element is styled with background-image, content, and positioned with CSS, enhancing design flexibility. The ::before pseudo selector is used to place something before the content of 2 min read How to add scale animation on hover using Tailwind CSS in React ? In this article, we'll see how to add scale animation on hover using tailwind CSS in a ReactJS app. The hover effect appears when a user positions the cursor over an element. In tailwind CSS, the scale utility class helps in getting the zoom effect over an element.  PrerequisitesReact JSTailwind CSSApproach to Add Scale AnimationTo add scale animat 3 min read Difference between background and background-color Background Property The background property in CSS is very commonly used and contains many variants. The background property consists of all the following properties:background-colorbackground-imagebackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachmentExample: C/C++ Code &lt;style&gt; h1 { b 1 min read How to set width and height of background image in percent with respect to parent element in CSS ? If we are using an image as a child and want to set the height and width in percentage then we need to set the parent element with some fixed size. Approach 1: Here we will use CSS inside the tags which are also known as inline CSS.For the parent div we will give a fixed size by giving height: 500px and width: 40% according to screen size, and we w 2 min read Tailwind CSS Background Image This class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS background-image property. This class is used to set one or more background images to an element. By default, it places the image on the top left corner. To specify two or more images, separate the URLs with a comma 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 Body Background Image Stretch To Fit