Trying to clean up CSS3 striped background

I am trying to get an alternating striped background on this site, but every other border is heavier since the line is duplicated. How can I get them all like the first one? http://kickinkaratesystems.com/

Would you mind describing the problem again? I don’t see any striped lines on this page.

Well, I kinda jacked up the layout a bit but you can still see in this screenshot http://d.pr/i/lRPw

I think theres also something causing some white space on the right :confused:

Trying to align content with a background like that is quite hit and miss and not a good idea. My suggestion would be to organize your page into “full width bands”. Then you can target each one individually, placing gradients where you need them.

The horizontal lines with vertical gradients render as desired in Firefox but render as your screenshot shows in webkit browsers. I don’t know why.

As far as layout techniques go, I’m with Ralph on this one. Trying to arrange content over a background image is asking for problems especially if one considers fluid behavior and users who change their font size to anything other than your design.

For anyone else who wants to give this a shot, this is all it takes to demonstrate the problem:


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1188489-Trying-to-clean-up-CSS3-striped-background
2014.01.25 20:03
satori83
-->
    <style type="text/css">

*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

#wrapper {
    height:1200px;
    background:linear-gradient(to bottom, #ECECEC 47%, #BFBFBF 48%, #FEFEFE 48%, #FEFEFE 99%, #BFBFBF 100%, #ECECEC 100%) repeat scroll 0 0 / 50px 50% rgba(0, 0, 0, 0);
    background-size: 50px 50%;
    padding: 0 0 40px;
}

    </style>
</head>
<body>

<div id="wrapper"></div>

</body>
</html>

Thanks guys. I was trying something new and it was definitely feeling like the wrong way to go. I got it fixed up now :slight_smile:

Cool. It may not matter here, but as a general rule, it’s worth adding overflow: hidden to those containers, to prevent scaled up text from hanging out:

.container {
width: 1170px;
[COLOR="#FF0000"]overflow: hidden;[/COLOR]
}