<div>

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.

3 Answers

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>
</div>

jsFiddle demo:

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.

2

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

/*==============================	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=""></script>
<section> <div> <p>Test text ....... </p> </div>
</section>

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy