Day 2 - Background Images and Properties | Css Tutorial for Beginners | Punjabi language

Welcome to CSS Class 2! In this lesson, we’ll focus on how to set and manipulate background images using CSS. Understanding these properties will help you create visually appealing web pages with various background styles.

In this session:

1. Setting a Background Image:

Syntax: background-image:url("image-path.extension");
Background Repeat: Control how the background repeats:
* no-repeat: No repetition.
* repeat-x: Repeat along the x-axis (horizontal).
* repeat-y: Repeat along the y-axis (vertical).


2. Other Background Image Options:

Background Attachment:

* fixed: The background image stays fixed in place when the user scrolls.
* scroll: The background scrolls with the page.

Background Position:
* Position the background with values like left top, left center, left bottom, or more specific values like 10% 20% (where 10% represents the space from the left and 20% represents the space from the top).

Background Size:
* cover: Resize the image to cover the entire container.
* contain: Ensure the entire image is visible within the container.

3. Combining Properties in One Line:

* Example: background: #222 url('image-path') no-repeat left top;
* This allows you to set multiple background properties in one line for cleaner code.

CSS Overriding Properties:

If the same property is declared multiple times in a CSS style, the last declared property is applied.
Example:
css
Copy code
.classname {
background-color: red;
background-color: blue; /* blue will be applied */
}
By the end of this lesson, you’ll be able to confidently set and manipulate background images with various CSS properties, helping to enhance the design of your web projects.

🔔 Don’t forget to subscribe and hit the bell icon to stay updated with all our course videos! 👍 **If you find this video helpful, please like, share, and comment!

📌 Course Outline:

HTML & CSS: Build and style your web pages.
JavaScript: Add interactivity to your websites.
Bootstrap: Create responsive designs easily.
React JS: Build dynamic user interfaces.
Node JS: Server-side programming.
Express JS: Framework for building web applications.
MongoDB: Database management.


HTML Playlist:    • Day 1 - Course Introduction |  Full S...  


🌟 Connect with us:

Website: https://careerengine.in/
LinkedIn:   / career-engine1  
Instagram:   / career_engine1  
Facebook:   / careerengine1  

Thank you for watching! Stay tuned for more lessons and happy coding! 🚀