Jump to content



Photo

Help needed with a website design


  • Please log in to reply
22 replies to this topic

#1 Brodel

Brodel

    Neowinian Senior

  • Joined: 25-July 04
  • Location: London UK, we rock on top like a toupee

Posted 09 January 2013 - 16:41

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.
Posted Image

Attached Images

  • Untitled-1.jpg



#2 +theblazingangel

theblazingangel

    Software Engineer

  • Tech Issues Solved: 4
  • Joined: 25-March 04
  • Location: England, UK

Posted 09 January 2013 - 18:44

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

#3 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 23
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 09 January 2013 - 20:25

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

#4 goodbytes

goodbytes

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 09 January 2013 - 20:30

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.

#5 goodbytes

goodbytes

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 09 January 2013 - 20:40

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

#6 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 23
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 09 January 2013 - 20:52

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)

#7 goodbytes

goodbytes

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 10 January 2013 - 09:42

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.c...447305/test.htm)

#8 OP Brodel

Brodel

    Neowinian Senior

  • Joined: 25-July 04
  • Location: London UK, we rock on top like a toupee

Posted 10 January 2013 - 10:39

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?

Posted Image

#9 goodbytes

goodbytes

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 10 January 2013 - 11:48

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.c...447305/test.htm

Attached Images

  • bg.jpg


#10 OP Brodel

Brodel

    Neowinian Senior

  • Joined: 25-July 04
  • Location: London UK, we rock on top like a toupee

Posted 10 January 2013 - 11:49

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.

#11 goodbytes

goodbytes

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 10 January 2013 - 12:05

add


border-left: 8px solid #fff;
border-right: 8px solid #fff;

to the content

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

#12 goodbytes

goodbytes

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 10 January 2013 - 12:10

[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.c...447305/test.htm

#13 OP Brodel

Brodel

    Neowinian Senior

  • Joined: 25-July 04
  • Location: London UK, we rock on top like a toupee

Posted 10 January 2013 - 12:12

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.

#14 goodbytes

goodbytes

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 10 January 2013 - 12:24

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.c...447305/test.htm

#15 OP Brodel

Brodel

    Neowinian Senior

  • Joined: 25-July 04
  • Location: London UK, we rock on top like a toupee

Posted 10 January 2013 - 13:01

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