The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS repeating horizontal and separate repeating vertical background

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #31919

    Hello all,

    I have got this working (sort of) but I just want to check with the experts that the way I am doing this is best.

    Basically I have two horizontal bars across the top of the page, one is for the top navigation, the other is for the header, this is 300px high. Below this I have vertical stripes to fill the rest of the page. I then want my content to be in the middle of the screen with a fixed width of 960px.

    I decided to set the body background to repeat the vertical stripes, have a div called top and have it repeat the horizontal and then use a container with auto margins to center it but give it a top margin of -300px to bring it back up to the top.

    Would this be the best way to achieve what I want, or is there a more fancy way to do this?

    Another issue I had which is totally off this topic is banding with the two horizontal bars, I created the graphics using a gradient, some shadows and some lighting in photoshop. The only way I can get this to look any good is to make it one pixel and repeat, but by doing this I lose some of the shadow and gradient effects. The only way I can see to get around this is to create a graphic that is maybe 2400px wide to cover all screen resolutions but when I do this I then have problems with the content graphics blending in on top as I have no way of knowing what position the header graphic will be at. I can’t use transparent png as I know for a fact that some viewers will be using older browsers.

    Thanks in advance.

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.