Wondering how this site creates their background?

Discussion in 'HTML & Website Design' started by rob33, Feb 3, 2015.

0
  1. #1
    Hi all,

    I'm wondering how this site creates a background like this with the diagonal lines/sections

    ghadvanced.com

    Would like to do something similar but clearly not clued up on my css/html.

    Thanks if anyone has a clue.
     
    Solved! View solution.
    rob33, Feb 3, 2015 IP
  2. incompetech

    incompetech Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    11
    #2
    To me it looks as if each div or section has a CSS background image applied to it.
    Looking at the CSS for the page seems to confirm that idea.
    The designer simply made those backgrounds in photoshop and applied them using css.
    If I'm wrong in regards to this website, you can still easily achieve the same affect by using the CSS background property.
     
    incompetech, Feb 7, 2015 IP
  3. #3
    The developer uses the ::after pseudo element and rotates it.
    
body section#how-does-ghadvanced-work article:after {
  background-color: #ffffff;
  background-position: center center;
  background-repeat: no-repeat;
  content: ".";
  display: inline-block;
  height: 80px;
  left: -10%;
  margin: 0;
  padding: 0;
  position: relative;
  text-indent: -10000%;
  top: 40px;
  transform: rotate(-2deg);
  width: 120%;
  }
    Code (markup):
    cheers,

    gary
     
    kk5st, Feb 8, 2015 IP