css full width background with content div, wordpress

I am using a wordpress theme for my portfolio site and I am trying to recreate an effect that I see many sites using now. Its essentially a full width background image or css background color with standard page width content.

Here is an example: http://themeforest.net/item/vernumresponsive-onepage-parallax-wordpress-theme/full_screen_preview/4843905

Read More

When you go about half way down the page you will see the “Are you ready to buy this theme” section. Its like a page break with content. I want to do that in wordpress, but I don’t need to have the parallax effect. I just need the image background or background color css to break the initial content container, but keep the content inside it confined to that container.

Related posts

Leave a Reply

1 comment

  1. You can use shortcode in your theme.

    Example :

    in your theme :

    function fullWidthBreak_func( $atts ){<br/>
    extract( shortcode_atts( array(
    'content' => 'default content'
    ), $atts ) );
    return "some css to full widht : $content";<br/>
    }<br/>
    add_shortcode( 'fullWidthBreak', 'fullWidthBreak_func' );
    

    in your post:

    some content before<br/>
    [fullWidthBreak content="some content inside"]
    some content after<br/>
    

    Reference :

    http://codex.wordpress.org/Shortcode_API