The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Absolute Positioning of an Image Reply To: Absolute Positioning of an Image


I would try to absolute position a pseudo-element in relation to the search widget, and use that as a wrapper for a background-image. Something like:

.site-header .widget_product_search {
  position: relative; /* to position the pseudo-element against */

/* pseudo-element: */
.site-header .widget_product_search:after {
  content: "";
  position: absolute; 
  z-index: 2;
  right: -400px /* edit this value */;
  top: -100px/* edit this value */;
  width: 400px /* whatever the width of your background-image */;
  height: 200px /* whatever the height of your background-image */;
  background-image: url(path/to/background-image.jpg);
  background-repeat: no-repeat;
  background-position: center center;