Full width background Images

  • Resolved slamjam

    (@slamjam)


    10 years, 5 months ago

    Hi i try to style your great theme the way i want it.

    I am a css beginner with some basic know-how. And i am sure there is a easy solution for what i want.

    I am using a static front page with the build in frontpage template. Know i would like to have a full-width <div></div> width a full width background image, similar to the front-page banner.

    Example:
    After the front-page banner i have <div>some h2 and some text</div>
    After this sector i would like to have a full-width div with background image or color.

    How could i style this div?

    Until now i know only one way to style it:
    Make the whole theme full-width and resize the divs i don’t want to have full-width. But i am sure there is a better way to make it.

    I know this text is hard to understand as my english is not that good 🙂

    So if you have questions feel free to ask!

    regards
    rude

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter slamjam

    (@slamjam)

    10 years, 5 months ago

    I think i have found a solution. Not sure if it is perfect. Here are the css rules for the div:

    <div style="background: red; width: 158.75%; max-width: 158.75%; margin-left: -29.5%; margin-right: -29.25%;"><div style="margin: 0 auto; width: 90%; max-width: 1200px;">

    Theme Author Anthony Hortin

    (@ahortin)

    10 years, 5 months ago

    If you want a full width background image on the main content area, then all you need to do is add a background image to the #maincontentcontainer style, like so…

    #maincontentcontainer {
  background: url(images/bg.jpg) no-repeat center center fixed;
}

    *Obviously replace images/bg.jpg with your own image url.

    Thread Starter slamjam

    (@slamjam)

    10 years, 4 months ago

    Hi, thx for your answer. I think my question was a bit wrong.

    What i want is not a simple background image.

    I will try to explain (my english is not that good 🙂 )

    I want (only on the static front-page with your front-page template):

    Header, Nav, Banner – no changes
    Maincontent – no changes:
    some <h2>This is my new site</h2>
    some text to explain the goal of my site

    And now it comes:
    To make a break and give some space i would like to have a full-width <div> with other color or with a background- image

    And after that i will go on with some other text and pictures.

    It’s working with the css in my second post, but i am sure there is a better way.

    If you don’t understand mark this post as resolved 🙂

    I will try to find a example page.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Full width background Images’ is closed to new replies.