Second problem of the evening xD

 

 

Okay, so you can see here, that the featured news, news, and sidebar all share a commonly styled background. I want to be smart, and use the same images for all three, rather than the user downloading differently sized images for each section.

 

I'm struggling of thinking of a clean, friendly way of doing it codewise. Does anyone have any sugestions? I'm sure someones come across something similar before and found a solution =)

 

Matt~

I assume that you are referring to the images in the sections which repeat in different sizes, not the background images (it looks like a plain color).

 

Upload the largest image required and then resize it in the other divs to a smaller size:-

 

<img style="width: 123px" src="image.jpg" alt="image description"/>

 

The height will automatically resize in proportion.

No, I can't simply stretch the background image/images like that.

 

And the background does have slighty curved corners, and a double border sort of.

 

Anyway, I'm thinking a 4 way sliding doors css effect, but not sure how to pull it off. Any ideas?

Anyone? This'll be the finish to the coded version of the template =)

I'm still not sure which background images you are referring to. The three main sections seem to have a light gray plain color background.

 

Background images cannot stretch. You have to use a normal image (which you can stretch or resize with % or px width) or use a background image that is big enough to cover the largest screen resolution people are likely to use (1920px wide) and center it so that at least the center part shows in smaller resolutions.

 

If you are referring to the three gray sections then you could make one background image to cover all three sections by putting it in a containing div.

Let me rephrase the question. In the first post there is an image. If you click on it and see the image full sizes, you'll see that the white areas have a slight gradient and border around the outside, aswell as very slightly curved corners.

 

How would you go about applying this background to the three areas using background images, with the least load time (images and code) possible, whilst allowing for them to stretch vertically(very important) and horizontally(not such a priority).

 

Does that help? =)

You could create four very small corner images (the same image rotated for the other three corners) which are not background-images and float them into the corners. You then have a very small width and height horizontal background-image for the middle of the top and bottom which uses repeat-x and a very small vertical background-image with repeat-y for the sides.

 

See item 12 here:-

http://www.wickham43.net/specialeffects.php#shadows

which uses this principle and it will then be flexible in width and height because the corners are separate and the sides, top and bottom have repeating background images.

 

The first green and yellow example in item 12 is fixed width but the lower example has % and is totally flexible in width and height (although you can't test the height flexibility without adding more content).

 

You have to nest divs one inside the other to drag down the border background images to the bottom of the content.

 

However, it uses more code than you probably have at the moment but very small size images, four tiny corners and tiny horizontal and vertical background images.

 

It may not be worth the effort.

Surely the smaller images and more code more than outweighs 8 or so large images to do the three boxes.

 

I'll go for it =)

Anyway, I'm thinking a 4 way sliding doors css effect, but not sure how to pull it off. Any ideas?

 

http://www.cssplay.co.uk/menus/shrinkwrap_menu.html

 

Shrink wrapping

 

Or you could just use css3 border radius for the curved corners, and then wrap an extra div around to create the second border. (this way wouldn't use any images, and it's very versatile with only a slight bit of code clutter, however css3 doesn't work in older browsers, theirs javascript alternatives to enable border radius in older browsers however).

Your my hero. Second idea works a treat <3

 

Cheers man. I'd got it working with images, but it wasnt what my original hope was. Yours is better than my original aim xD