Mask an image using CSS

HTML & CSS
1

Hi guys, not sure if I’m dreaming or if this is a realistic request.
Is there a way to mask an image using CSS?

I am setting up a custom wordpress theme. I would like any images that the user uploads in their blog posts to have this grungy/rough edge, which I have created in Illustrator (but could also create in PS if better that way). .

The effect not only roughens the edge but also applies that painted look on top of the image.

Not sure if this is achievable in CSS. There is a javascript plugin edge.js but licence quite limited. Any thoughts? Thanks.:stuck_out_tongue:

2

@ralph.m is on the mark.

By playing around with relative and absolute positioning you can easily accomplish what you are after. Be sure to check out http://www.w3schools.com/Css/pr_class_position.asp if you need a little refresher on how different positioning works.

Good luck!

3

That’s actually very easy with CSS. All you need to do is create the grunge overlay with transparent bits, and position it absolutely over the images. The images would have to have a fixed size, of course.

Perhaps show us the code you are working with the image holder and its dimensions, and we can suggest options.

4

Hey RyanReese & ralph, thanks for your help! So generous of you.

In a stand-alone file I was able to get the grunge appearing on top of the photo using ralph’s code, with just a few tweaks of dimensions. Then I copied the html & css into an existing index page and it worked brilliantly.

So happy! :smiley:

5

Well, what a champ you are! :wink: Glad that worked. These things can get tricky sometimes. Anyway, do post back if you need anything further.

6

Hi whatachamp, I would be more inclined to try something like this:


<div id="mainContent">
    <div id="photo">
        <img src="bordertestimages/P1020018.JPG" width="400" height="287" /><span></span>
    </div> <!-- end #photo -->
<!-- end #mainContent --></div>

Then in the CSS I’d do this:


#photo {
    position: relative;
    height: 300px;
    width: 500px;
    padding: 6px 50px;
}

#photo span {
    position: absolute;
    display: block;
    height: 300px;
    width: 500px;
    background: url(bordertestimages/grunge_frame.png) no-repeat 0 0;
}
7

No other elements need to be absolute positioned, though having a parent that is position:relative’d is often good, because that way the position:relative parent is the containing block for the absolute element, thus not screwing up too much on different resolutions :slight_smile:

If you don’t have the wrapper be a certain height/width, and in this case, there are no non absolute positioned children, then the parent will collapse to 0 height (becuase it doesn’t recognize absolute children are there) and thus you will have overlapping on the page

If you are trying to get things side by side, then don’t use absolute positioninng, that is a job for floats :slight_smile:

8

Thanks alot guys. Its nice to know its possible! I’ve just been playing around with a very simple example, its kind of working but hoping you can provide just a bit more advice.
Does the grunge frame and the photo need to be contained in a wrapper div that has a fixed height & width?
Furthermore are there any ‘rules’ for absolute positioning, ie. do other elements on the page also need to be absolutely positioned or fixed.

Here is my html:

<div id="mainContent">
    <div =id="photo">
    <img src="bordertestimages/P1020018.JPG" width="400" height="287" />
    </div> <!-- end #photo -->
    <div id="grunge"><img src="bordertestimages/grunge_frame.png" width="500" height="300" />
    </div> <!-- end #grunge -->
	<!-- end #mainContent --></div>

Here is my CSS:

#mainContent {
	padding: 0 20px;
	background: #FFFFFF;
	height: 650px; }
#grunge img {
	position: absolute;
	left: 344px;
	top: 183px;
}
#photo img {
	position: absolute;
	left: 400px;
	top: 200px;
}

Note the absolute positioning values are slightly different for the grunge border and the image … this is just what worked to make the border and image line up correctly.
Thanks again!