CODEWITHSUNDEEP
htmlcssimageresizeabsolute
Millet Antoine
Millet Antoine

Reputation: 425

How can we prevent that when I resize my window, my images move using HTML-CSS?

How can we prevent that when I resize my window, my images move ?

when i resize my window my picture moove, the x and y position of my picture are the same but because the window is smaller, the coordinates relative to this window make my image is not at the desired location.

I already look for solutions that use both the positioning in "%" instead of "px" but also with the use of "position: relative;". Unfortunately in my case I can't put this "position: relative;" because to overlay my pictures I had to of the set "position: absolute;".

Here my html code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="menuStyle.css" />
    <title>Antoine</title>
</head>
<body>
    <div id="bloc_page">
        <div>
            <img src="schema.png">
            <img class="top" src="Linkedin.png" width="30" height="30">
        </div>
    </div>
 </body>
</html>

Here my css code:

 #bloc_page
 {
width: 1097px;
margin: auto;
 }

 body
 {
background-color: black; /* Le fond de la page sera noir */
 }

 .top {
  position: absolute;
  z-index: 1;
  bottom:10%;
  left: 80%;
  }

Thank you in advance for you help.

Upvotes: 3

Views: 1571

Answers (3)

Sayed Rafeeq
Sayed Rafeeq

Reputation: 1219

Just you need to add position relative for "#bloc_page" id

 #bloc_page {
    position: relative;
    width: 1097px;
    margin: auto;
 }

Upvotes: 1

Stephan Strate
Stephan Strate

Reputation: 1421

This happens, because your div container with the id "bloc_page" has the static width of 1097px. If you set it to something like this:

     #bloc_page {
        width: 80%;
        margin: auto;
     }

    body {
        background-color: black;
    }

    .top {
        position: absolute;
        z-index: 1;
        bottom:10%;
        left: 80%;
    }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="menuStyle.css" />
    <title>Antoine</title>
</head>
<body>
    <div id="bloc_page">
        <div>
            <img src="schema.png" />
            <img class="top" src="Linkedin.png" width="30" height="30" />
        </div>
    </div>
 </body>
</html>

it will move relative to the browser size.

Upvotes: 1

Dhaval Chheda
Dhaval Chheda

Reputation: 5187

are you looking for a solution like this ?

.top {
    position: fixed;
    z-index: 1;
    bottom: 10%;
    left: 80%;
    max-width: 300px;
    max-height: 300px;
}

If this answer is not what you were after then please explain the problem in a little more detail..

Upvotes: 0

Related Questions