Home/ Questions/Q 7959643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T04:36:22+00:00

Well, I have a website and the front page has this image repeated all

  • 0

Well, I have a website and the front page has this image repeated all the way down. While on Chrome, is only repeats once, just like I want it to.

body {
    color: #999999;
    background-color: #490000;
    background:url('http://pigymunk.co.uk/bgasdf2.png') fixed, url('http://pigymunk.co.uk/bgasdf.png') fixed;
    background-repeat: no-repeat, repeat;
    background-position: left top, left top;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have 

    background-repeat: no-repeat, repeat;

    You can only specify either no-repeat or repeat – not both, e.g.

    background-repeat: no-repeat;

    Chrome supports CSS3 syntax allowing both but many browsers such as IE consider this invalid as it doesn’t support it. (Remember CSS2 is standard, CSS3 is only partially supported)

    Updated:
    To create a layerd background you need to use layers surprise surprise :). 

    body {
    color: #999999;
    background-color: #490000;
    background: url('http://pigymunk.co.uk/bgasdf.png');
    background-repeat: repeat;
    background-position: left top;
}

#logo {
    height: 200px;
    width: 220px;
    background: url('http://pigymunk.co.uk/bgasdf2.png') no-repeat top left;
    position: absolute;
    top: 0px; left: 0px;
}

    HTML:

    <body>
<div id="logo"></div>
...

    or better yet, don’t use a background image for your logo as it won’t appear when background images are turned off, e.g. for printing. Crop the image to the correct size for the logo and put it in the html 

    <body>
<div id="logo"><img src="http://pigymunk.co.uk/bgasdf2.png" alt="Piggymunk logo" /></div>

...

    jsfiddle example: http://jsfiddle.net/ytL2w/

    • 0