Help needed with a website design

[Brodel]

Hiya,

I know little about web design but have offered to put up a one page site for my brother. He sent me this image as a concept.

The problem I am trying to get my head around is how to do the borders of the content. He would like the flower design to be repeated so no matter how wide the browser is, the flower pattern can be seen. If the border between the content and the background was a straight line then it would be simple case of repeating a single flower. However, given that the border is made up of halved flowers, I cant figure out how to do it without either making each side of the content a massive image or having the border overlap the background images and ruin the pattern.

I hope that makes some kind of sense, it's difficult to explain.

[+theblazingangel MVC]

Take the highlighted blocks below, and try using the image-border css property.

[Seahorsepip Veteran]

10sec I'll make a html&css jsfiddle ;)

[game_over]

image-border can't be used in IE i don't think.

If the content width is always the same just create a tiled background image.

[game_over]

is this what you are looking for: http://www.atthewarehouse.co.uk/test.htm

[Seahorsepip Veteran]

http://jsfiddle.net/bFdfh/

image-border can't be used in IE i don't think.

If the content width is always the same just create a tiled background image.

I made a dynamic width version :p though it requires IE9.js for IE8 and below >.> (could be resolved when I make additional elements instead of using :before&:after)

[game_over]

http://jsfiddle.net/bFdfh/

I made a dynamic width version :p though it requires IE9.js for IE8 and below >.> (could be resolved when I make additional elements instead of using :before&:after)

yeah this is definitely better for responsive pages, i'd go with the additional elements.

(ps OP i've deleted the page in my original post you can see it here: https://dl.dropbox.com/u/33447305/test.htm)

[Brodel]

cheers for the replies everyone, I appreciate them. I'm not sure if my explanation wasn't clear enough, or if I misunderstand the answers. I was hoping to have the flower pattern to repeat itself across the page so that no matter how wide the brower is, the flowers go from the content to the edge of the browser window. Is the best way to do this to just use Seahorepip's example and just make the background image a lot wider, for example adding 6 flowers to it width ways? Is that considered good web practice, or is a background image that size not very good?

[game_over]

Ah sorry.

In that case just create a tile from the image

here i have done it for you see attachment

css

body {

background: url('bg.jpg') repeat;

}

example: https://dl.dropbox.com/u/33447305/test.htm

[Brodel]

That is part of my problem though, if I tile the image like that then I don't get the border running down the side of the content.

[game_over]

add

border-left: 8px solid #fff;

border-right: 8px solid #fff;

to the content

example: https://dl.dropbox.com/u/33447305/test.htm

[game_over]

[edit]

if you want a more symmetrical alignment of the tile change the body to this:

body {
background: url('bg.jpg') 50% repeat;
}
[/CODE]

(added 50%)

https://dl.dropbox.com/u/33447305/test.htm

[Brodel]

Thanks, I appreciate the help. The problem with that is that if you look closely at the border in the first post, it joins the flowers together so is different to the other flowers. I know I'm being fussy, I just wondered how it would be done.

[game_over]

If you only want them to join together at the border then non of this will work. you'll need to do a vertical tile for the entire height of the document and then use another tile for the rest of the document.

the last example i showed you was almost there: https://dl.dropbox.com/u/33447305/test.htm

[Brodel]

Yea, I was hoping it might be possible to get them to join at the border. Oh well, cheers for your help, it's taught me something new :)

[game_over]

It can be done it's just not as straight forward as these examples.

[Brodel]

It can be done it's just not as straight forward as these examples.

Do you know where I can find an online tutorial for it, or if the method has a name that I should google?

[game_over]

https://dl.dropbox.c...447305/test.htm

not the best solution.

Another solution would be to create a tile of that and then repeat it vertically down the page in a wrapper property or something, then use the tile background on the body to cover the rest... this way you'll be able to get rid of those extra divs.

[Seahorsepip Veteran]

gimme 10sec I'll add a new version with your request ^^

having them join at the border can be done using overflow and background position hehe.

[Seahorsepip Veteran]

Ok this version will do: http://jsfiddle.net/jPvGe/ ^^

[game_over]

he wants the orange lines to join

[Seahorsepip Veteran]

he wants the orange lines to join

join?

[game_over]

yeah, as well as tile across the rest of the page