Sign in to follow this  
Followers 0

Help needed with a website design

23 posts in this topic

Posted

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.

eYxWp.jpg

post-63802-0-83813100-1357749055.jpg

Share this post


Link to post
Share on other sites

Posted

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

post-51082-0-49846600-1357756957.jpg

1 person likes this

Share this post


Link to post
Share on other sites

Posted

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

1 person likes this

Share this post


Link to post
Share on other sites

Posted

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.

1 person likes this

Share this post


Link to post
Share on other sites

Posted

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

1 person likes this

Share this post


Link to post
Share on other sites

Posted

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)

2 people like this

Share this post


Link to post
Share on other sites

Posted

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)

1 person likes this

Share this post


Link to post
Share on other sites

Posted

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?

dxkMf.jpg

Share this post


Link to post
Share on other sites

Posted

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

post-54971-0-06932500-1357818382.jpg

Share this post


Link to post
Share on other sites

Posted

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.

Share this post


Link to post
Share on other sites

Posted

add

border-left: 8px solid #fff;

border-right: 8px solid #fff;

to the content

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

1 person likes this

Share this post


Link to post
Share on other sites

Posted

[edit]

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


body {

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

}

(added 50%)

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

1 person likes this

Share this post


Link to post
Share on other sites

Posted

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.

Share this post


Link to post
Share on other sites

Posted

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

2 people like this

Share this post


Link to post
Share on other sites

Posted

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 :)

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Posted

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?

Share this post


Link to post
Share on other sites

Posted

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.

Share this post


Link to post
Share on other sites

Posted

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.

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Posted

he wants the orange lines to join

Share this post


Link to post
Share on other sites

Posted

he wants the orange lines to join

join?

Share this post


Link to post
Share on other sites

Posted

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

Untitled-4.jpg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.