How to fix position of background image?

Question

I have an input text field served to be a search bar, and I want to place a magnifier glass to the left, but when the input text field gets focus, the glass should disappear.

.search .form-item input {
    background-image: url("https://i.stack.imgur.com/VtucQ.jpg");
    background-size: 70% 70%;
    background-position: -105% center;
    background-repeat: no-repeat;
  }
.search .form-item input:focus {
    background-image: none; }

<form action="/search" method="get" id="views-exposed-form-search-page-page-search" accept-charset="UTF-8">
  <div class="form--inline clearfix">
  <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-keys form-item-keys">
      <label for="edit-keys">Fulltext search</label>
        <input data-drupal-selector="edit-keys" type="text" id="edit-keys" name="keys" value="" size="30" maxlength="128" class="form-text">

        </div>

</div>

</form>

<div class="search">
    <input>
</div>

I wanted to achieve it using css:

  .navigation .search  input {
    background-image: url("../images/search.svg");
    background-size: 70% 70%;
    background-position: -105% center;
    background-repeat: no-repeat;
  }
  .navigation .search  input:focus {
    background-image: none; }

The code basically works. The thing is that I need to make the background-image a bit smaller, what I achieved by background-size: 70% 70% but it mixes up with the position of the image -it appears in the center. Then I had to play with background-position:-105% center property, what shifted the icon to the left.

My question is if it is a good practice to use a negative percentage to specify the position of the background-image or are there any better ways?

`position:absolute;right:0` didn't work? make sure your parent is `relative` — Sai Manoj, Jun 13 '19 at 11:01
related: https://stackoverflow.com/a/51734530/8620333 (you will get more details about the calculation and alternatives ways) .. the section *Special cases* should be what you are looking for — Temani Afif, Jun 13 '19 at 11:17
What's the svg width? Are you sure it doesn't have some extraspace aside? — MarkWalczak, Jun 13 '19 at 11:19
In your first code sample, there is no `search` class. Maybe u just need to remove it in your `css` — Harish, Jun 13 '19 at 11:30
For me the most important question is, whether negative percentage (-105%) a good way to set the position of the image? — badm, Jun 13 '19 at 11:32
If you are looking for the best way to do it, from an accessibility point of view, it will be with an `img` tag for the search icon with an empty `alt` attribute positioned wherever you need it. — Harish, Jun 13 '19 at 11:38

score 1 · Accepted Answer · answered Jun 13 '19 at 11:42

You can do something like this in CSS:

.search  input {
   background-size: 30px 17px;
   background-repeat: no-repeat;
   background-position: left;
   transition: .3s;
   background-image: url("https://i.stack.imgur.com/VtucQ.jpg");
 }

.search input:focus {
     background-position: left 50px; 
  }

and html

<div class="search">
    <input>
</div>

Background size is 30x17 beacuse image will not lose ratio. And on focus just animate position from image to hide it.

replacing percentage with px fixed my problem – badm Jun 13 '19 at 11:45 — badm, Jun 13 '19 at 11:45

score 0 · Answer 2 · answered Jun 13 '19 at 11:34

0

you can use focus in .when someone enter to the textbox hide the image that simple. set the display none to the image

answered Jun 13 '19 at 11:34

Rahees Ahmed

23
10

How to fix position of background image?

2 Answers2