CODEWITHSUNDEEP
htmlcss
user3187075
user3187075

Reputation:

How can i set background inside responsive div?

How can i set background inside responsive div?

I want to have inside that div plus sign (font awesome).

Problem is next:

Any ideas?

Thanks.

Upvotes: 2

Views: 73

Answers (2)

ralph.m
ralph.m

Reputation: 14345

If you want the + centered in a square, responsive box, here's how you could do that:

div {
	width: 20%; 
	padding-bottom: 20%; 
	background: url(http://lorempixel.com/output/nature-q-g-640-480-4.jpg) no-repeat; 
	background-size: cover; 
	position: relative;
}

p {
	font-size: 4em; 
	color: white; 
	margin: 0; 
	padding: 0; 
	font-weight: bold; 
	position: absolute; 
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
   	-moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
   	-o-transform:translate(-50%, -50%);
  	transform:translate(-50%,-50%);
  }
<div><p>+</p></div>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div {
    width: 20%; 
    padding-bottom: 20%; 
    background: url(http://lorempixel.com/output/nature-q-g-640-480-4.jpg) no-repeat; 
    background-size: cover; 
    position: relative;
}

p {
    font-size: 4em; 
    color: white; 
    margin: 0; 
    padding: 0; 
    font-weight: bold; 
    position: absolute; 
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    transform:translate(-50%,-50%);
  }

</style>
</head>
<body>

<div><p>+</p></div>

</body>
</html>

Upvotes: 1

DaniP
DaniP

Reputation: 38252

In your case you can use % values on padding and width to keep the aspect ratio relative to the parent, and use some absolute position for the Plus sign:

div {
  width:50%;
  padding:25% 0;
  background:url('http://placehold.it/500') no-repeat;
  background-size:cover;
  position:relative;
}
div > span {
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  height:30px;line-height:30px;
  background:red;color:white;
  width:50%;text-align:center;
}
<div><span>PlusSign</span></div>

Upvotes: 3

Related Questions