css background repeating from 300px onwards

StackOverflow https://stackoverflow.com/questions/1845714

  •  12-09-2019
  •  | 
  •  

Question

I am wondering if anyone knows how to achieve the following - take a look at http://www.dspts.si

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!

Was it helpful?

Solution

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.

OTHER TIPS

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 <div> container or misuse the <html> tag for it.
    This means you specify a background for <body> and one for <html>.
  • 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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top