Change CSS for image in data-bg

Question

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

I want to position the image used in data-bg property to right bottom corner. How to apply CSS for data-bg property.

Actual size of the image is 900px, actual size of the div is 100%,

Kindly help to fit the image in right bottom corner.

score 4 · Answer 1 · answered Mar 12 '16 at 11:22

You cannot "position" a "property" with CSS. I am guessing you meant to have the image in data-bg as a background for your .item divs.

First you need to change data-bg to style to make the image appear as a proper CSS background-image, like this:

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

After this, you can use CSS rules to position the background and apply whatever styles you want:

.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>

jsFiddle demo: https://jsfiddle.net/

I am not sure why would you use data-bg, do you have any JavaScript code that processes this data attribute? Your question is not clear enough.

Good answer. However, in the future we _will_ be able to use an element's attribute as a background image in CSS. See this: http://stackoverflow.com/questions/15734546/using-html-data-attribute-to-set-css-background-image-url#18431942 — powerbuoy, Mar 12 '16 at 11:33
@powerbuoy I know that. I gave a practical solution that works with current standards. Until the `attr()` expression is fully supported, it will be glorious. — Aziz, Mar 12 '16 at 11:37

score 0 · Answer 2 · edited May 23 '17 at 12:15

0

For positioning background image to right bottom corner use follow css:

background-position: right bottom;

Note that you can't use image url from data-bg attribute in pure css. For more information see this link

edited May 23 '17 at 12:15

Community

1
1

answered Mar 12 '16 at 11:22

user3272018

2,309
5
26
48

score 0 · Answer 3 · answered May 15 '18 at 10:10

/*==============================
 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>

Change CSS for image in data-bg

3 Answers3