Html Question posted in
Some basic documentation can be found here.

Html – How do I put an image in the background of the search bar?

That my first post here.

I’m a self-taught developer and I’d really like to learn how to put an image in the background of a search bar.

I can imagine that HTML isn’t suitable, but I don’t know CSS very well.

As this MND course* on CSS suggests, we can embed pre-defined text in what I call the "dialog box" of the search bar box.

I’m pretty sure it’s possible to embed a background image in this search bar ( either in .PNG or .SVG format, but I’d prefer to use the vector format if possible ).

But as for the "variable", "attribute" or "property", I don’t know which to use or how to formulate it in my code to make it work.

*https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/search

I don’t have the code acec me at the moment but from memory I had something like this in my CSS :

.image-searchbar{
to get the URL of the image I stored it on a server and retrieved the link that belongs to it.

I’ll update this post as soon as I get my code back.

Tags:

2

Answers


  1. 0

    Simple with:

    input {
  background-image: url("filename.svg");
}

    like so:

    label {
  display: block;
  font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}


/*the code you need*/

input {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a0/Svg_example1.svg");
  background-position: 0;
}
    <label for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q" />

<button>Search</button>
    Login or Signup to reply.
  2. 0

    .search-bar {
    background-image: url(‘path to your image’);

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search