Css background repeating from 300px onwards?

Put the repeating pattern as background to html element, then a white 1px * 300px image as an background image to body element, and you're all set html, body { height: 100%; } html { background: url(dotted. Png); } body { background: url(white_1x300. Png) 0 0 repeat-x; } You don't have to use html and body tags for this, but it's the easiest way and doesn't require any new markup.

Put the repeating pattern as background to html element, then a white 1px * 300px image as an background image to body element, and you're all set. Html, body { height: 100%; } html { background: url(dotted. Png); } body { background: url(white_1x300.

Png) 0 0 repeat-x; } You don't have to use html and body tags for this, but it's the easiest way and doesn't require any new markup.

– xtofl Dec 4 '09 at 10:54 No, as you can't fake the white 300px high area with elements, and you can't combine the images as the html background needs to be repeating. – Tatu Ulmanen Dec 4 '09 at 11:45 thank you this worked as a charm! – Robert Ivanc Dec 5 '09 at 20:32.

You can specify multiple backgrounds. See Can I have multiple background images using CSS?. The techniques mentioned there are: Put the whole page into another container or misuse the tag for it.

This means you specify a background for and one for . Use CSS3 which support multiple background images. That's not yet supported by all common browsers.

Yes, specify your background image as normal but set the background-position like this: background-position:0 300px; This will make the background image start at 0px from the left, and 300px from the top. Let's not forget that you can use FireBug with FireFox to easily diagnose techniques on websites.

– xtofl Dec 4 '09 at 8:59 Ah fair point :D, didn't spot that dspts. Si used a very long thin image repeated.My bad – Ben Everard Dec 4 '09 at 9:01 yes, well, this is what I have done right now with the position. If I do repeat-y it will for some reason wrap around and I'll have pattern on the top as well.

:( – Robert Ivanc Dec 4 '09 at 9:05.

The first 1/3rd of the screen has an empty background and from there onwards there should be a pattern repeating. I did it right now, by creating a very long pattern png and set it to offset 300 and repeat-x. However, I'm not happy with this solution because it will break if the pages ever get longer than the background image png is.

Thanks for any suggestions!

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions