CODEWITHSUNDEEP
htmlcss
panimeri
panimeri

Reputation: 19

How can i see the background image behinde the inpute text in html?

I try to program a site in an HTML form and I need to see my background image behind the input text for example for search. what can I do? I try to set image background but when I add an input text it is white and I can't see bg image behind that Something like this

<html>
 <head>
  <style>
    body {
    background-image: url(example url}#weap{display:inline;}

  </style>
 </head>
 <body>
  <div id="wrap">
   <input id="search" name="search" type="text" placeholder="What're we looking for ?">
  </div>
 </body>
</html>

Upvotes: 0

Views: 55

Answers (4)

Myco Claro
Myco Claro

Reputation: 483

#search{
position: relative;
z-index: 999999;
opacity: 0.3;
}

Upvotes: 0

Roshin Thomas
Roshin Thomas

Reputation: 133

Reduce opacity of input field, so that the background image will get visible through the input field,
in your case use below code

#search{
   opacity:0.5;
   outline: none;
   webkit-appearance: none;
}

Here is the reference for learning more about Opacity attribute:
[link]:https://www.w3schools.com/cssref/css3_pr_opacity.asp

Upvotes: 0

Plenarto
Plenarto

Reputation: 649

Try styling it like this:

input {
   opacity: 0.3;
}

Upvotes: 0

Armin
Armin

Reputation: 1178

You can add opacity to your search field. For example:

#search{
  opacity: .7;
  filter: alpha(opacity=70); /* For IE8 and earlier */
}

Upvotes: 3

Related Questions