Replacing a Logo using CSS-CodePudding

My problem is that it doesn't replace the logo itself, I have been trying to solve this problem for a few days now during some of my spare time (I am new, hence why it has been so long).

Not sure how to solve this problem.

Code and Image below to provide more detail:

.navbar-brand {
    width:200px;
    height:200px;
    box-sizing:border-box;
    padding-left: 200px;
    /*width of the image*/
    background: url(https://web.archive.org/web/20180921071933im_/https://www.rolimons.com/images/logo-56x56.png) left top no-repeat;
}

The first R logo is supposed to replace the second R logo, instead it creates a separate one

CodePudding user response：

Without seeing your HTML my guess is there is a child element inside .navbar-brand. So when you add the background image and padding-left you are making room for your new logo but the old one is still there.

If you inspect the logo area I bet you have an img element, another element, or a pseudo element that you have to style or hide like one of these:

Style:

.navbar-brand .some-other-element-class {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    padding-left: 200px;
    /*width of the image*/
    background: url(https://web.archive.org/web/20180921071933im_/https://www.rolimons.com/images/logo-56x56.png) left top no-repeat;
}

Hide:

.navbar-brand img {
    display: none;
}

.navbar-brand::after {
    display: none;
}

Edit

I think you're site is https://www.rolimons.com/ based on the image url, if so then my assumption that there is an img tag as a child of .navbar-brand is correct.

If you want the "new" logo to replace the old one you can use the hide technique above, BUT replacing the img src would probably be the better path forward if you can change that.

CodePudding user response：

If You want to replace the logo with CSS you can hide the old logo image and set the new logo image as a background image.

<div id="logo_outer">
  <img src="Logo.png">
</div>


<Style>
#logo_outer {
    width: 200px;
    height: 200px;
    background-image: url(img url );
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
}

#logo_outer img {
    display: none;
}
</style>