Html Question posted in
Some basic documentation can be found here.

Html – position of images with css

okay, im doing one of my first pages with html and css, and look, you know that operagx and the other browser have the normal size screen and the fullscreen when you press f11, the problem here is that my page in the normal size of the browser is in a position, and when i fullscreen obviously it expands, but when it expands, an image that i have on the page is hiding behinf another img, because it is going a little bit to the left, is there some way to fix that? like, to fix the image in one point and it doesnt change?

the purpose is that: there is a girl and on the head of this girl, there are 3 butterflies surrounding her, one on the top, one on the left and one on the right of the head, in the normal size screen she is in the middle of this three butterflies, but when i fullscreen, the butterflies move to the left a little bit and hide behind the girl.

i tried adjusting a lot of width,margin,position and nothing is changing, always that image is hiding, you know?

Tags:

2

Answers


  1. 0

    Setting the display property of the images to fixed will ensure that the images always stay in the same place.

    selector {
    position: fixed;
}
    Login or Signup to reply.
  2. 0

    I hope you’re doing well.

    Take a look at this code:

    First, we need a container for the image, so I created a container and named it main-image to handle the images.

    <div class="main-image">
    <div class="girl-img"></div>
    <div class="butterfly item1"></div>
    <div class="butterfly item2"></div>
    <div class="butterfly item3"></div>
</div>

    Next, I placed the images inside that container and set their display to block or flex because the default display of an image is inline, and you can’t set width and height on inline elements.

    After setting all of these properties, the butterflies should stay in their respective positions around the girl, even when switching to fullscreen mode.

    Hope this helps!

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .main-image {
            width: 100%;
            height: 100vh;
            position: relative;
            justify-content: center;
            display: flex;
        }

        .girl-img {
            width: 100%;
            height: 100%;
            display: block;
            background-color: green;
        }

        .butterfly {
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: blue;
        }

        .item1 {
            top: 50px;
            left: 50px;
        }

        .item2 {
            top: 50px;
        }

        .item3 {
            top: 50px;
            right: 50px;
        }
    </style>
</head>

<body>
    <div class="main-image">
        <div class="girl-img"></div>
        <div class="butterfly item1"></div>
        <div class="butterfly item2"></div>
        <div class="butterfly item3"></div>
    </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search