Solved

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

Posted on 2014-10-17
10
167 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
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 110

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 110

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

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

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.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

728 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