I am writing an Esri JavaScript API application and would like to replace the Esri logo with my client's logo. I have found that using logo.med allows me to replace the logo, however, there are size dependencies in the API that I cannot change. I would like my logo size to be about 85px x 29px. Here's an example of the image that I am using which appears incorrectly at the bottom right of the map. This incorrect because the image shows up 4 times. I am using .logo-med
to change the logo. How can I set the CSS so that I can use the image at any size that I prefer?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Create web map from id</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } body { background-color: #FFF; overflow: hidden; font-family: "Helvetica"; } #rightPane { background-color: #E8E8E8; border: solid 2px #B8B8B8; margin: 5px; width: 20%; } #map { background-color: #FFF; border: solid 2px #B8B8B8; margin: 5px; padding: 0; } .esriLegendServiceLabel { display: none; } #search { display: block; position: absolute; z-index: 10px; top: 25px; right: 1025px; } .logo-med { background-image: url('capture2.png') !important; } </style>
Geoffrey,
Can I see how you are adjusting the css to apply your logo?
Geoffrey,
So you need to override the .logo-meds height and width as well then:
.map .logo-med {
display: inline-block;
vertical-align: bottom;
width: 65px;
height: 36px;
z-index: 30;
background-image: url("../images/map/logo-med.png");
cursor: pointer;
_background-image: none;
}