CSS background without using url

Question

Is there a way in CSS to include a background without using url()

Ex, I can't do this:

#blah {
    background:url("either image or image data");
}

Is there a workaround where I can achieve the same thing but not using the keyword "url" (The word "url" is prohibited.

Answer 1

You can use an <img> tag as your background image, no URL in the CSS is necessary. Something like this:

HTML

<img src="image.jpg" class="bg">
<div id="page-wrap">
</div>

CSS

img.bg {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px) {
    img.bg {
        left: 50%;
        margin-left: -512px;
    }
}

See here for more information and a demo: http://css-tricks.com/perfect-full-page-background-image/