How to prevent image moving when resizing window
Question
Im currently developing this site http://digitalgenesis.com.au/projects/sister/music.html
What happens when i re-size screen is that it eventually collides with the div contents holding page title and then jumps down a line into the wrong position
http://digitalgenesis.com.au/projects/sister/img/screen.png
What i'd like to do is have it stop just before it hits the text on the page
Can anyone offer suggestions on how to do this
Here is the html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<title></title>
</head>
<body>
<div id="wrap">
<div id="musicbox">
<div id="musicheader">Music</div>
<div id="musicline"></div>
<div id="musiccontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan nunc vel odio faucibus euismod. Nulla semper lorem vel risus volutpat congue. Sed eleifend velit eget mauris luctus in imperdiet eros ultricies. Ut et gravida ligula. Vestibulum placerat placerat bibendum. Vestibulum pretium mollis arcu, et pharetra est sagittis sed. Vestibulum facilisis elementum urna vel fermentum. Vestibulum id metus at magna tristique ornare in id lorem. Nulla rhoncus, neque ac scelerisque varius, felis enim convallis ipsum, sed auctor libero dolor in ligula. Vivamus rhoncus, sapien non feugiat tempus, tortor enim euismod dolor, ac placerat ante enim sed diam. </div>
</div>
</div>
<div id="musicimg"><img src="img/katrina.jpg" alt="#" /></div>
</body>
</html>
And the css is
@font-face {
font-family: 'CodeLightRegular';
src: url('../fonts/code/code_light_copy-webfont.eot');
src: url('../fonts/code/code_light_copy-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/code/code_light_copy-webfont.woff') format('woff'),
url('../fonts/code/code_light_copy-webfont.ttf') format('truetype'),
url('../fonts/code/code_light_copy-webfont.svg#CodeLightRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#wrap{width:960px; margin:0 auto;}
#musicheader{font-size:120px; font-family: 'CodeLightRegular'; }
#musicbox{float:left; width:519px; }
#musicline{height:4px; background:black; }
#musicimg{float:right; width:441px; }
#musiccontent{width:120%;}
#clear{clear:both;}
2 answers
solution1
0 ACCPTED 2011-07-05 04:00:02
a HTML5 solution would be to use media queries to style the page differently depending on width:
<link rel="stylesheet" type="text/css" media="screen" href="css/base.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 960px)" href="css/main.css" />
in your base.css you would have all the common styling plus any styling for smaller screens. In your main.css you would have overrides for the larger screen.
(In other words you need to design your css with the small screen in mind first and then add css to make it look nice on larger screens.)
UPDATE:-
For example try:
@media screen
{
body{
background-size: 0;
}
}
@media screen and (min-width: 645px)
{
body{
background-size: 20%;
}
}
@media screen and (min-width: 960px)
{
body{
background-size: auto;
}
}
solution2
0 2011-07-05 04:04:22
as dan said you can use it as a background image with background-position; top:0; right:0; no-repeat background-position; top:0; right:0; no-repeat background-position; top:0; right:0; no-repeat & said your want that the text is not overlap the image for that you can give min-width
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.