CODEWITHSUNDEEP
htmlcssimage
user1954217
user1954217

Reputation: 39

How to display a background image larger than the actual div size?

I want to display image larger then the actual div size and scroll it inside the div.

The image should be behind the div and part of the image are hide.

To view all the image i should scroll it.

demojsFFidle

<div id="wrapper">
    <img src="http://i53.tinypic.com/2ymznmx.jpg" width="100" height="100" />
</div>

#wrapper {
  border: 1px solid black;
  width:80px;
  height;80px;
  margin:10px;
  z-index:4;
}
img {
    border: 1px solid red;
   display: inline-block;
}

many thanks.

Upvotes: 0

Views: 1505

Answers (3)

BlackCursor
BlackCursor

Reputation: 1492

You may add overflow:auto; to the #wrapper div. This way, the scroll bar will be shown only when it is needed.

You may add overflow:hidden; if you do not want to show the scroll bars at all.

JSFiddle : http://jsfiddle.net/BZeLR/30/

Upvotes: 0

user1846747
user1846747

Reputation:

To display the image behind the div... try using z-index property...and also add a scroll to your css...

something like...

your_css {
z-index:2;
overflow:scroll;
}

might help...

Upvotes: 0

Anonymous
Anonymous

Reputation: 1979

add overflow: scroll; to your div. This will allow the user to scroll inside of the div to view the background.

Upvotes: 1

Related Questions