:: CSS. Sustituir imagen por css

En alguna ocasión necesitamos cambiar una imagen por otra en nuestras maquetaciones web.

Existen distintas alternativas, pero una de ellas sería mediante el uso de CSS. 








Por ejemplo, en un portal Liferay 6.2 al añadir el componente: "Búsqueda de contenido web", el aspecto del buscador sería el siguiente:

Para adaptarlo al diseño del portal, podríamos aplicar los siguientes estilos css, en los que se incluye la sustitución de la imagen "de la lupa", por una más acorde a la línea general del diseño:

.portlet-journal-content-search input.lfr-search-keywords {
    height: 61px;
    line-height: 61px;
    padding: 0;
    width: 100%;
    border-color: #e0e5e8;
    text-indent: 10px;
}

.portlet-journal-content-search .lfr-search-button {
    position: relative;
    left: 0;
    width: 80% !important;
    padding-left: 115px;
    height: 61px;
    background: url(/netic360-theme/css/images/search-icon-big.png) scroll no-repeat center center white;
    cursor: pointer;
    background-color: #c30e2e;
    top: -5px;
    
    box-sizing:border-box;
    overflow:hidden;
}

Tras aplicar estos estilos el aspecto sería similar al siguiente: