CSS Background Url

CSS: background image on background color

You need to use the full property name for each:

background-color: #6DB3F2;
background-image: url('images/checked.png');

Or, you can use the background shorthand and specify it all in one line:

background: url('images/checked.png'), #6DB3F2;

CSS background-image: url() wont access folder

Give this is a try...

background-image: url("../images/your-image-name-here.png");

The "../" basically tells the code that it needs to come out of the CSS folder first, then go into the images folder. Without this step, it is looking for an images folder within the CSS folder.

CSS background-image - What is the correct usage?

The path can either be full or relative (of course if the image is from another domain it must be full).

You don't need to use quotes in the URI; the syntax can either be:

background-image: url(image.jpg);

Or

background-image: url("image.jpg");

However, from W3:

Some characters appearing in an unquoted URI, such as parentheses, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '\(', '\)'.

So in instances such as these it is either necessary to use quotes or double quotes, or escape the characters.

The way to use background-image in css files with Django

Use this:

    #third{
     background: url("/static/img/sample.jpeg") 50% 0 no-repeat fixed;
     color: white;
     height: 650px;
     padding: 100px 0 0 0;   
     }

Most probably This will work.Use "/static/" before your image URL and then try them. Thanks

my background url for css property is not displaying image sprite?

To answer a couple of your questions:
"Is this image considered an image sprite?" I would say yes. Multiple smaller images composed together in a single image. A sprite is useful for reducing network calls to pull a single image instead of multiple images smaller ones.

You generally won't use an <img> tag to display a sprite. Sprites will be used as background images. The usage within the <div ... is more accurate as you are applying a background-image with CSS.

The Width and Height of your background image should represent the width and height of the smaller image within the sprite. You also need a background position to tell the browser where to start rendering with width and height.

The background-position CSS element is slightly misleading. It does start at 0,0 which is the top left corner of the sprite. However, from there the values go negative instead of positive.

To render the first house in the sprite, you have the background-position and width and height correct in the #home element, but you need to move the background-position to the .img element. The <div class="img"... is the one proper way of utilizing a sprite.

It should look something like:

<style>
        .img {
            width: 46px;
            height: 44px;
            background-image: url("images/img_navsprites.gif");
            background-position: 0 0;
        }
</style>

<div class="img"></div>

I also mentioned earlier about the background-position goes negative instead of positive. This means, for example, if I wanted to render the Bottom Right Arrow for instance you would apply negative X axis to the position and a negative on the Y axis as well.

That would look something like:

<style>
        .img {
            width: 46px;
            height: 44px;
            background-image: url("images/img_navsprites.gif");
            background-position: -91px -45px;
        }
</style>

Resolving css background-image url with Webpack

You are may be using a new version of Webpack, where url-loader and file-loader are deprecated and Asset Modules are the alternatives.

Try using:

{
      test: /\.(jpg|png|svg|gif)$/,
      type: 'asset/resource',
},

instead.

For more information click here.

Background url in external css not loading on chrome

I would specify the exact attribute, which is background-image (see https://www.w3schools.com/cssref/pr_background-image.asp) and use quotes as well:

a.tw{ 
      background-image: url("images/tw.png");
}

If you want to use custom background, then you can try:

a.tw{ 
      background: url("images/tw.png") no-repeat center;
}

---

Related Topics