:: 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:

:: Tip CSS. Regla para marcar lo que ocupa un elemento

Únicamente como un detalle para marcar lo que ocupa un elemento cuando estamos maquetando, podríamos aplicarle los estilos css siguientes.
De esta manera, nos ayudará a darnos cuenta de lo que realmente está sucediendo en nuestra maqueta.

outline: 2px dotted red