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.

Very good question, some sanitizing filter is blocking it. This is on a website that I have 0 control over — user3023421
– user3023421, Commented Feb 28, 2014 at 17:42
That's the most ridiculous I've ever heard. Blocking url is breaking CSS. — MueR
– MueR, Commented Feb 28, 2014 at 17:44
Would embedding an image into html be a solution? .. it can be used as background within a div or anything else you can do with a normal img tag — Asons
– Asons, Commented Feb 28, 2014 at 18:13
unfortunately I can only add css code, the website does not allow html — user3023421
– user3023421, Commented Feb 28, 2014 at 18:25

Dryden Long · Accepted Answer · 2014-02-28 17:44:56Z

4

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/

answered Feb 28, 2014 at 17:44

Dryden Long

10.2k2 gold badges38 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MueR · Accepted Answer · 2014-02-28 17:39:38Z

-1

No, you cannot. That is the way CSS works when including external content. To prohibit the keyword url on the web is a rather strange thing.

answered Feb 28, 2014 at 17:39

MueR

9777 silver badges13 bronze badges

Comments

Lulue · Accepted Answer · 2021-05-29 15:15:01Z

-2

No need to make it so complicated !!!

Here is the explanation : When using the url() value, you have three choices:

relative path based on the root domain of the CSS file — begin with a slash (/) as shown above
relative path based on the immediate directory of the CSS file — no slash (url(path/to/image.png) )
absolute URL, if you are linking to an external resource — url(http://example.com/path/to/image.png)

Source: https://html.com/attributes/body-background/

So basically, if you have your image in the folder image, next to to the foler styles (in which you css file might be), here is what you need to do : background: url(../images/Chat.jpg) ../ means you go back one level above your current folder/workplace.

Here is what I used:

background: url(../images/Chat.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

answered May 29, 2021 at 15:15

Lulue

7

1 Comment

Quentin Over a year ago

You used the string url which the question explicitly states (four times!) they cannot because a filter blocks it.

Collectives™ on Stack Overflow

CSS background without using url

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related