Home html How to overlay text on an image in html?

How to overlay text on an image in html?

Author

Date

Category

& lt;! DOCTYPE html & gt;
& lt; html & gt;
  & lt; title & gt;
  Nauka.ru - home
  & lt; / title & gt;
  & lt; body & gt;
    & lt; style & gt;
  h1 {text-align: center;}
      h3 {text-align: center;}
    & lt; / style & gt;
    & lt; img src = "https://d626yq9e83zk1.cloudfront.net/files/2017/12/26-770x425.jpg">
  & lt; h1 & gt; Cosmoinfo & lt; / h1 & gt;
    & lt; h3 & gt; Dive into space with us! & lt; / h3 & gt;
    & lt; h2 & gt; & lt; pre & gt; & lt; a href = "http://www.astronews.ru" & gt; News & lt; / a & gt; & lt; a href = "https://www.gismeteo.ru" & gt; Questions & lt; / a & gt; & lt; a href = "file: ///home/danila/program.html" & gt; Main & lt; / a & gt; & lt; / pre & gt; & lt; / h2 & gt;
  & lt; / body & gt;
& lt; / html & gt; 

Answer 1, authority 100%

& lt;! DOCTYPE html & gt;
& lt; html & gt;
  & lt; title & gt;
  Nauka.ru - home
  & lt; / title & gt;
  & lt; body & gt;
    & lt; style & gt;
  h1 {text-align: center; color: white;}
      h3 {text-align: center; color: white;}
      body {background-image: url ("https://d626yq9e83zk1.cloudfront.net/files/2017/12/26-770x425.jpg");}
    & lt; / style & gt;
  & lt; h1 & gt; Cosmoinfo & lt; / h1 & gt;
    & lt; h3 & gt; Dive into space with us! & lt; / h3 & gt;
& lt; h2 & gt; & lt; pre & gt; & lt; a href = "http://www.astronews.ru" & gt; News & lt; / a & gt; & lt; a href = "https://www.gismeteo.ru" & gt; Questions & lt; / a & gt; & lt; a href = "file: ///home/danila/program.html" & gt; Main & lt; / a & gt; & lt; / pre & gt; & lt; / h2 & gt;
  & lt; / body & gt;
& lt; / html & gt; 

Answer 2, authority 50%

Try setting it as a background image via CSS / SASS.

In .sass:

. image {
  background: url ('image / image1.png');
  width: 320px;
  height: 280px; // conditional size
}

In an HTML document:

& lt; div class = "image" & gt;
   & lt; p & gt; Text Text Text & lt; / p & gt;
 & lt; / div & gt;

Answer 3

Option 1, using position: absolute

. container {
position: relative;
}
.container img {
position: absolute;
}
.container p {
color: #fff;
position: relative;
} 
& lt; div class = "container" & gt;
& lt; img src = "https://d626yq9e83zk1.cloudfront.net/files/2017/12/26-770x425.jpg" alt = "" & gt;
& lt; p & gt; Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque, nulla? & lt; / p & gt;
& lt; / div & gt; 

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions