Image from CSS

Navigation
0

I want to upload an image to a img tag from 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 in this way

I can not get the image to load, I do not know if I'm doing something wrong or I must 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 correctly connected to the style sheet.

    
asked by CesarG 07.12.2018 в 11:21
source

2 answers

1

In the html I recommend replacing: 

<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 trying in Opera and IE

    
answered by 07.12.2018 / 14:34
source
1

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

Now, if you want to place a background image, you can do it directly in a div as follows (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>
    
answered by 07.12.2018 в 19:37
Property value in an html textarea? Error with PERL conditional