-2

I am trying to put this image as logo so it appears on the top of the page. I have tried to put background-color:transparent; but it's still not mixing well. I only want the text in the image to appear on the page. Can someone please help me? I know I am doing it in a really stupid way.

* {
    margin: 0px;
    padding:0px;
}

body {
    background-color: black;
}

#logo {
    background-color: transparent;
}
  <img src="https://i.stack.imgur.com/3jXRQ.png" id="logo">
domsson
  • 4,553
  • 2
  • 22
  • 40
hghgghhg
  • 1
  • 1
  • 4
  • Your image does have an alpha channel but does not contain any transparent pixels. The background of the image is white. White pixels. There is no way you could see the `background-color` of the page through white pixels. You need to change your image, not your code. That said, I'm gonna vote for *can't reproduce*. – domsson Jul 03 '17 at 12:13
  • Apart from this, what fonts is your logo using? You might be able to pull this off entirely without an image. – domsson Jul 03 '17 at 12:14
  • @domdom So what should I do now if its only image i have ? How to have an alpha channel? – hghgghhg Jul 03 '17 at 12:15
  • Well, that's off-topic for SO. Look up the manual or a tutorial for the image editor you are using. Be creative. – domsson Jul 03 '17 at 12:16
  • @domdom It would be better if you help me besides teeling me"off-topic for SO".Well no worries I will find something else Thanks for your time! – hghgghhg Jul 03 '17 at 12:21
  • I pointed out what the issue is. SO is about programming, your problem is related to graphics editing. Apart from the fact that I'm not good at graphics editing, plus the fact that I have absolutely no idea what program(s) you are using, what skills you have or how the logo came about in the first place, that whole topic *is [off-topic](https://stackoverflow.com/help/on-topic)* according to [the rules](https://stackoverflow.com/help), like it or not. Anyway, here goes my attempt: create a new image, no background layer; add your text; save as PNG with alpha layer. Does that help? – domsson Jul 03 '17 at 12:29
  • Also, I was offering help to find a possible solution that is using no image at all, but you didn't even answer my question in regards to that, see my second comment. I typed up an answer for you anyway. – domsson Jul 03 '17 at 12:44
  • 1
    Hi and welcome to Stack Overflow, please take a time to go through the [welcome tour](https://stackoverflow.com/tour) to know your way around here (and also to earn your first badge), read how to create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) and also check [How to Ask Good Questions](https://stackoverflow.com/help/how-to-ask) so you increase your chances to get feedback and useful answers. – DarkCygnus Jul 03 '17 at 16:32
  • @ domdom I have used fonts for the logo before posting question and it worked.I was just wondering if there's a way to use this image as a logo image .Thanks for your help and time.Sorry if you thought I was being rude! – hghgghhg Jul 04 '17 at 11:48

2 Answers2

0

You could try to use the blend mode, but with this may affect the logo colors too, depending on the mode.

The structure is the following:

.blended {
  background-image: url(url.jpg);
  background-color: color;
  background-blend-mode: mode;

}

There are several modes: : screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity.

But the better idea is to change the logo itself in the graphics editor.

northbridge
  • 3
  • 4
0

As pointed out in the comments, your image does not have a transparent background.
It has a white background. You need to edit your image to have a transparent background.

Alternatively, you could attempt to create your logo entirely with HTML/CSS. Here is an example using just native system fonts. Using @import or @font-face, however, you could actually use the exact fonts that your logo (image) is using. Given the simplicity of the logo, you should be able to faithfully recreate it this way.

body {
    background: #000;
}

#logo {
    font-family: Arial, sans-serif;
    font-size: 40pt;
    font-weight: normal;
    letter-spacing: -1px;
    color: blue;
}

#logo em {
    font-family: serif;
    font-style: italic;
    font-size: 58pt;
    font-weight: bold;
    color: green;
}

#logo span {
    font-size: 48pt;
}
<h1 id="logo"><em>be</em><span>C</span>reative.com</h1>
domsson
  • 4,553
  • 2
  • 22
  • 40