Image not visible after applying css background color

Question

I can't able to see the image after applying CSS background color.

HTML page:

<html>
    <head>
    </head>
    <body>
        <div class="heading">
            <h2>
                <span>LUMINO</span>ADMIN
                <img name ="messageicon" alt="Messages" src="<?php echo base_url(); ?>img/closed-envelope-circle.png">
            </h2>
        </div>


    </body>
</html>

CSS page:

.heading{
    background-color: yellow;
    width: 100%;
    height: 10%;
    left: 0;
    top: 0;
}
.heading h2{
    margin-left: 25px;
    padding: 15px;

}
h2{
    color: white;
}
span{
    color: skyblue;
}

SCREENSHOTS:

The image should be visible after applying the CSS background color.

does the image color and background color you are applying is the same? inspect the div you will find the image tag, there is a URL of the image click on it. and make sure it is visible. that means your path is correct. if it does not appear then it is path issue. — Sayed Mohd Ali, Aug 01 '19 at 08:22

NvrKill · Answer 1 · 2019-08-01T08:59:47.173

0

Just in case, base_url(); isn't a valid function (if you haven't written one).

you can use $_SERVER['REQUEST_URI'] it gave you the whole link from your Website back in form of an String. In that case you can use the substr to cut the sting in your form you like.

Here is my Examlpe of your code:

<html>
    <head>
    </head>
    <body>
        <div class="heading">
            <h2>
                <span>LUMINO</span>ADMIN
                <img name ="messageicon" alt="Messages" src="<?php echo($_SERVER['REQUEST_URI']); ?>img/closed-envelope-circle.png">
            </h2>
        </div>
    </body>
</html>

If you want to know more about base urls take a look here

Enjoy and have fun ;)

--- EDITS: ---

<html>
    <head>
    </head>
    <body>
        <div class="heading">
            <h2>
                <span>LUMINO</span>ADMIN
            </h2>
            <img name ="messageicon" alt="Messages" src="<?php echo($_SERVER['REQUEST_URI']); ?>img/closed-envelope-circle.png" style>
        </div>

        <style>
            .heading {
                background-color: black;
                width: 100%;
                height: 10%;
                left: 0;
                top: 0;
            }
            .heading h2{
                margin-left: 25px;
                padding: 15px;

            }
            h2{
                color: white;
                float: left;
            }
            span{
                color: skyblue;
            }
        </style>
    </body>
</html>

Perhaps this one is better and you can test it with e sperate file so you don't need to change your original.

edited Aug 01 '19 at 08:59

answered Aug 01 '19 at 08:19

NvrKill

327
2
16

2

_base_url(); isn't a valid function._ Huh? Where do you know that from? Have you seen their code which is not posted here? – B001ᛦ Aug 01 '19 at 08:23
in his case he tries a not shown/not existing function to call. So we should help him so that he will understand and maybe getting better in coding ;) I'm not perfect either and I am open for new infos and strats to code. But I can understand your "perplexity" so in that case I edited the answer ;) – NvrKill Aug 01 '19 at 08:32
But I can able to see the image in the browser without background color – bhuvana Aug 01 '19 at 08:42
can you please show us the whole quell code? so maybe it's an transaction error in the lines before. just put a past2 link or something like that in to your post ;) – NvrKill Aug 01 '19 at 08:48
you also can add ```float:left;``` in to your css file to the h2 tag and put the img tag down below the h2 tag. See my "EDITS" Section of my Answer. – NvrKill Aug 01 '19 at 08:57
The background color is getting filled into the image. I don't know why? – bhuvana Aug 01 '19 at 09:09
In case it seems like you get what you want or what do you want? I don't under stand your problem. If I am right you want to show the images next about in the Div Box or not? – NvrKill Aug 01 '19 at 09:13
Just in case you use a PNG and some white colors may not be white but transparent may make you feel insecure. – NvrKill Aug 01 '19 at 09:21

score 0 · Accepted Answer · answered Aug 01 '19 at 10:45

0

The images might be having transparent background. In this case it will use the container's background color. Apply a background-color css rule to the img to get a color to your image.

.heading img{
   background-color: white;
}

answered Aug 01 '19 at 10:45

XPD

1,121
1
13
26

As I told in my last comment on my answer xD He used a PNG file which is shown white but thats the default color if the preview cant't shwon that it is transparent xD the solution is good but not perfect. If zou want the Image like it was in the preview you shoult edit the PNG file and fill the blanks out. – NvrKill Aug 01 '19 at 14:50

Image not visible after applying css background color

2 Answers2