מתיחת רקע - css

[yyy]

html

<div class="mainStyle">
  </div>

css

.mainStyle {
    background-image: url("/image.png");
    position: fixed;
    width: 20%;
    height: 180px;
    left: 75%;
    top: 80%;
    background-size: cover;
  }

המימדים של תמונת הרקע הם 1000-697 פיקסלים.

אני רוצה שהתמונה תימתח בדיוק בגודל ה-div שהיא מהווה את הרקע שלו.
נכון לעשיו התמונה נחתכת בחלק התחתון שלה.
איך עושים את זה נכון?

[dovid]

התמונה שלך לא מתאימה לאלמנט. זה המציאות ואתה צריך להסתדר איתה בדרכים שונות, השאלה איזה.
cover הגדרתו היא "שלא יהיה שטח ללא תמונה". בשביל זה חייבים לוותר על פרופורציה או על חיתוך המימד שגולש, וcover בוחר באפשרות השניה.
אבל אתה לא רוצה את החיתוך, ואז מתבקש שתגיד על מה אתה מוכן לוותר, על הפרופורציה, או על שלא כל השטח יהיה מכוסה?

אם אתה מוותר על הפרופורציה, כתוב ככה:

background-image: 100% 100%;

אם אתה מוותר שלא כל השטח יהיה מכוסה:

background-size: contain;
background-repeat: no-repeat;

קישור לMDN.

[yyy]

@dovid כתב במתיחת רקע - css:

background-image: 100%100%;

כוונתך

background-size: 100% 100%;

[dovid]

הבנת אותי, למרות שנינו התקשינו להתבטא...