Mudar o CSS para a imagem em dados-bg

Question

Mudar o CSS para a imagem em dados-bg

<div class="item" data-bg="images/demo-images/team_bg_1.jpg">

quero posicionar a imagem usada na propriedade data-bg para o canto inferior direito. Como aplicar CSS para data-bg propriedade.

o tamanho real do image é 900px, o tamanho real do div é 100%,

Ajude a encaixar a imagem no canto inferior direito.

0

html css properties attributes

Author: Roy, 2016-03-12

Source

3 answers

score 2 · Answer 1

Você não pode "posicionar" uma "propriedade" com CSS. Estou a supor que querias ter a imagem em data-bg como fundo para as tuas Divas.

Primeiro você precisa mudar data-bg para style para fazer a imagem aparecer como uma imagem de fundo CSS adequada, como esta:

style="background-image: url(images/demo-images/team_bg_1.jpg")"

Depois disto, poderá usar as regras do CSS para posicionar o fundo e aplicar os estilos que quiser:

.item {
  background-repeat: no-repeat;
  background-position: right bottom;
  height: 300px;
  border: 1px solid red;
}

<div class="item" 
     style="background-image: url(https://placehold.it/900x200)">
</div>

Demonstração JsFiddle: https://jsfiddle.net/

Não tenho a certeza por que você usaria data-bg, você tem algum código JavaScript que processa este atributo de dados? A sua pergunta não é suficientemente clara.

score 0 · Answer 2

Para posicionar a imagem de fundo para o canto inferior direito, use o seguinte css:

background-position: right bottom;

Lembre-se que não pode usar o url da imagem do atributo data-bg em css puro. Para mais informações, ver esta ligação

score 0 · Answer 3

/*==============================
	BG BACKGROUND DATA BG
==============================*/
$('.bg-background-area').each(function() {
  "use strict";
  if ($(this).attr("data-bg")) {
    $(this).css({
      'background': 'url(' + $(this).data('bg') + ')',
      'background-position': 'center center',
      'background-repeat': 'no-repeat',
      'background-size': 'cover',
      'background-attachment': 'scroll'
    });
  }
});

.bg-background-area {
  position: relative;
  margin: 40px 0;
  padding: 50px;
  min-height: 400px;
}

.bg-background-area:after {
  background-color: rgba(10, 0, 0, 0.8);
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.bg-background-area p {
  color: #fff!important;
}

.bg-background-area h2 {
  color: #fff!important;
}

.bg-background-area h3 {
  color: #fff!important;
}

.bg-background-area .container {
  z-index: 1;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="bg-background-area" data-bg="https://cdn.pixabay.com/photo/2018/05/12/00/32/coffee-3392168_960_720.jpg">
  <div class="container">
    <p>Test text ....... </p>
  </div>
</section>