What's the HTML / CSS for creating responsive pages with billboard backgrounds?

What are the HTML / CSS techniques for creating pages like https://findery.com/ where they get a particular image, headline, and some text (and a call to action) to be so well sized within the browser window so that each item appears to take up exactly one set of screen dimensions?

It's like a vertical slide show. I want to know how to do it!
LVL 32
DrDamnitAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
It's called parallax - there's plenty of examples online, just google parallax theme
Bits inbetween are just using css animations
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
You want to be careful with parallax effects it can really screw up a page if you over do it.  The link you post is a page that is pretty well written with just a few minor validation issues.  As you start to play with the effects and incorporate them, validate at each step, because if you introduce any structural errors in the markup; the instability will make the effects unpredicable especially across multiple device types.

Cd&
0
DrDamnitAuthor Commented:
I am more interested in the specific css that is used to create the effects. I have Play with a few different varieties of them and I never seem to be able to get to the image to go all the way to the edge of the screen.And I can't really decide if it's truly responsive to the dimensions of the currentviewport or is itjust properly size so it appears that way.

What are the specific CSS elements that I should be looking at in order to create these effects?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

GaryCommented:
The main css is

    background-position: center center;
    background-size: cover;

Which centers the image horizontally and vertically and sets it to cover the whole element.
0
DrDamnitAuthor Commented:
Cover the CSS element that I was using, but for some reason I wasn't able to get it to go to the edge of the screen.

While I no longer have that test HTML and CSS file available (otherwise I'd let you look at it)I suspect that I have to have itcoded in a way that it doesn't have too many nested divs.

 does the cover CSS element only expand it to be the background of its container or to the edge of the screen?
0
Ray PaseurCommented:
No points for this, but you might also want to experiment a bit with Twitter Bootstrap.
0
GaryCommented:
The container, if the container is not 100% width then neither will the image, parallax themes always seem to be 100% width at least I've never seen one that isn't
0
Ray PaseurCommented:
And this might be helpful, too.  Try it in different browsers and resize the browser viewport.  Use "view source" to check the HTML and CSS.
http://iconoun.com/demo/grumpycat.html
0
COBOLdinosaurCommented:
Are you using a reset stylesheet that sets margin:0 on the html and body elements? If not you might try that to insure that the problem is not cause by a browser default.

Cd&
0
DrDamnitAuthor Commented:
I'm gonna take what I learned and go ahead and see if I can create one of these pages I'll check back as soon as I have my first draft
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.