Background image, without using background-image

Question

Background image, without using background-image

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (-1 votes)

1

In the code below you'll see the @hugocsl solution for another question mine. What I'm trying to do now is to put in this element a background image without using background-image but with <img> fluid, responsive, so that the centralized text is always proportional to the image.

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.artigo-main {
    height: 100%;
    width: 100%;
    display: table;
    text-align: center;
}
.artigo-content {
    display: table-cell;
    vertical-align: middle;
    background: #fff;
    color: #666666;
    border: 1px solid #F0F0F0;
}
.artigo-inner {
    margin: auto;
    width: 90%;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="artigo-main">
    <div class="artigo-content ">
        <div class="artigo-inner">
            <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo. Praesent eu ex ligula.</a></h3>
            <p>Abril 26, 2018</p>
        </div>
    </div>
</div>

html css

asked by anonymous 23.03.2018 / 15:24

3 answers

1

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.artigo-main {
    height: 100%;
    width: 100%;
    text-align: center;
    position: relative;
}
.artigo-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}
.artigo-inner {
    margin: auto;
    width: 90%;
}

.my-background{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="artigo-main">
    <img class="my-background" src="https://img.elo7.com.br/product/zoom/FBCE34/adesivo-paisagem-praia-decorando-com-adesivos.jpg"><divclass="artigo-content ">
        <div class="artigo-inner">
            <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo. Praesent eu ex ligula.</a></h3>
            <p>Abril 26, 2018</p>
        </div>
    </div>
</div>

23.03.2018 / 15:35

-1

You can inject directly via css you create a class in css looks something like this:

.suaClase {background: url(imagens/imagem.gif) no-repeat;},

So you're shaping the css according to what you need;

23.03.2018 / 15:31

ComboBox Visual Studio Csharp How to change the focus between tabs in a JTabbedPane?

score 1 · Accepted Answer

I would do with position:absolute and put height and width with min- 100% to always occupy the whole size of the Father and maintaining the "aspect ratio"! But to be good, you have to put overflow:hidden in Html and Body (in certain situations it is not possible to do this) .

See example: (display under "All page" to understand better)

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.artigo-main {
    height: 100%;
    width: 100%;
    display: table;
    text-align: center;
}
.artigo-content {
    display: table-cell;
    vertical-align: middle;
    color: #666666;
    border: 1px solid #F0F0F0;
    overflow: hidden;
}
.artigo-inner {
    margin: auto;
    width: 90%;
}
.artigo-inner img {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />

<div class="artigo-main">
    <div class="artigo-content ">
        <div class="artigo-inner">
            <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo. Praesent eu ex ligula.</a></h3>
            <p>Abril 26, 2018</p>
            <img src="http://placecage.com/500/500"alt="">
        </div>
    </div>
</div>