Hiding the top of a background image!

[mattal999]

Hi guys,

 

I have this css:

 

<style type="text/css">
/* Show only to IE PC */
* html .boxhead h2 {
height: 1%;
} 
/* For IE 5 PC */

body {
background: url(images/background.jpg);
font-family: Tahoma;
}

.logo {
margin: 0 auto;
padding-top: 20px;
width: 50em;
}

.logo .padding {
padding-left: 0.8em;
}

.sidebox {
margin: 0 auto;
width: 50em;
background: transparent url(images/sbbody-r.png) no-repeat bottom right;
font-size: 100%;
}

.boxhead {
background: transparent url(images/sbhead-r.png) no-repeat top right;
margin: 0;
padding: 0;
text-align: left;
}

.boxhead ul {
background: transparent url(images/sbhead-l.png) no-repeat top left;
margin: 0;
padding: 20px 25px 10px;
color: #000000; 
font-size: 0.7em; 
font-family: Tahoma;
line-height: 1em;
}

.boxhead ul a {
font-weight: bold;
text-decoration: none;
color: #000000;
}

.boxhead ul a:hover {
color: #3d3d3d;
}

.boxbody {
background: transparent url(images/sbbody-l.png) no-repeat bottom left;
margin: 0;
padding: 1px 25px 15px;
font-family: Tahoma;
font-size: 0.8em;
}
</style>

 

And this HTML:

 

<div class="sidebox">
<div class="boxhead">Home</div>
<div class="boxbody">
	<p>This is a short sample paragraph.</p>
	<p>And another one.</p>
</div>
</div>

 

Now this works OK, all apart from the fact that the images are transparent, and the sbbody-r.png image messes up, because it is too high and continues under the top bar. Here is the example:

 

 

Any ideas on how to clip the top of the sbbody-r.png image in the div to make it stop before it goes too high?

 

Thanks.

[shadiadiph]

looks to me like your image has a top white border have a look at it in an image viewer i recommend irfan view as it has a black background easy to see white borders on.

 

You can't really hide the top of an image you need to remake the image with the correct background color

[Axeia]

http://www.w3schools.com/CSS/pr_pos_clip.asp clipping

 

or http://www.w3schools.com/css/tryit.asp?filename=trycss_background-position_pixel with negative values.

[TheFilmGod]

Clipping background images (and multiple background images) is the holy grail of CSS3. However, CSS3 is not supported for the most part, and therefore it is not a feasible solution at this time. You will need to redo the original graphic.

[mattal999]

I cannot resize the image, as I need it to take up the whole box no matter the height. I don't think you quite understand. I am using this code as a base for the box.

 

The white part is the part of sbbody-r.png that is taking up the whole div. Basically, because it is aligned to the bottom right, if sbbody-r is longer than that height (which it always is, and always will be), then you can see it below the top header bar. If I am not making sense, I can put up a test page.

[mattal999]

Any ideas?

[Ken2k7]

Try margin-top on .sidebox.

[mattal999]

It doesn't work, because sidebox contains all of the other divs, moving them all down.

 

I'll set up a test page, give me a minute.

 

EDIT: Here is the test page: http://www.imuzic.co.uk/cd-test/

[Ken2k7]

You're using the sidebar image to color a background? I suggest an alternate approach.

[mattal999]

But if I felt compelled to do it this way, is there a quick fix? As of now, I cannot find a way to make rounded cornered boxes with transparency that can support a header box too. If you could give me a quick example based on my webpage layout, then I will look into it further.

[mattal999]

[Can't find edit button, accept my double posting apologies.]

 

Never mind, I managed to do it another way with 3 divs. I will update the test page in a moment.