1

I have one background image which has a nice funky red sparkly light design which I am using on all of the webpages, and I have a 2nd funky background I want to use on a the final page. This site is within a Wordpress template. The first red funky background is on all the pages, the final page I want to have the 2nd background image (more gold elements in it) on top of the standard background so that the first background kinda acts like a boarder and just spills to the next page break.

Can someone provide an example of this code in html and css? You can use any two images of your choice as long as both fill up most of the screen with the one on top only a little smaller.

HBchic
  • 15
  • 4

2 Answers2

0

solution:

div {
  width: 300px;
  height: 300px;
  background-image: url("https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  background-size: cover;
  position: relative;
}
div::before {
content: '';
  position: absolute;
  background-image: url("https://image.slidesharecdn.com/lighterdot-140328042229-phpapp02/95/making-your-slides-lighter-9-638.jpg?cb=1434979032");
  background-size: cover;
  top: 15%;
  left: 15%;
  bottom: 15%;
  right: 15%;
}
<div>test</div>
Emy
  • 639
  • 4
  • 13
  • Thank-you. I am trying to now move the text forward on top of both of the background images and it is only on top of the background image which is set behind. I tried to use a z-index for both lines of text. This is an example: /*First line of text*/ .welcome { color: azure; position: center; font-family: copperplate; font-size: 30px; margin-right: 10px; padding: 30px; z-index: 100; } – HBchic Sep 09 '20 at 19:57
  • 1
    you'r welcome .. look at code: https://codepen.io/Em-An/pen/rNedWwp for text style to dynamic center always – Emy Sep 09 '20 at 22:43
-1

You can do it with absolute positioning.

img{
  position:absolute;
}

.img1{
  width:30%;
  height:50%;
 }
.img2{
  width:29%;
  height:46%;
  margin: 0.5%;
}
<img class="img1" src="https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></img>
<img class="img2" src="https://image.slidesharecdn.com/lighterdot-140328042229-phpapp02/95/making-your-slides-lighter-9-638.jpg?cb=1434979032"></img>
Sam
  • 723
  • 5
  • 18