Positioning images with CSS_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-10 12:01 出处：网络

I have this code : <div id=\"container\"> <div开发者_JAVA百科 id=\"header\"> logo ...

相关专题：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: