Image positioning with css for containers/modules

HTML & CSS
1

I have been working on a skin for my dotnetnuke website, the problem i have come across. Is slicing images that have gradients like the attached image named "Plain NoTitle.png. This image has a gradient plus an additional layer of white with a low opacity at the top of the black to dark gray gradient.

I would like to use it for the containers but if i slice it horizontally into 3 images. I have to set the middle image to repeat-y but what happens is this" See attachment ( ss.jpg)" when you use a gradient. So it has become interesting figuring out the slicing and css coding. I would be nice to use the nice gradients for my website. Granted you can use css to produce gradients inside a
but reproducing what i have above in the first image might be hard to do.

Can anyone help shed some light on this problem would be greatly appreciated. Thanks in advance for the help. :slight_smile:

PS: here is the css code i am using::


/* Page */
#page { width: 970px; margin: 0 20px auto; padding: 0; background: none; }
#content_top { background: url(images/content_top.png) no-repeat; width:960px; height:68px;}
#content { background: url(images/content_rpt.png) repeat-y; padding:0; }
#content_bottom { background: url(images/content_bottom-16.png) no-repeat; width:960px; height:49px; }
2

I don’t want the accordion effect that you see in the full layout screen shot, but want the module background to flow from top to bottom like in this screen shot where i removed the repeat-y and set it to no-repeat; width:946px; height: 46px; for the middle image. The middle image is what is causing the accordion effect and not flowing. Like the Image posted below:(

Also notice on the right hand side of the screen shot the “USERS ONLINE” does not fit in the module if you use the no-repeat. I do not want to alter the white glass border that surrounds the module background.

I want to achieve this look but fit the content inside the module.:slight_smile:

3

Hi,

I couldn’t quite understand what you were getting at :slight_smile: I’d need to see how you expect the full layout to look with the background behind it.

If you have a gradient image then you can’t slice it in small segments because you would lose the gradient. Usually you would have the gradient as a single (very tall) image repeated on the x-axis only that fades into a solid colour at the bottom.

If you want the fade at top and bottom then you would need to do it in three stages and separate the top and bottom and then make sure that the repeating middle section is a perfect match for the top and bottom.

Someone else in the forum asked a similar question and I put this demo up here.

http://www.pmob.co.uk/temp/reekdog.htm

Of course if there are repeating elements in the image then it will be difficult to match and that method won’t be much use.

I usually use an image that is about 5px x 1200px (carefully optimised to avoid a big file size). The image fades from top to bottom but the bottom fades into a solid colour and the background color can take over.

Here are some other examples:
http://www.pmob.co.uk/temp/bgimages.htm
http://www.pmob.co.uk/temp/eg-expanding-box.htm

4

Hi,

I may be misunderstanding what you want (or your expectations) but as you are using a small image then it can’t be stretched from top to bottom (CSS2 can’t do that but may be available in css3 for use in a few years time - even then the image would be skewed to fit).

All you can do is repeat it so that means it will always look like your attachment. Your choices are to use a larger image as mentioned above that fades into the background, or engineer the fade on the image so that it can be repeated but would need to have a different sort of fade effect.

Here is an example using your image doctored a little.

http://www.pmob.co.uk/temp/rattlerr.htm

Regarding your other problem of the content sticking out of the div then it looks to me as though you have floated it to the right which means you need to use a clearing mechanism on the parent of the float to contain the floats - otherwise the float just floats out of the parent (see faq on floats). there are many ways to clear floats but if you don;t need visible overflow then just try adding overflow:hidden to the parent that holds the float.

Of course I’m guessing here as I can’t see your html :slight_smile:

5

Ok, here is the full layout of the website and you will see the module i am talking about with the gradient obviously repeating down. Its not a flowing gradient as if it was one gradient, shows as multiple sections.