CODEWITHSUNDEEP
htmlcssimagebrowserzooming
user2781756
user2781756

Reputation: 13

Picture moves when browser zooms

I'm new to HTML and CSS, and also new on this forum. I have some trouble with the browser zoom function. I want to stick an image to the bottem of my DIV, just like I show you in this picture. http://imageshack.us/a/img29/1417/n81h.png

But when I zoom with my browser, the image moves and doesn't line up any more with the DIV's bottom, like here: http://imageshack.us/a/img14/221/vrqd.png

What can I do about it? I've searched a lot but can't find a clear answer. Thanks!

<head>
    <title>Portfolio</title>
    <link href="MyStyle.css" rel="stylesheet" type="text/css" />
</head>

<body style="background:#81DAF5">
    <div>
        <div ID="Page1">
            Welcome at my portfolio
            <div ID="Creative">Being creative is being me</div>
            <div><img id="head" src="head2.png"/></div>
        </div>            
        <div ID="Page2">Random Text 2 :)</div>
        <div ID="Page3">Random Text 3 :)</div>
    </div>        
</body>

}

#Page1{
    font-family:Cartoon;
    font-size:100px;
    text-align:center;
    background-color:#D8D0F4;   
    width:80%;
    height:80vh;   
    border-radius:60px;
    margin: 10vh auto 10vh auto;
    border: 10px solid #FFE1E1;
        
}

    
#Page2{
    font-family:Cartoon;
    font-size:30px;
    text-align:center;
    background-color:#D8D0F4;
    width:80%;
    height:80vh;
    border-radius:60px;
    margin: 20vh auto 10vh auto;
    border: 10px solid #FFE1E1;
}

#Page3{
    font-family:Cartoon;
    font-size:30px;
    text-align:center;
    background-color:#D8D0F4;
    width:80%;
    height:80vh;
    border-radius:60px;
    margin: 20vh auto 0vh auto;
    border: 10px solid #FFE1E1;
}
    
#Creative{
    font-family:cartoon;
    font-size:50px;
}

Upvotes: 1

Views: 4462

Answers (1)

roostaamir
roostaamir

Reputation: 1968

You can use absolute positioning if you want to stick your object somewhere! If you want to place an object somewhere fixed in your parent div using absolute positioning,your parent div should have some kind of position by itself(fixed,relative,absolute)(otherwise the absolute positioning will occur from the body element!!!)

so,in conclusion,you should use position:relative for your Page1 div and then use position:absolute;bottom:0; for the div that has your image in it!

Upvotes: 1

Related Questions