CODEWITHSUNDEEP
htmlcss
martin j
martin j

Reputation: 131

Icon as the background in top right corner

I am working with an image that is part of an error message. I have managed to create everything but one small detail. The icon in the top right corner that is part of the backgrounds of the error message. I have never done anything like this before and I'm working with a responsive design.

I have created a fiddle with the code I have so far and I will later add JavaScript to make the message box close when the X is pressed:

JSFiddle: https://jsfiddle.net/kLw6a8zr/

The picture I am working from:

enter image description here

Upvotes: 0

Views: 798

Answers (4)

Raeesh Alam
Raeesh Alam

Reputation: 3480

You cal also use like this. .net-content class with following code.

.n-content {
    width:100%;
    min-height:120px;
    background: #d45659 url(top-right.png) no-repeat top right;
    box-shadow:0 0 15px 1px rgba(0, 0, 0, 0.4);
    box-sizing:border-box;
    overflow:hidden;
}

Upvotes: 0

mrid
mrid

Reputation: 5796

This might give you an idea :

* {padding:0; margin:0;}
body {
  background-color:#423a4a;
}

.cross-img{
  position: absolute;
   width: 100px;
   height: 100px;
   z-index: 2;
   right: 10px;
   top: -30px;
   opacity: 0.3;
}

.cross-img img{
  width: 100%;
  height: 100%;
  background-color : transparent;
}

.n-wrapper {
	width:60%;
	padding:20px;
}

.n-content {
  position: relative;
	width:100%;
	min-height:120px;
	background-color:#d45659;
	box-shadow:0 0 15px 1px rgba(0, 0, 0, 0.4);
	box-sizing:border-box;
	overflow:hidden;
}

.n-h1 {
	color:#fff;
	font-size:22px;
	border-bottom:1px solid #c04c4f;
	padding:5px 25px;
}

.n-p {
	color:#fff;
	font-size:18px;
	border-top:1px solid #ff686c;
	padding:30px;
}

.n-button {
	width:100%;
	background-color:#fff;
	text-align:right;
	padding:20px;
}

.n-button-white {
	color:#fff;
	outline:none;
	background-color:#bfbfbf;
	border:1px solid #a9a9a9;
	border-radius:4px;
	width:20%;
	min-width:120px;
	margin-right:20px;
	padding:10px;
}
.n-button-red {
	color:#fff;
	background-color:#d45659;
	outline:none;
	border:1px solid #c04c4f;
	border-radius:4px;
	width:20%;
	min-width:120px;
	margin-right:40px;
	padding:10px;
}

.n-close {
  z-index: 50
	font-weight:500;
	color:#fff;
	text-align:right;
	padding:15px 15px 0px 0px;
}

.n-close:hover {
	cursor:pointer;
	color:#f8f4ff;
	
}
<div class="n-wrapper">
	<div class="n-content">
  <div class="cross-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTUYyXH9xufRPuLvuln6MiroZuUJ9rlTaqaJ2mOo0kgEths4JxL">
</div>
		<div class="n-close">X</div>

		<h1 class="n-h1">Headline</h1>
		
		<p class="n-p">
			some text
		</p>

		<div class="n-button">
			<button class="n-button-white">Dicline</button>
			<button class="n-button-red">Accept</button>
		</div>
	</div>
</div>

Upvotes: 0

MJN
MJN

Reputation: 653

Replace .net-content classwith following code

.n-content {
    width:100%;
    min-height:120px;
    background-color:#d45659;
    box-shadow:0 0 15px 1px rgba(0, 0, 0, 0.4);
    box-sizing:border-box;
    overflow:hidden;
    background-image: url(http://i1167.photobucket.com/albums/q627/deskdecode/alert-min_zpsz7khasfs.png);
    background-position: 95% -50%;
    background-repeat: no-repeat;
    background-size: 160px;
 }

updated fiddle

Upvotes: 3

Raeesh Alam
Raeesh Alam

Reputation: 3480

Try this snippet I hope this will help you just changes in class n-wrapper.

.n-wrapper {
  width:60%;
  padding:20px;
  margin:0px auto;
  top : 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
}


* {padding:0; margin:0;}
body {
  background-color:#423a4a;
}

.n-wrapper {
	width:60%;
	padding:20px;
  margin:0px auto;
  top : 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
}

.n-content {
	width:100%;
	min-height:120px;
	background-color:#d45659;
	box-shadow:0 0 15px 1px rgba(0, 0, 0, 0.4);
	box-sizing:border-box;
	overflow:hidden;
}

.n-h1 {
	color:#fff;
	font-size:22px;
	border-bottom:1px solid #c04c4f;
	padding:5px 25px;
}

.n-p {
	color:#fff;
	font-size:18px;
	border-top:1px solid #ff686c;
	padding:30px;
}

.n-button {
	width:100%;
	background-color:#fff;
	text-align:right;
	padding:20px;
}

.n-button-white {
	color:#fff;
	outline:none;
	background-color:#bfbfbf;
	border:1px solid #a9a9a9;
	border-radius:4px;
	width:20%;
	min-width:120px;
	margin-right:20px;
	padding:10px;
}
.n-button-red {
	color:#fff;
	background-color:#d45659;
	outline:none;
	border:1px solid #c04c4f;
	border-radius:4px;
	width:20%;
	min-width:120px;
	margin-right:40px;
	padding:10px;
}

.n-close {
	font-weight:500;
	color:#fff;
	text-align:right;
	padding:15px 15px 0px 0px;
}

.n-close:hover {
	cursor:pointer;
	color:#f8f4ff;
	
}
<div class="n-wrapper">
	<div class="n-content">
		<div class="n-close">X</div>

		<h1 class="n-h1">Headline</h1>
		
		<p class="n-p">
			some text
		</p>

		<div class="n-button">
			<button class="n-button-white">Dicline</button>
			<button class="n-button-red">Accept</button>
		</div>
	</div>
</div>

Upvotes: 0

Related Questions