CODEWITHSUNDEEP
htmlcss
Jayy
Jayy

Reputation: 49

Text over Images

Hi this is my first time making a website from complete scratch and I'm trying to make my site have changing background pictures without actually being the background-image (because I didn't know how)

The problem is I can't get Text to appear ONTOP of the images, I'VE TRIED EVERYTHING GOOGLE.COM HAS LINKED ME TO.

How do I put the images in the back so far to the point where anything automatically appears over it, while keeping it in the center?

HTML Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>Home</title>
        <link href="css/background.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

<p>This is the content for Layout P Tag</p>

    <img src="4.jpg" style= "height: 100%; width: 100%" align="absbottom">
    <img src="3.jpg" style= "height: 100%; width: 100%" align="absbottom">
    <img src="2.jpg" style= "height: 100%; width: 100%" align="absbottom">
    <img src="1.jpg" style= "height: 100%; width: 100%" align="absbottom">

    </body>
</html>

CSS Code

body img {
  position:absolute;
  max-width: auto;
   height: auto;
}

.radio {
    position:absolute;
}

@-webkit-keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

body img {

    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;

  -webkit-animation-name: imgFade;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 64s;

  -moz-animation-name: imgFade;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 64s;

  -o-animation-name: imgFade;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 64s;

  animation-name: imgFade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 64s;
}
body img:nth-of-type(1) {
  -webkit-animation-delay: 48s;
  -moz-animation-delay: 48s;
  -o-animation-delay: 48s;
  animation-delay: 48s;
}
body img:nth-of-type(2) {
  -webkit-animation-delay: 32s;
  -moz-animation-delay: 32s;
  -o-animation-delay: 32s;
  animation-delay: 32s;
}
body img:nth-of-type(3) {
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -o-animation-delay: 16s;
  animation-delay: 16s;
}
body img:nth-of-type(4) {
  -webkit-animation-delay: 8;
  -moz-animation-delay: 8;
  -o-animation-delay: 8;
  animation-delay: 8;
}

Upvotes: 0

Views: 47

Answers (1)

cosmoonot
cosmoonot

Reputation: 2189

You needed a z-index:2 and position:relative on p tag. 

p {position:relative;z-index:2;}

Full code:

body img {
  position:absolute;
  max-width: auto;
   height: auto;
}

.radio {
    position:absolute;
}

@-webkit-keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

body img {

    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;

  -webkit-animation-name: imgFade;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 64s;

  -moz-animation-name: imgFade;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 64s;

  -o-animation-name: imgFade;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 64s;

  animation-name: imgFade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 64s;
}
body img:nth-of-type(1) {
  -webkit-animation-delay: 48s;
  -moz-animation-delay: 48s;
  -o-animation-delay: 48s;
  animation-delay: 48s;
}
body img:nth-of-type(2) {
  -webkit-animation-delay: 32s;
  -moz-animation-delay: 32s;
  -o-animation-delay: 32s;
  animation-delay: 32s;
}
body img:nth-of-type(3) {
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -o-animation-delay: 16s;
  animation-delay: 16s;
}
body img:nth-of-type(4) {
  -webkit-animation-delay: 8;
  -moz-animation-delay: 8;
  -o-animation-delay: 8;
  animation-delay: 8;
}

p {position:relative;z-index:2;border:1px solid #ff0000;}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>Home</title>
        
    </head>

    <body>

<p>This is the content for Layout P Tag</p>

    <img src="http://placehold.it/850x850" style= "height: 100%; width: 100%" align="absbottom">
    <img src="http://placehold.it/850x850" style= "height: 100%; width: 100%" align="absbottom">
    <img src="http://placehold.it/850x850" style= "height: 100%; width: 100%" align="absbottom">
    <img src="http://placehold.it/850x850" style= "height: 100%; width: 100%" align="absbottom">

    </body>
</html>

Upvotes: 1

Related Questions