1

I'm sure this is correct behavior for the implementation I have, but I'm wondering if theres an easy way to do what I want to accomplish.

I have a background image that is a 3px x 3px pattern.

I want this pattern to repeat-x the full width (100%) of the element its set in, however I only want it to repeat-y for half of the width of the element its in (50%).

I have this implementation:

.element {
    width: 100%;
    background-image: url('/path/to/pattern.png');
    background-repeat: repeat;
}

which successefully repeats the pattern throughout the entire element. To attempt to achieve the 50% repeat-y height, which is what I want, i tried:

.element {
    width: 100%;
    background-image: url('/path/to/pattern.png');
    background-repeat: repeat;
    background-size: 100% 50%;
}

However, the background-size skews the pattern image to 100%/50% height/width instead of keeping the desired repeat effect.

Is there any way to simply accomplish this?

Thanks

bbedward
  • 6,368
  • 7
  • 36
  • 59
  • 1
    Not with background size. You may be able to use multiple backgrounds and using a gradient as the second background. Set the gradient to go 100 opaque at 50% width and it should overlap your other background image. – Leeish May 10 '13 at 14:26
  • 1
    `background-size` resizes the background image itself before it is tiled - it does not resize the area that it occupies by tiling. – BoltClock May 10 '13 at 14:27
  • 1
    Missing `:` in `background-repeat`. – cortex May 10 '13 at 14:29
  • I apologize I just tried to test what I was saying and didn't work as I would have hped. – Leeish May 10 '13 at 14:31
  • @cortex: Furthermore it can simply be left out completely since the default is `repeat` anyway. – BoltClock May 10 '13 at 14:31
  • 1
    Use height:50% in .element class – Sudz May 10 '13 at 14:32
  • height: 50% isn't what I want, essentially i want a background-height of 50% not the entire element. – bbedward May 10 '13 at 14:34
  • The `:` in `background-repeat` isn't the issue, just a typo on my part. The background repeats just fine, i just want it to have a height of 50% essentially. – bbedward May 10 '13 at 14:36
  • @Leeish http://jsbin.com/oniyed/1/edit why do you say that this doesn't work well ? – drinchev May 10 '13 at 15:42
  • Weird, I had basically the same code as you and it wasn't working. I must have missed something when I tried. I thought it was possible that way. – Leeish May 10 '13 at 16:28
  • :) Write this as an answer, since it might be helpful for someone. :P – drinchev May 10 '13 at 16:36
  • @Leeish ,drinchev - Cool solution indeed, I think i'm going to implement this with IE fallback to the accepted answer, thanks. – bbedward May 10 '13 at 17:03
  • Indeed it is. CSS gradients are pretty sweet, except IE9 I think barely supports them, and I've ran into a few situations where it does strange things like move content if the gradient is there. It's weird. I usually just remove the `filter` things for IE and go another route. – Leeish May 13 '13 at 20:47

3 Answers3

1

Make a graphic 3px wide and really tall with the different background below. Or, though more code, make a 'unit' of three divs: the base is a div with whatever other color/pattern you want that will be the 50% of the y. Next in that div is the background repeating to a fixed height and that one is positioned relative to the top of the base. The last div is just the content. Not as pretty as a simple CSS declaration, but it works across platforms and most browsers, even IE6.

kelly johnson
  • 1,596
  • 3
  • 16
  • 26
  • 1
    I ended up making the pattern image tall (to the point where I needed it), and making it repeat-x only. Then to fit into the responsiveness of the page I simply made it change to repeat x and y when the page gets smaller. Seems to be the best and simplest I can come up with. – bbedward May 10 '13 at 15:47
1

How does your pattern look like? This may fulfill your requirements. Instead of using a background to display the PNG, you now use an img element, and set the width to 100% and the height to 50%. Or use a div to benefit from background:

<div id="element">
    <div id="pattern"/>
    <div>I'm at the top!<div>
</div>

The rules:

* {
  margin: 0;
  padding: 0;
}

html, body {
    height: 100%;
}

#element {
    position: relative;
    min-height: 100%;
}

#element #pattern {
    background: url(path/to/pattern.png);
    height: 50%;
    left: 0px;
    position: absolute;
    z-index: -1;
    top: 0px;
    width: 100%;
}
Salomonder
  • 336
  • 1
  • 6
  • drawback here is the pattern won't repeat as an img element, it will stretch/skew. I tried as a div absolutely positioned with a background, however it seemed to behave a little wonky as absolute elements are positioned above relative elements (therefore covering everything else up) – bbedward May 10 '13 at 15:45
  • Use a negative z-index for
    . It is now drawn almost first. Take a look at the notes about the painting order in http://www.w3.org/TR/CSS2/zindex.html.     – Salomonder May 10 '13 at 16:10
  • My mistake, this actually does work - however, it has some issues when the window resizes in IE7, IE8/webkit/etc. all seem to work fine. Unfortunately IE7 is a requirement here :( , i'll give you an upvote though, thanks. – bbedward May 10 '13 at 16:46
0
Add another container div

You can create another div inside the container div & set its width to 50% of parent container div. Inside this div, you can fill your pattern.

<div id="container">
<div id="myPattern"></div>


#container{
        width:200px;
        height:400px;
        background-color:black;
    }      

#myPattern
{
    background-color:yellow;
    height:50%;
    width:100%;
    /* fill pattern here */
    background-image: url(tt.png);
    background-repeat: repeat-x repeat-y;
}

JSFiddle

Zo Has
  • 12,599
  • 22
  • 87
  • 149
  • The problem with this is the #myPattern behaves as a relative element, meaning it will affect other content. I need to have other content inside the container above the background. – bbedward May 10 '13 at 15:37