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:

Comment More info Next Article JavaScript | A medicine to every problem

S

Sabya_Samadder Follow Improve Article Tags :
  • CSS
  • Web Technologies
  • CSS-Misc

Similar Reads

  • How to remove First and Last character from String in Scala? In this article, we will explore different approaches to removing the first and last character from a string in Scala. Table of Content Using substring methodUsing drop and dropRight methodsUsing substring methodIn this approach, we are using the substring method which takes two arguments the starti 1 min read
  • How to convert String to structtype in Scala? In Scala, whenever one deals with structured data such as JSON or CSV, there is usually a need to convert strings into structured data types like "StructType". This is very important for efficient processing and analysis of data, particularly in big data setups where Apache Spark is mostly used. To 3 min read
  • How to Convert Scala Map into JSON String? In this article, we will learn to convert a Scala Map into JSON String. We can convert Scala Map to JSON String using various libraries and custom conversion functions. Table of Content What is Scala Map?What is JSON String?Converting Scala Map into JSON StringWhat is Scala Map?In Scala, a Map is a 4 min read
  • How to remove duplicate characters from a String in Scala? In this article, we will learn how to remove duplicate characters from a string in Scala using different approaches. First, we will look through the Brute-Force Approach and then use different standard libraries. Examples: Input: String = "hello"Output: helo Input: String = "Geeks"Output: Geks Naive 4 min read
  • How to split Array in Scala? Arrays are a fundamental data structure in Scala, used to store collections of elements of the same type. Splitting an array involves dividing it into smaller sub-arrays based on specific criteria. This article explores different methods for achieving this in Scala. Table of Content 1. Using `splitA 3 min read
  • How to Remove Double Quotes from String in Scala? This article focuses on discussing how to remove double quotes from a string in Scala. Removing double quotes consists of eliminating all occurrences of double quotes (") from a given string, resulting in a modified string without the double quotes. Remove Double Quotes from String in ScalaBelow are 2 min read
  • How to reverse a String in Scala? In this article, we will learn to reverse a string in Scala. Reverse of a string means changing its order so that the last character becomes the first, the second-to-last becomes the second, and so on, effectively flipping the string's sequence of characters. Examples: Input: S = "GeeksforGeeks"Outp 3 min read
  • How to read and write JSON files in Scala? Scala is frequently used for reading and writing JSON files in a variety of applications, particularly it includes data transmission. Table of Content Steps for reading JSON files in Scala:Steps for writing JSON files in Scala:Steps for reading JSON files in Scala:When reading JSON files in Scala we 3 min read
  • How to Escape Special Symbols in Scala String at Runtime? Handling special symbols' interior strings is an average project in Scala, especially whilst interacting with dynamically created cloth or consumer enter. If special symbols like quote marks, backslashes, or newline characters are not effectively escaped, they could bring about syntax errors or unex 3 min read
  • How to add new line Scala? In this article, we will learn how to add a new line in Scala. 1. Using the newline character (\n):This is the most straightforward approach. The \n character represents a newline and will be interpreted as such when the string is printed. [GFGTABS] Scala // Creating object object GfG { // Main meth 2 min read
  • Split and Parse a string in Python In Python, working with strings is a fundamental aspect of programming. Strings are sequences of characters and often contain structured data that needs to be processed or analyzed. The common operations performed on strings are splitting and parsing. Splitting a String in PythonIn Python, you can s 5 min read
  • How to Escape Double Quotes in Scala? In this article, we will learn how to escape double quotes in Scala. Escaping double quotes means adding a special character or sequence before a double quote within a string to prevent it from being interpreted as the end of the string. Escape Double Quotes in ScalaBelow are the possible approaches 2 min read
  • Convert a String to a List of Characters in Java In Java, to convert a string into a list of characters, we can use several methods depending on the requirements. In this article, we will learn how to convert a string to a list of characters in Java. Example: In this example, we will use the toCharArray() method to convert a String into a characte 3 min read
  • How to Create a JSON Object in Scala? JSON(JavaScript Object Notation) plays an important role in web development and data transmission. In web applications, we frequently use JSON, a lightweight data transmission standard. Working with JSON data is made easy using Scala, a sophisticated programming language for the Java Virtual Machine 2 min read
  • How to format numbers as percentages in Scala? In this article, we will learn to format numbers as percentages in Scala using various methods such as f, %, and java.text.DecimalFormat. Formatting numbers as percentages that consist of representing numerical values as ratios out of 100, typically with a specific number of decimal places. Example 2 min read
  • Convert List of Characters to String in Java Given a list of characters. In this article, we will write a Java program to convert the given list to a string. Example of List-to-String ConversionInput : list = {'g', 'e', 'e', 'k', 's'} Output : "geeks" Input : list = {'a', 'b', 'c'} Output : "abc" Strings - Strings in Java are objects that are 4 min read
  • Scala | String Interpolation String Interpolation refers to substitution of defined variables or expressions in a given String with respected values. String Interpolation provides an easy way to process String literals. To apply this feature of Scala, we must follow few rules: String must be defined with starting character as s 3 min read
  • JavaScript String substring() Method The substring() method in JavaScript is used to extract characters between two indices from a string, without modifying the original string. This method returns a new string that is a part of the original string, starting from a specified position up to (but not including) another specified position 5 min read
  • How does Collect function Work in Scala? The collect function in Scala is utilized to extract elements from a collection that satisfy a specified condition defined by a partial function. It can be invoked on any collection type, whether mutable or immutable and always returns a new collection containing the elements that meet the condition 3 min read
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