Solved

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

Posted on 2014-10-17
10
141 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
 
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 108

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 108

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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

743 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now