How to give diferent background for each section like on this website

Discussion in 'HTML & Website Design' started by ketting00, Apr 4, 2014.

  1. #1
    The site is Eshbeata.com

    It has different background and stretched to full page width for each part of the page. Anyone has an idea how to do this.

    I want to create something like this and how do I begin.

    Noted that I know how to give <body></body> fancy background but it's never sophisticated like this one.

    Thank you,
     
    ketting00, Apr 4, 2014 IP
  2. AbstractChaos

    AbstractChaos Member

    Messages:
    58
    Likes Received:
    4
    Best Answers:
    4
    Trophy Points:
    25
    #2
    well you would just create wrapper divs. But be sure to use min-height we don't want any "No fixed-height ass-hattery" to quote a member here

    http://jsfiddle.net/fWfG3/
     
    AbstractChaos, Apr 4, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    NO idea who you could be quoting on that... Nope, none whatsoever... that's my story and I'm shticking to it :p

    Really those ridiculously and absurdly massive images, much less auto-stretching them is what I like to call "gee ain't it neat" BS that has no real business on a website in the first place; when mated to fixed-height asshattery you end up with a design that's fixed size garbage, no chance of EVER being semi-fluid, elastic much less responsive, and on the whole ends up a laundry list of how not to build a website -- no matter how "pretty' it is, as a user it would be useless to me on around 2/3rds the device I browse the web with, and the ridiculous load time thanks to the 1.8 megabytes in filesizes in 69 separate files... pretty embarrassing when there's only 1.6k of plaintext, 6 form elements and nothing I'd even consider a content image.

    WORSE being the inaccessible mess it is thanks to using massive images for CONTENT, one of the chief no-no's of web development. On the whole it reeks of PSD jockey BS and scripttardery -- particularly given what a train wreck the markup is with the gibberish / nonsensical use of numbered headings, pointless DIV and ID for nothing wrapping perfectly good block-level containers, P+strong doing H3's design (either that or all those H3 should be h2), attributes like "target" that have no business in any site written after 1997, numbered headings inside "lists for nothing", incomplete/inaccessible forms, false simplicity thanks to "placeholder is NOT a label" idiocy, robots meta values that don't even EXIST (neither "follow" or "index" actually exists for robots!), meta that nothing actually gives a flying purple fish about...

    Hell even the first line proudly proclaims it's problems -- transitional, which is to say "in transition from 1997 to 1998 coding practices"

    ... and that's without even talking the idiotic jQuery bloat and "scripting for nothing" (not a fan)

    Pretty much same advice I give two or three times a day now, do yourself a huge favor, pitch it in the trash, and start over with a RECOMMENDATION doctype, semantic markup, separation of presentation from content, progressive enhancement, and giving the PSD jockey BS that's pissing all over your accessibility a good swift kick in the junk.

    Since again, people visit websites for the content, not the goofy graphics and goofier scripted nonsense you hang on the content.
     
    deathshadow, Apr 7, 2014 IP
    AbstractChaos likes this.
  4. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #4
    It turns out that this thing is easy to make than it is looking to be. Just position everything on the right css angle :)
    I just never did that and scare of it a little bit at first look.

    And thanks @deathshadow for suggestions. I agree with you mostly.
    My notes though:
    The website is responsive on my devices: Android smartphone, tablet, notebook and PC.
    It is fast loading in 3G, wi-fi and broadband connection.
    The width and the height of those elements shrink accordingly to the devices' screen.
    I'm making a website for an SME. This matches their desired fancy background.
    The trend of one-page website is increasing in popularity today though I think the slider is a bit ugly.
     
    ketting00, Apr 8, 2014 IP