What is the best way to have a web page’s body text scroll over a banner’s image? Here is an example page I really like and would like to emulate: http://londonfog.tonicsiteshop.com/#cta
I want my banner to have its height set and position fixed, not at the top but at a location I choose under the Navbar.
Any ideas, suggestions, advice is certainly welcomed.
Kind of like what you see about 2/3 of the way down on this page?
Yes, Printninja, exactly (you have an impressive site, BTW). I’ve gotten a basic scroll-over to work but it needs refinement since the background image doesn’t display on my iPhone’s Firefox, Safari or Chrome - it does display in Puffin but the background image scrolls with the page (seems like the ‘background-attachment: fixed’ attribute isn’t working on mobile devices). Please see: http://statecollegedev.com/taliya to review. Hopefully, you can help me get a better understanding of how to get this to work smoothly on all devices?
UPDATE: To get the over-image scrolling to work on my iPhone, I’ve added
link href=“styles/style.css” rel=“stylesheet” media=“screen and (max-width: 480px)”
to the header on the page and:
@media only screen
and (min-device-width : 480px)
and (max-device-width : 1024px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-attachment: initial;
}
}
to the style.css attached to the page. Made no difference - the background image still does not display in Firefox, Safari or Chrome. It still does display in Puffin but scrolls with the page.
Has anyone figured out how to have over-image scrolling to work on a cell phone?