1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to add crosshatch pattern to header section

Discussion in 'CSS' started by WebDev Solutions, Jun 26, 2015.

  1. #1
    Hi Guys,
    SEMrush
    I'm back again! This time looking for a little help reference; http://www.onefootballforum.co.uk/index.php. We've been led to believe that it's possible to achieve a "crosshatch" or "diagonal lines" pattern over the logo/blue area in our header through CSS, similar to what can be seen here
    https://pixelexit.com/
    Code (markup):
    .

    I have had a play around myself but have only managed to achieve this in the body of the site as opposed to in the header. As many of you know my knowledge of CSS is effectively nil - so I'd be open to either A) help & guidance on how to learn to do this myself or B) or an offer to actually carry out the work for a reasonable fee.

    Thank you in advance :).

    All the best,
    WebDev
     
    Solved! View solution.
    WebDev Solutions, Jun 26, 2015 IP
    SEMrush
  2. #2
    The way you'd probably do it with CSS3 is by using linear-gradient property and its derivatives. The problem with this property is that it's very unstable and should be avoided whenever possible.
    If you crave diagonal stripes that much, just make a 10 by 10 image or so and background-repeat it. It's far more reliable, gives you more design possibilities and it degrades gracefully if you set a fallback background color.
    That website you included uses a background image, not css3.
     
    Phil S, Jun 26, 2015 IP