CODEWITHSUNDEEP
cssimage
dynamyc
dynamyc

Reputation: 1

Positioning images with CSS

I have this code :

<div id="container"> 
<div 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 ?

Upvotes: 0

Views: 166

Answers (2)

thirtydot
thirtydot

Reputation: 228162

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

Upvotes: 2

Wouter van Nifterick
Wouter van Nifterick

Reputation: 24086

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;

Upvotes: 1

Related Questions