seo Question posted in
Some basic information to get you started with this can be found here.

How do I set an image background, using the <img> tag rather than CSS? – SEO

I have created 4 columns. Each column consisting of an image, where I want to place text over each image.

To achieve this, I obviously need to set the image as a background. I am aware that this can be achieve through CSS (which is what I am currently doing) but I would like to place the image as a background, within my HTML file. The reason; so that I can enter the relevant ‘alt’ text for SEO purposes.

How can I best achieve this?

Tags:

2

Answers


  1. 0

    Just put the img in the col container, set that element to position: relative; then use absolute positioning to put the text over the image.

    * {margin:0;}
.col {
  float: left;
  width: 25%;
  position: relative;
}
img {
  display: block;
  width: 100%;
}
.overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: black;
  color: white;
  padding: 1em;
}
    <div class="col">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="overlay">
    <h2>text</h2>
  </div>
</div>
<div class="col">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="overlay">
    <h2>text</h2>
  </div>
</div>
<div class="col">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="overlay">
    <h2>text</h2>
  </div>
</div>
<div class="col">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="overlay">
    <h2>text</h2>
  </div>
</div>
    Login or Signup to reply.
  2. 0 
    #img-as-background {
  position: relative;
  overflow: hidden;
}
#img-as-background .container {
  height: 500px;
  padding: 20px;
}

#img-as-background img {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: -1;
}
    <div id="img-as-background">
  <img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" alt="" />
 <div class="container">
  Overflow text Overflow text Overflow text Overflow text Overflow text Overflow text Overflow text 
 </div> 
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search