Scotty Scotty - 6 months ago 15
CSS Question

Every time I resize my windows on the chrome my images move with it, thus overlapping text

Here is my HTML, and css code:
Sorry If couldn't place the codes any better, but anyways when I re size my browser I always get those pictures to overlap texts, what I want is for those pictures to be fixed so when I re size the browser It doesnt overlap the text, and the pictures would just be moving out of the way to be positioned fixed, because It looks kind of ugly seeing text being overlapped.



#wrapper{
text-align:center;

}
body{
margin-left:auto;
margin-right:auto;
width:1200px;
background-image:url("http://img15.deviantart.net/cbb9/i/2005/258/c/4/paper_texture_v5_by_bashcorpo.jpg");
background-repeat:repeat-y;
background-size: auto;
margin-bottom:100px;
background-attachment:fixed;
font-family:traveling _typewriter;
}
#wipe{
margin-left:auto;
margin-right:auto;
font-weight:800;
border:4px double;
width:900px;

}
*{

text-decoration:none;
color:black;
}
img.img1{
z-index:-1;
width:300px;
height:300px;
margin-left:20px;
margin-top:25px;
position:absolute;
left:0px;
top: 0px;
}
img.img2{
z-index:-1;
width:300px;
height:300px;
position:absolute;
right:0px;
top:0px;
margin-top:25px;
margin-right:20px;
}

<!DOCTYPE html>
<html>
<head>
<title>The 16th</title>
<link rel="stylesheet" type="text/css" href="../CSS/copy.css">
</head>
<body>
<div id="wrapper">
<h1>Welcome to the 16th Infrantry Regiment!</h1>
</div>

<img src="http://webspace.webring.com/people/fc/czechandslovakthings/images/medals/meduk01ca.jpg" class="img1" />
<img src="data:image/jpeg;base64,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" class="img2"/>

<table id="wipe">
<td><a href="">Home<a/></td>
<td><a href="">About Us</td>
<td><a href="">Calendar</td>
<td><a href="">Supply</td>
<td><a href="">Enlist</td>
<td><a href="">Forums</td>
<td><a href="">PERSCOM</td>
<td><a href="">Donate</td>
</table>
<div></div>
</body>
</html>




Shl Shl
Answer

To fix image overlapping add position:relative to your body tag.

Add this to your head tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Comments