How can apply custom css to the background image-CodePudding

I've got this example from w3school.

<!DOCTYPE html>
<html>
<head>
<style>
body  {
  background-image: url("paper.gif");
  display: flex;
  align-items: center;
  background-size: 705px;
  background-repeat: no-repeat;
  background-position: 95% 50%;
}
</style>
</head>
<body>

<h1>The background-image Property</h1>

<p>Hello World!</p>

</body>
</html>

What I want to do is to add some border around the image which position has been changed by background-position property.

CodePudding user response：

Try this:

<!DOCTYPE html>
<html>
<head>
<style>
section{
position: relative;
}
div  {
  background-image: url("paper.gif");
  display: flex;
  align-items: center;
  background-size: 705px;
  background-repeat: no-repeat;
  background-position: 95% 50%;
  position: absolute;
  height: 600px;
  width: 700px;
  border-bottom: solid;
  border-left: solid;
  top: 0;
  right: 0;
}
</style>
</head>
<body>
<section>
<div><div/>
<section/>
</body>
</html>

It will look like this in the "Try It Editor" on W3Schools website:

CodePudding user response：

First of all as you know you can add border; the property border is a shorthand it will apply a border to all sides, so go for border-bottom and border-left.

With this said you can use the :after selector to put any kind of styles or effects such a responsive animation, motion transitions, borders > glow borders or better yet borders with neon glow blurry effect.

If you are interested on going deep with these kind of animations i would suggest you to try a library specialized on animation, such as anime.js or framer-motion.