CSS conundrum

by 7 replies
9
I would like to do the following, but not really sure how to go about the execution -

I want the homepage divided horizontally into two parts = above the fold and below. I want the top (above the fold) area to have a tiled background image (on repeat) with a slider and the bottom part just a regular background with text.

How do I make sure in the top part, the background image will always span the entire area above the fold, irrespective of the screen size?

Thanks!
#website design #conundrum #css
  • UtterlyWeb,

    You can use the background-repeat property...

    For example, background: url('someimage.png') repeat;

    this will tile the background image to the full div.

    The default value is also repeat, so even if you don't put "repeat", it will still repeat it.

    For more info read this, http://www.w3schools.com/cssref/pr_b...und-repeat.asp
    • [ 1 ] Thanks
    • [1] reply
    • Thanks for the response, Schwarzes.

      I actually had that part down. Myy question is - how do I make sure the top div lays out the background image ONLY above the fold, no matter what the screen size?
      • [1] reply
  • You use two divs: one on the top of the other.
    And the bg image style declaration refers ONLY to the top div. And of course, you define the height of the top div (above the fold)... although you can never ever guess the height of every computer monitor that would visit the site.

    (I would ask an "expert" who can make a fully customized WP site for others :rolleyes: )
    • [ 1 ] Thanks
    • [1] reply
  • You need to use media queries. Same way you think of responsive, it would be vertical responsive.

    Rather then try to explain it here, it's best to give you a link to read more about it at css-tricks.com where you'll find some great examples as well.

    This is commonly used in many creative themes.
    • [ 1 ] Thanks
Join the discussion

Next Topics on Trending Feed

  • 9

    CSS conundrum

    I would like to do the following, but not really sure how to go about the execution - I want the homepage divided horizontally into two parts = above the fold and below. I want the top (above the fold) area to have a tiled background image (on repeat) with a slider and the bottom part just a regular background with text.