Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2014-10-17
10
Medium Priority
?
185 Views
Last Modified: 2015-02-09
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!
0
Comment
Question by:DrDamnit
  • 3
  • 3
  • 2
  • +1
10 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40387380
It's called parallax - there's plenty of examples online, just google parallax theme
Bits inbetween are just using css animations
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40387438
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
 
LVL 32

Author Comment

by:DrDamnit
ID: 40387441
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

by:Gary
ID: 40387454
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
 
LVL 32

Author Comment

by:DrDamnit
ID: 40387462
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
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40387465
No points for this, but you might also want to experiment a bit with Twitter Bootstrap.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40387470
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
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40387472
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40387492
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
 
LVL 32

Author Comment

by:DrDamnit
ID: 40387530
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

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question