Solved

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

Posted on 2014-10-17
10
153 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 500 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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 109

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 109

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

776 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