How would I put a background image behind a gif/animated/transparent image? CSS

HTML & CSS
1

Using this code as an example, how would I put a background image behind a gif/animated/transparent image.

How would I put a transparent image, or gif in-front of a background image?

Code:

html,body {
  height: 100%;
  background: #000000;
  padding: 0;
  margin: 0;

}

body {
  background-image: url("https://i.imgur.com/LLoz1n1.gif");
  background-repeat: repeat;

}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

p {
  font-style: normal;
  font-size: 10vw;
  font-family: georgia;
  margin-top: 0;
  margin-bottom: 0;
  border: 1px solid blue;
  padding: 5px;
}


/* unvisited link */

a:link {
  color: blue;
  text-decoration: none;
  outline: 0;
}


/* visited link */

a:visited {
  color: blue;
  text-decoration: none;
  outline: 0;
}


/* mouse over link */

a:hover {
  color: blue;
  text-decoration: none;
  outline: 0;
}


/* selected link */

a:active {
  color: blue;
  text-decoration: none;
  outline: 0;
}

<div class='outer'>
  <div class='tcell'>

    <p><b><a href="https://www.google.com/" target="_blank">Enter</a></b></p>

  </div>
</div>

Exactly like this but using CSS:

<div style="width:100%; height:100%;background: url('https://i.imgur.com/b7gwf2Q.jpg') ">
	<img src="https://i.imgur.com/LLoz1n1.gif" style="" >
</div>
3

@asasass you can do it this way.

body {
     background-image: url(https://i.imgur.com/LLoz1n1.gif),
     url(https://i.imgur.com/b7gwf2Q.jpg);
     background-repeat: repeat;
}

Make sure to seperate backgrounds by a comma (,) and you can see it live here:

You can find more about CSS background at w3schools at:

1 Like
4

1,) How come 100% height jpg doesn’t go all the way down.
2.) How would I do background repeat on Gif. Html Only

Code

<div style="width:100%; height:100%; background: url('https://i.imgur.com/b7gwf2Q.jpg'); ">
	<img src="https://i.imgur.com/LLoz1n1.gif" style="width:435px height:244px; " >
</div>
5 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>falling sparkles</title>
<!--
https://www.sitepoint.com/community/t/background-image-questions/275634
asasass
-->
</head>
<body style="margin:0">

<div style="width:100%; height:100vh; background: url('https://i.imgur.com/LLoz1n1.gif'),url('https://i.imgur.com/b7gwf2Q.jpg') 50% 50%"></div>

</body>
</html>

Don’t just copy and paste this code. Please “study” it. Change some values to see what makes it work and what breaks it.

1 Like
6

To answer your second question first, you can’t. The gif is not a background image. Your code is also malformed.

Ideally you should use the HTML size attributes

<img src="https://i.imgur.com/LLoz1n1.gif" width="435" height="244px">

and use CSS to resize the image as required.

If you insist on using inline styles, then you need to remember the semi-colon between declarations.

<img src="https://i.imgur.com/LLoz1n1.gif" style="width:435px; height:244px;">

You could try changing the image sizes to 100%, which would stretch the image, rather than repeat it.

Alternatively, you can apply both images as backgrounds. The one you want on top has to be listed first.

.backgrounds {height: 100vh;
	width: 100%;
	background-image: url('https://i.imgur.com/LLoz1n1.gif'), url('https://i.imgur.com/b7gwf2Q.jpg');
	
	}
<div class="backgrounds">
</div>

(You can convert the styles to inline yourself, if that’s how you want them.)

For more on multiple background images: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

If you want the div to stretch the height of the viewport, then using 100vh is the way to do it. (vh units are related to viewport height, in the same way vw units are related to viewport width.)

(Ninja’d by @ronpat. )

2 Likes
7

@asasass: I’ve merged these two topics because they are asking much the same question.

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.