CODEWITHSUNDEEP
htmlcss
Matthew
Matthew

Reputation: 3956

CSS clip not working with absolute positioning

I am attempting to clip a photograph, but I want the photo to be in the same position as if it would be had I not clipped it. The problem is with CSS you need a position:absolute attribute in the css which then covers up data.

For example:

<html>
<head>
<style>
img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>

<img src="w3css.gif" width="100" height="140">
this is some text
</body>
</html>

This code covers up the "this is some text" text with the clipped image.

So I want a clipped image but the text not to be covered up.

Upvotes: 0

Views: 4018

Answers (1)

Weafs.py
Weafs.py

Reputation: 23002

It was because you had not given the topoffset value.

Demo

img {
    position: absolute;
    clip: rect(20px,60px,200px,0px);
}

Values:

clip: rect(top offset, visible width, visible height, left offset)

  1. The first number indicates the top offset - the top edge of the clipping window.
  2. The last number indicates the left offset - the left edge of the clipping window.
  3. The second number is the width of the clipping window plus the left offset(last number).
  4. The third number is the height of the clipping window plus the top offset(first number).

Upvotes: 3

Related Questions