Setting the background to two overlaid background images

HTML & CSS
1

There is a task I am working on where I have to set the background of my site two overlaid background images of the turtle.

The requirement says to
use CSS to set the image to no repeat and place one the images at 20px for x value and 400px for y value and overlay the second image.

This is what I have done:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fourth Document</title>
<style type = "text/css">
    
    /*body, html {
        height: 100%;
        margin:0;
    }*/
    #image1 {
        position:relative;
        background: url("assets/turtle.jpg") center center;
        min-width: 20px;
        min-height:400px;
        background-repeat: no-repeat;    
        background-size:cover;
        /*z-index: -1;*/
    }
    
    #image2
    {
    
        /*position:relative;*/
        background: url("assets/turtle.jpg") center center;
        min-width:20px;
        min-height: 400px;
        background-repeat: no-repeat;    
        background-size: cover;
    }
    */
</style>
</head>

<body>
<div id = "image1"> </div>
<div id = "image2"></div>

</body>
</html>

This is the image of the turtle: https://drive.google.com/open?id=1ZjuU9p_4QhrPBo-eznvOHs3FHxIZmQhG
I don’t know whether I have implemented those requirements right. Can someone point me in the right direction?

Thank you,

Ron

2

You need to be looking at margins, not height and width.

Technically, you don’t really need two divs. One would work, though two might be clearer.

1 Like
3

Hi DaveMaxwell, I played around with the margin but my results are not good.

Thank you for your guidance.

Ron

4

Hi there ron48374,

here is an example…

https://codepen.io/coothead/full/qBdxWLG

…and this is the code…

https://codepen.io/coothead/pen/qBdxWLG

coothead

3 Likes
5

Hi coothead,

Thanks so much for your response.

I see I only need one div.

How can I stick to the requirement of placing one image at 20px for x value and 400px for y value?

but all in all the guidance you sent me is also good.

Thank you,

Ron

6

Hi there ron48374,

you should experiment with this part of the code…

     background-position: 10vw 6.82vw, 0 0;

…which at present has the image on the left at x = 0 and y = 0,
and the image on the right positioned at x = 10vw and y = 6.82vw.

Just change values and observe the effect. :winky:

You might also want to play around with the div element’s width
and height values too. :winky:

Come to think of it, you can play around with all of the values. :rofl:

This is the best way to learn coding methodology. :biggrin:

coothead

4 Likes
7

Hi coothead,

Sorry for the late response. Looking at w3schools I was able to understand what the x and y values mean when you use the background position property. I also plaid around with the height and width values of my div.

Thank you so much for the best advice.

Thank you,

Ron

1 Like
8

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