Adding a search box in front of an image

Hi,

Have you tried using the CSS background-image property.

So let’s say that your search is in a class named “search” and you would like the background image to the same as your mascot, , your CSS would look like:

.search {
background-image: url(https://www.tradeadvisorbarnsley.uk/wp-content/plugins/yith-maintenance-mode/assets/images/mascotte.png) no-repeat;
}

Hope this helps.

Some super useful documentation on the background-image property:
https://css-tricks.com/almanac/properties/b/background-image/

Hi, many thanks for your reply I have taken maintenace mode down so youcan see the areaI wish to add a search box to right where the tradesman are holding the board??

Any ideas??

Still not had much luck with doing this does anybody know the search box code?

Still not been able to add a search box does anybody know the WP search box code I could try with Trisha Cornelius solution?

Macauley

The get_search_form documentation in the WordPress Codex may help you see what the search form HTML should look like when generated.

If you look at the codex link above you will see that either the “searchform” (HTML4 version) or “search-form” (HTML5 version) class is used if you are using the standard get_search_form reference instead of a custom searchform.php in your theme. You can use one of these classes to reference the standard search form in your CSS and style it.

You should be able to apply a background image to it via CSS as mentioned above by Trisha. You may also need to set the width and height of the <form> tag via CSS to the width and height of the image you want to display in it as a background so the form is big enough for the image to display behind the search box.

Hi,

cnc137’s solution should work beautifully. Let us know if you are still having any trouble ??

Hi this is the code I have used however it won’t search the category titles? Any advice…

`<div class=”image”>

<img src=”https://www.tradeadvisorbarnsley.uk/wp-content/uploads/2015/07/search-box.fw_.png&#8221; alt=”Search Box” />

</div>
<form method=”get” id=”searchform” action=”<?php bloginfo(‘url’); ?>/”>
<label class=”hidden” for=”s”><!–?php _e(‘Search this site:’); ?–></label>
<div class=”searchbox”>
<div class=”container-1″><span class=”icon”><i class=”fa fa-search”></i></span>
<input id=”search” placeholder=”Find a tradesman…” type=”search” /></div>
</div>
</form>

By default the category names are not returned in the search results. It looks like the following plugins add that functionality, but I haven’t tested any of them, so use at your own risk.

• https://www.ads-software.com/plugins/search-everything/
• https://www.ads-software.com/plugins/relevanssi/
• https://www.ads-software.com/plugins/category-search/
• https://www.ads-software.com/plugins/search-filter/

There might be other solutions, but hopefully one of the ones above will help point you in the right direction.