Home / Questions / 220337
Accepted
CesarG
Asked: 2020-12-08 02:21:52 +0800 CST 2020-12-08 02:21:52 +0800 CST

Image from CSS

  • 772

I want to load an image to a tag imgfrom a css file

The following code is from my HTML

<img class="logo-header" alt="tienda online"/>

and then the css

img.logo-header{background: url("../img/centro.jpg");}

my file folders are structured like this

enter image description here

I can't get the image to load, I don't know if I'm doing something wrong or if I should upload the page to a hostinger and place the image in this way

img.logo-header{background: url("https://www.test.com/img/centro.jpg");}

There are more rules in my CSS file, it is ruled out that it is not connected correctly to the style sheet.

html5

2 Answers

  1. Best Answer

    In the html I recommend you replace:

    <img class="logo-header" alt="tienda online"/>

    By

    <div class="logo-header"></div>

    In the style replace:

    img.logo-header{background: url("../img/centro.jpg");}

    By

    .logo-header {
    background-image: url("../img/centro.jpg");
    width: 200px; /* Definir de acuerdo al ancho de la imagen */
    height: 200px; /* Definir de acuerdo al alto de la imagen */
}

    Another option is to work with the content attribute 

    img.logo-header{
    content: url("../img/centro.jpg");
}

    I did the test and it works correctly in the following browsers:

    • Google Chrome: Version 71.0.3578.80
    • Safari: Version 12.0

    Except:

    • FireFox: 63.0.3

    PS: I missed testing in Opera and IE

    • 1

  2. If your tag <img class="logo-header" alt="tienda online"/>is in the file index.html, the path to your image is: img/centro.jpg.

    Now, if you want to place a background image, you can do it directly in a div like this (and this is just an example):

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <style>
                .logo-header{
                    background: url(img/centro.jpg);
                    background-repeat: no-repeat;
                    background-position: center;
                    height: 300px;
                    width: 100%;
                }
            </style>
        </head>
        <body>
            <div class="logo-header">

            </div>
        </body>
    </html>
    • 1