CSS conundrum

by UtterlyWeb

Posted: 11 years ago 7 replies

WEB DESIGN

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!

#conundrum #css

Patrick

11 years ago

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

Signature

Freelance WordPress Developer | Free WordPress Themes | Free WordPress Plugins | Free WordPress Support

{{ DiscussionBoard.errors[7613668].message }}

UtterlyWeb

11 years ago

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?

Thanks
1 reply

{{ DiscussionBoard.errors[7613756].message }}

Patrick

11 years ago

Originally Posted by UtterlyWeb

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?

What do you mean by "above the fold" ?

It would be helpful if you point to a url where your template is.

Thanks

Signature

Freelance WordPress Developer | Free WordPress Themes | Free WordPress Plugins | Free WordPress Support

{{ DiscussionBoard.errors[7614188].message }}

Istvan Horvath 11 years ago

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
Signature
{{ DiscussionBoard.errors[7613799].message }}
- UtterlyWeb 11 years ago
  
  Originally Posted by Istvan Horvath
  
  ... although you can never ever guess the height of every computer monitor that would visit the site.
  
  ..Ergo the conundrum, Istvan
  
  @David, thanks for the information & the link!
  
  @schwarzes : By "above the fold" I meant - What is above the fold? - A Word Definition From the Webopedia Computer Dictionary
  
  Thanks All!
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[7615965].message }}
  
  Patrick 11 years ago
  
  Originally Posted by UtterlyWeb
  
  @schwarzes : By "above the fold" I meant - What is above the fold? - A Word Definition From the Webopedia Computer Dictionary
  
  Alright, I was thinking the same but I thought it would be better to clarify.
  
  I have come across such sites too which want some content above the fold always, irrespective of the screen size. What I do is set the height of the div or the min-height of the div through jQuery using $(document).height()
  
  Read this page, you will get more info about it...
  
  css - jQuery - dynamic div height equal to the height of the whole window - Stack Overflow
  
  Thanks
  
  Signature
  Freelance WordPress Developer | Free WordPress Themes | Free WordPress Plugins | Free WordPress Support
  
  {{ DiscussionBoard.errors[7616256].message }}
David V 11 years ago

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
{{ DiscussionBoard.errors[7613862].message }}

CSS conundrum

Trending Topics

Newbie

How did you turn it all around?

A healthy fascination for Hollywood...

best high quality crypto traffic.

Any thoughts on golf's latest phenom...Scottie Scheffler??