CODEWITHSUNDEEP
htmlcssimage
born2gamble
born2gamble

Reputation: 207

Text on a background image within a container

I want a responsive img with text on top. Ive tried several different ways and I semi-get there with a bunch of kinks when I try to make it responsive, so I appreciate if anyone has a simple solution.

JSFiddle

Code snippet demonstration :

.img-fluid {
  max-width: 100%;
  height: auto;
  opacity: 0.4;
}
<div class="container">
  <img src="https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg?w=620" class="img-fluid">
  <div class="container">
    <h1>Header</h1>
  </div>
</div>

Upvotes: 0

Views: 1004

Answers (5)

Aravind Naraharishetty
Aravind Naraharishetty

Reputation: 1

for an image use the concept:

{
    display: table; 
    position: relative; 
    width: 100%; 
    height: auto;
}

for text to display on image use the concept 

{
    display: table-cell;
    verticl-align: middle;
    position: absolute;
}

and adjust the text on image giving top or bottom or left or right} use the class img-responsive to not to change the width and height of image in all the views.

Upvotes: 0

user7207170
user7207170

Reputation:

You can make use of font-size: calc(2vw + 2vh + 2vmin) (tweak around the values to your need) to make text responsive with respect to viewport size :)

.container {
  position: relative;
}

.container h1 {
  position: absolute;
  top: 0;
  left: 20px;
  font-size: calc(2vw + 2vh + 2vmin);
}

.img-fluid {
  max-width: 100%;
  height: auto;
  opacity: 0.4;
}
<div class="container">
  <img src="https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg?w=620" class="img-fluid">
  <h1>Header</h1>
</div>

Upvotes: 1

Kinnera Reddy
Kinnera Reddy

Reputation: 66

HTML:

<div class="banner">
<img src="images/star.png" class="img-responsive" width="150" height="150" alt="star">
<h2>This is a Star</h2>
</div>

CSS:

.banner img{position:relative; width:100%; height:auto;}
 .banner h2{[psition:absolute; left:50%; top:50%; font-size:30px;
 line-height:30px;}

Upvotes: 0

Manu AVS
Manu AVS

Reputation: 575

Try setting position to absolute or fixed

.img-fluid{
    max-width:100%;
    height:auto;
    opacity:0.4;
    position: absolute;
}

Upvotes: 1

Rutvij07
Rutvij07

Reputation: 375

You can try this , here is the code

<html>
<head>
<style>
.container {
    position: relative;
    text-align: center;
    color: white;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Image Text within container</h2>

<div class="container">
  <img src="abc.jpg" alt="abc" style="width:100%;">
  <div class="centered">Centered</div>
</div>

</body>

Upvotes: 2

Related Questions