Replace img with background-image

mate-academy · Feb 4, 2025 · d4ba403 · d4ba403
1 parent 283f880
commit d4ba403
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 10 deletions.
diff --git a/src/index.html b/src/index.html
@@ -22,11 +22,6 @@
       data-qa="big"
     >
       <div class="search-bar search-bar--big">
-        <img
-          src="./images/Search.svg"
-          alt="Search-logo"
-          class="search-bar__icon search-bar__icon--big"
-        />
         <label>
           <input
             type="text"
@@ -43,11 +38,6 @@
       data-qa="small"
     >
       <div class="search-bar search-bar--small">
-        <img
-          src="./images/Search.svg"
-          alt="Search-logo"
-          class="search-bar__icon search-bar__icon--small"
-        />
         <label>
           <input
             type="text"

diff --git a/src/style.css b/src/style.css
@@ -27,6 +27,8 @@ html {
 .search-bar {
   height: 40px;
   width: 100%;
+  background-image: url('./images/Search.svg');
+  background-repeat: no-repeat;
   margin: 20px;
   display: flex;
   justify-content: start;
@@ -44,10 +46,12 @@ html {
 
 .search-bar--big {
   height: 70px;
+  background-position: 26px center;
 }
 
 .search-bar--small {
   height: 42px;
+  background-position: 13px center;
 }
 
 .search-bar__icon--big {
@@ -63,10 +67,12 @@ html {
 }
 
 .search-bar__input--big {
+  margin-left: 62px;
   font-size: 16px;
 }
 
 .search-bar__input--small {
+  margin-left: 33px;
   font-size: 14px;
   font-weight: 400;
 }