css background repeating from 300px onwards
-
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!
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.