Sign in to follow this  

Help needed with a website design

Recommended Posts

Brodel    14

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
+theblazingangel    137

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

post-51082-0-49846600-1357756957.jpg

  • Like 1

Share this post


Link to post
Share on other sites
Seahorsepip    541

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

  • Like 1

Share this post


Link to post
Share on other sites
game_over    719

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.

  • Like 1

Share this post


Link to post
Share on other sites
Seahorsepip    541

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)

  • Like 2

Share this post


Link to post
Share on other sites
game_over    719

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)

  • Like 1

Share this post


Link to post
Share on other sites
Brodel    14

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
game_over    719

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
Brodel    14

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
game_over    719

[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

  • Like 1

Share this post


Link to post
Share on other sites
Brodel    14

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
game_over    719

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

  • Like 2

Share this post


Link to post
Share on other sites
Brodel    14

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
game_over    719

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

Share this post


Link to post
Share on other sites
Brodel    14

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
game_over    719

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
Seahorsepip    541

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
Seahorsepip    541

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

Share this post


Link to post
Share on other sites
game_over    719

he wants the orange lines to join

Share this post


Link to post
Share on other sites
Seahorsepip    541

he wants the orange lines to join

join?

Share this post


Link to post
Share on other sites
game_over    719

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  

  • Recently Browsing   0 members

    No registered users viewing this page.