Preparation First prepare your page and image, we use this image:
We simply write HTML like this:
| <div id="container"> <img id="logo" src="logo.png" alt="Lee Munroe" /> </div> |
The CSS style might look like this:
| body{background:#999;} #container{ width:960px; background:#fff; margin:20px auto; padding:10px; } |
The following is a preview of the effect:
Set to relative positioning. When we position the logo, we want its position to be relative to the container, so use relative positioning:
| #container{ width:960px; background:#fff; margin:20px auto; padding:10px; position:relative; } |
Position it outside the box Now all you need to do is position the logo, positioning it horizontally so that it protrudes from the container.
| #logo{ position:absolute; left:-15px; } |
Now, we can see that the logo is displayed outside the box.
