Positioning images with CSS
I have this code :
<div id="container">
<div开发者_JAVA百科 id="header"> logo ...
<div id"main"> some content....
The container width is 960px. So... I want to put after the main section a large image(2000x300px) how I can do this ?
From your comment:
@thirtydot i want the user to scroll horizontally to see the rest of it
I understand what you want now.
You can do this:
<div id="largeImageContainer">
<img .. />
</div>
with this CSS:
#largeImageContainer {
width: 700px;
margin: 0 auto;
overflow-x: scroll
}
Here's a Live Demo showing the idea. You should copy the code from this answer, not my demo.
About overflow-x; see: https://developer.mozilla.org/En/CSS/Overflow-x
How about this?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
#mainSection{
with:960px;
background-image:url(http://mydomain.com/images/bg.png);
background-repeat:no-repeat;
}
</style>
<title></title>
</head>
<body>
<div id="mainSection"></div>
</body>
</html>
You can also specify where you want to image to be, by adding something like this to the mainSection style definition:
background-position:left top;
加载中,请稍侯......
精彩评论