WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > How to make a feature background strip with CSS?

Reply
  Thread Tools Display Modes
Old 14th October 11, 07:38 PM   #1
Jessels
WLC Member
 
Join Date: Nov 2010
Posts: 3
Default How to make a feature background strip with CSS?

Hi guys!

I was wondering what would be the best way to create a feature strip of background for a fixed centered layout? Here is a website example (the colourful bokeh background) showing what I would like to have:

http://hunterchang.com/

The first approach that comes to mind would be to create an absolute positioned div with a feature background and place behind the fixed layout. Buuut this means the feature background doesn't adjust with the rest of the layout when the browser is resized (as it does in example website above). The example website's feature strip has some sort of background scaling on it maybe?

Does anyone have any ideas on how to make a similar feature strip like in the example shown?

I would be very thankful for any help!
Jessels is offline   Reply With Quote
Old 15th October 11, 03:42 AM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,715
Default Re: How to make a feature background strip with CSS?

To do that, just use one container to hold the entire thing, and then another to hold the content (If necessary) The top level one has your background which is bigger than most screens, therefore zooming out just shows more of it.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 15th October 11, 07:26 AM   #3
webdesigner
WLC Member
 
webdesigner's Avatar
 
Join Date: Oct 2011
Location: Bangalore, India
Posts: 10
Default Re: How to make a feature background strip with CSS?

Use two divs for this. Outer div hold the background image. Use a background image of width: 2000px (which will cover almost all big screens). And the inner div for your content.
__________________
*-*-*-*-*-*-*-*-*
Libin (webdesigner)
Powered by:
Pixels, Colors & Codes

Last edited by meesa; 15th October 11 at 08:26 AM.
webdesigner is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:48 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.