Background with seamless stretch ... via multiple stories in Omega

Events happening in the community are now at Drupal community events on www.drupal.org.
SunRhythms's picture

hey ... I am trying to get a type of layout created ... what I need is my backgrounds for my different stories to all stretch to the width of the browser window and be seamlessly flexible...
kind of like this
http://www.thinkbrownstone.com/
...
How do I pull this off in Omega...
If it can't be done... How do I do it in drupal ???

Comments

You'd have to set up your

kkuhnen's picture

You'd have to set up your site so that each of your stories has its own zone. Then, there is an option in your theme settings under "Zone and Region configuration", in every zone's configuration options, to "provide a full width wrapper around this zone". This option will create a wrapper div outside of the container-N div (so it does not have a fixed width), and you can apply your background color/image to that wrapper.

Ok I understand that... would

SunRhythms's picture

Ok I understand that... would love to pull it off like this
http://river.se/cases

but how do I do this...

What I need is a site where there is multiple zones and they all stretch to the browser window
yet, side by side, one maybe grid-8 and the other grid-4

You see how these sites below all have a full stretched visible area but its created with an area that sits adjacent to the main visible area and that area stays where it is no matter how much the viewer scrolls downward..... So I guess what I am trying to say is I don't want the 960 wrapper... I want a complete fluid grid. How do I accomplish that?
...
http://regeneratemusicco.com/#url=/
http://futuris.lv/
http://www.medianovak.com/blog/photography/12-gorgeous-websites-with-ful...
...

Omega provides a fluid grid

kkuhnen's picture

Omega provides a fluid grid as well as a fixed one, just change the "Grid system" setting in your theme's settings.

To have a fixed position menu region, I did this here:
http://elife.elifesciences.org/

Just add some CSS to override the default positioning:

#region-menu {
  position: fixed;
  right: 0;
  top: 0;
}

we added a custom background

jowchie's picture

we added a custom background field and pulled that into an inline css in the body...

check it out: http://www.xango.com

Inline css

jjmonterey's picture

What was the reason for applying this css inline rather than in a style sheet?

there is a module for that

florisg's picture

We implemented http://drupal.org/project/backstretch for this.
You can easy integrate the backstretch in your omega theme and use the drupal image fields to have a custom full page or region slide per node. (by tpl)

Omega Framework

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week