How To Stretch And Scale Background Image Using CSS?
Có thể bạn quan tâm
Skip to content
- Courses
- DSA to Development
- Machine Learning & Data Science
- Generative AI & ChatGPT
- Become AWS Certified
- DSA Courses
- Data Structure & Algorithm(C++/JAVA)
- Data Structure & Algorithm(Python)
- Data Structure & Algorithm(JavaScript)
- Programming Languages
- CPP
- Java
- Python
- JavaScript
- C
- All Courses
- Tutorials
- Python Tutorial
- Taking Input in Python
- Python Operators
- Python Data Types
- Python Loops and Control Flow
- Python Conditional Statements
- Python Loops
- Python Functions
- Python OOPS Concept
- Python Data Structures
- Python Exception Handling
- Python File Handling
- Python Exercises
- Java
- Learn Java Programming Language
- Java Collections
- Java 8 Tutorial
- Java Programs
- Java Interview Questions
- Java Interview Questions
- Core Java Interview Questions-Freshers
- Java Multithreading Interview Questions
- OOPs Interview Questions and Answers
- Java Exercises
- Java Quiz
- Java Quiz
- Core Java MCQ
- Java Projects
- Advance Java
- Spring Tutorial
- Spring Boot Tutorial
- Spring Boot Interview Questions
- Spring MVC Tutorial
- Spring MVC Interview Questions
- Hibernate Tutorial
- Hibernate Interview Questions
- Programming Languages
- JavaScript
- C++
- R Tutorial
- SQL
- PHP
- C#
- C
- Scala
- Perl
- Go Language
- Kotlin
- System Design
- System Design Tutorial
- Software Design Patterns
- System Design Roadmap
- Top 10 System Design Interview Questions and Answers
- Interview Corner
- Company Preparation
- Top Topics
- Practice Company Questions
- Interview Experiences
- Experienced Interviews
- Internship Interviews
- Competitive Programming
- Multiple Choice Quizzes
- Aptitude for Placements
- Computer Science Subjects
- Operating System
- DBMS
- Computer Networks
- Engineering Mathematics
- Computer Organization and Architecture
- Theory of Computation
- Compiler Design
- Digital Logic
- Software Engineering
- DevOps
- GIT
- AWS
- Docker
- Kubernetes
- Microsoft Azure Tutorial
- Google Cloud Platform
- Linux
- Linux Tutorial
- Linux Commands A-Z
- Linux Commands Cheatsheet
- File Permission Commands
- Linux System Administration
- Linux File System
- Linux Shell Scripting
- Linux Networking
- Linux Interview Questions
- Software Testing
- Software Testing Tutorial
- Software Engineering Tutorial
- Testing Interview Questions
- Jira
- Databases
- DBMS Tutorial
- SQL Tutorial
- PostgreSQL Tutorial
- MongoDB Tutorial
- SQL Interview Questions
- MySQL Interview Questions
- PL/SQL Interview Questions
- Android
- Android Tutorial
- Android Studio Tutorial
- Kotlin For Android
- Android Projects
- Android Interview Questions
- 6 Weeks of Android App Development
- Excel
- MS Excel Tutorial
- Introduction to MS Excel
- Data Analysis in Excel
- Basic Excel Formulas & Functions
- Data Analysis in Advanced Excel
- Workbooks
- Statistical Functions
- Data Visualization in Excel
- Pivot Tables in Excel
- Excel Spreadsheets in Python
- Basic Excel Shortcuts
- Mathematics
- Number System
- Algebra
- Linear Algebra
- Trigonometry
- Set Theory
- Statistics
- Probability
- Geometry
- Mensuration
- Logarithms
- Calculus
- Python Tutorial
- DSA
- Data Structures
- Arrays
- Matrix
- Strings
- Linked List
- Stack
- Queue
- Tree
- Heap
- Hashing
- Graph
- Set Data Structure
- Map Data Structure
- Advanced Data Structure
- Data Structures Tutorial
- Algorithms
- Analysis of Algorithms
- Design and Analysis of Algorithms
- Asymptotic Analysis
- Asymptotic Notations
- Worst, Average and Best Cases
- Searching Algorithms
- Linear Search
- Binary Search
- Searching Algorithms Tutorial
- Sorting Algorithms
- Selection Sort
- Bubble Sort
- Insertion Sort
- Merge Sort
- Quick Sort
- Heap Sort
- Counting Sort
- Radix Sort
- Bucket Sort
- Sorting Algorithms Tutorial
- Greedy Algorithms
- Dynamic Programming
- Graph Algorithms
- Pattern Searching
- Recursion
- Backtracking
- Divide and Conquer
- Mathematical Algorithms
- Geometric Algorithms
- Bitwise Algorithms
- Randomized Algorithms
- Branch and Bound
- Algorithms Tutorial
- Analysis of Algorithms
- DSA Tutorial
- Practice
- All DSA Problems
- Problem of the Day
- Company Wise Coding Practice
- Amazon
- Microsoft
- Flipkart
- Explore All
- GfG SDE Sheet
- Practice Problems Difficulty Wise
- School
- Basic
- Easy
- Medium
- Hard
- Language Wise Coding Practice
- CPP
- Java
- Python
- Curated DSA Lists
- Beginner's DSA Sheet
- Top 50 Array Problems
- Top 50 String Problems
- Top 50 DP Problems
- Top 50 Graph Problems
- Top 50 Tree Problems
- Competitive Programming
- Company Wise SDE Sheets
- Facebook SDE Sheet
- Amazon SDE Sheet
- Apple SDE Sheet
- Netflix SDE Sheet
- Google SDE Sheet
- DSA Cheat Sheets
- SDE Sheet
- DSA Sheet for Beginners
- FAANG Coding Sheet
- Product-Based Coding Sheet
- Company-Wise Preparation Sheet
- Top Interview Questions
- Puzzles
- All Puzzles
- Top 100 Puzzles Asked In Interviews
- Top 20 Puzzles Commonly Asked During SDE Interviews
- Data Structures
- Data Science
- Python Tutorial
- R Tutorial
- Machine Learning
- Data Science using Python
- Data Science using R
- Data Science Packages
- Pandas Tutorial
- NumPy Tutorial
- Data Visualization
- Python Data Visualization Tutorial
- Data Visualization with R
- Data Analysis
- Data Analysis with Python
- Data Analysis with R
- Deep Learning
- NLP Tutorial
- Web Tech
- HTML Tutorial
- CSS Tutorial
- JavaScript Tutorial
- PHP Tutorial
- ReactJS Tutorial
- NodeJS Tutorial
- Bootstrap Tutorial
- Typescript
- Web Development Using Python
- Django
- Django Tutorial
- Django Projects
- Django Interview Questions
- Flask
- Flask Tutorial
- Flask Projects
- Flask Interview Questions
- Postman
- Github
- Django
- Cheat Sheets
- HTML Cheat Sheet
- CSS Cheat Sheet
- JavaScript Cheat Sheet
- React Cheat Sheet
- Angular Cheat Sheet
- jQuery Cheat Sheet
- Bootstrap Cheat Sheet
- Learn Complete Web Development
- 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
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 ArticleSimilar 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
- CSS
- Web Technologies
- CSS-Misc
What kind of Experience do you want to share?
Interview Experiences Admission Experiences Career Journeys Work Experiences Campus Experiences Competitive Exam ExperiencesTừ khóa » Html Background Image Stretch Horizontally
-
CSS - Background Image Stretch Horizontally And Repeat Vertically?
-
How To Stretch And Scale An Image In The Background With CSS
-
HTML Stretch Background Image
-
Stretch Background Image In Header Only Horizontally, It Does Not ...
-
How To Stretch A Background Image To Fit A Web Page - ThoughtCo
-
How To Stretch A Background Image In CSS So That It Doesn't Repeat ...
-
How To Stretch An Image Horizontally With CSS
-
Background-size - CSS-Tricks
-
Resizing Background Images With Background-size - CSS
-
CSS Background-repeat Property - W3Schools
-
CSS Object-fit Property - W3Schools
-
How To Stretch A Background Image Horizontally Css?
-
Background-size - CSS: Cascading Style Sheets - MDN Web Docs
-
Perfect Full Page Background Image - CSS-Tricks