Make image over div, like stamp


Make image over div, like stamp



I have div and want to put image like stamp to right top corner over div



Here is code what I already done




.package-item-header {
margin-top:20px;
margin-left:20px;
width: 200px;
background-color: #efefef;
text-align: center;
font-size: 24px;
position: relative;
padding: 20px;
}
.package_stamp{
height: 30px;
width: 30px;
background: url('https://i.imgur.com/bPR0GVD.png') 50px no-repeat;
background-position: center;
position:absolute;
top:0;
right:0;
}




GOLD
</div>



But it's just put it to right bottom corner of div, not over div.



How I can make it like this, but with transparent background?



Screen




3 Answers
3



You can move the image over its parent by using negative top and right values in combination with position: absolute. overflow:visible ensures the image to be visible beyond the parent's borders, but is not neccessary in this case.


top


right


position: absolute


overflow:visible



I also added background-size: cover in order to make the background-image fill out the element.


background-size: cover




.package-item-header {
margin-top: 20px;
margin-left: 0;
width: 200px;
background-color: #efefef;
text-align: center;
font-size: 24px;
position: relative;
padding: 20px;
overflow: visible;
float: left;
}

.package_stamp {
height: 60px;
width: 60px;
background: url('https://i.imgur.com/bPR0GVD.png') 50px no-repeat;
background-position: center;
position: absolute;
top: -20px;
right: -20px;
background-size: cover;
z-index: 1;
}


GOLD

GOLD

GOLD





Yeah, it helps, but if I had 3 columns , I have this imgur.com/a/seFaBk1
– John Doe
Jun 29 at 10:20





ah, z-index, I solve problem
– John Doe
Jun 29 at 10:21



Check this out http://jsfiddle.net/xpvt214o/328587/


.package_stamp{
height: 60px;
width: 60px;
background: url('https://i.imgur.com/bPR0GVD.png') 10px no-repeat;
background-position: center;
background-size: 60px 60px;
position:absolute;
top:5;
right:0;
}





right bottom corner???!!!
– Joseph Stalin
Jun 29 at 10:25




.package-item-header {
margin-top:20px;
margin-left:20px;
width: 100px;
background-color: #efefef;
text-align: center;
font-size: 24px;
position: relative;
padding: 20px;
position: relative;
float: left;
}

.package-item-header:hover .package_stamp {
opacity: .5;
}

.package_stamp{
height: 80px;
width: 80px;
background: url('https://i.imgur.com/bPR0GVD.png') no-repeat;
background-position: center;
position:absolute;
top:-25px;
right:-25px;
background-size: contain;
z-index: 1;
}

img.package_stamp {
border: 1px solid white;
}


GOLD</div>
GOLD</div>
GOLD</div>






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

Opening a url is failing in Swift

Opening a url is failing in Swift breakpointing inside the callback and logging success shows false. I added itms-apps to my plist: LSApplicationQueriesSchemes and put this in my app delegate: func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool { return true } func moreTapped() { let url = NSURL(string: "itms-apps://itunes.com/developer/quantum-productions/id979315877") if #available(iOS 10.0, *) { UIApplication.shared.open(url! as URL, options: [:], completionHandler: {(success: Bool) in }) } else { UIApplication.shared.openURL(url! as URL) } } Are you testing on a real device? – rmaddy Jun 21 at 23:57 I try on a device, get "Cannot Connect to App Store". Device is online ...
Read more

Why is the base type not returned when no generic type specified? [duplicate]

Why is the base type not returned when no generic type specified? [duplicate] This question already has an answer here: I have a code like this: public class A<T extends String> { T field; List<T> fields; public T getField() { return field; } public List<T> getFields() { return fields; } public static void test(){ A a = new A(); String s = a.getField(); List<String> ss = a.getFields(); } } Why when creating A with no generic type getFiled returns String but getFileds returns List<Object> ? A getFiled String getFileds List<Object> I have to define A as A<String> a = new A<>() for this to work properly. A A<String> a = new A<>() Thanks, This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question. By not specifying any generic type, you are decl...
Read more

Why Are You Single?

Video Channel: AsapSCIENCE Why are you Netflix and Chilling by yourself? Get tickets for SIDENOTE PODCAST LIVE: http://www.hahaha.com/en/show/sidenote APPROACHING CUTE STRANGERS IN PUBLIC (Social Experiment): http://pokeclip.com/Jqkx7aeACrs Thanks so much to Ask Kimberly! We have a podcast! Download on iTunes: http://apple.co/2y5xqI0 Created by: Mitchell Moffit and Gregory Brown Written by: Jodre Datu & Rachel Salt Illustrated by: Max Simmons Edited by: Sel Ghebrehiwot Narrated by: Kimberly Moffit FOLLOW US! Instagram and Twitter: @whalewatchmeplz and @mitchellmoffit Clickable: http://bit.ly/16F1jeC and http://bit.ly/15J7ube AsapINSTAGRAM: http://instagram.com/asapscience/ Facebook: http://facebook.com/AsapSCIENCE Twitter: http://twitter.com/AsapSCIENCE Tumblr: http://asapscience.tumblr.com SNAPCHAT US 'whalewatchmeplz' and 'pixelmitch' Created by Mitchell Moffit (twitter @mitchellmoffit) and Gregory Brown (twitter @whalewatchmeplz). Send us stuff! ASAPSCIENCE INC....
Read more