Cut through background image of parent div…

[henrycharge]

I’m playing about with a free site template PSD and creating the markup and CSS for it.

The only bit so far I’m having trouble finding a solution for is the search bar, if you look at this snippet the search bar is “cut out” of the header background, revealing the body background pattern.

Is there any way to do this with CSS using transparency? Obviously can’t just use the same pattern as the body background because it will move on resizing the window…

Any help would be great.

https://www.sugarsync.com/piv/D7295812_4712789_66402

[wolfcry911]

why can’t you use the same pattern as the body? just center both of them and they will move together upon resize.

[henrycharge]

how would this work with a repeating pattern though?

[farzadina]

As @wolfcry911 said, easily you can use a pattern as the body and fix it with background-position property.

[Author]

Posts