Define height/width to background CSS image

Get Started
1

#text {
background:transparent url(//mypath/images/test.png) no-repeat scroll left bottom;
padding:0 0 0 80px;
}

If i wanted to add heigth and width for such images then how to do this?

2

Thanks for explanation, That’s sound good to me.

3

There’s no need to do that for background images.

The reason for including height and width in an <img…> tag is so that the browser can continue laying out the page before the image has finished loading. While this isn’t so much of a problem in these days of widespread broadband access, back in the early days on dial-up modems it was a big deal - a medium sized image could take several seconds to download, and the idea was that the space that image needed would be reserved for it, rather than having to re-flow the page and move everything around once it had loaded.

With a background image, that is irrelevant. Whether the image is present or not doesn’t affect the page layout, because the layout is defined by the element’s contents and any sizing and positioning set in the CSS. The background image goes in as decoration on whatever is there, but it doesn’t change whatever is there - so it doesn’t matter if the browser doesn’t know how big the image is going to be.

4

i am not trying to change the height and width but adding it if it is not defined.

5

ok, I must be missing something here. I still don’t see why you want to change the background image height and width.

Are you hoping that changing the background image size in css that it will then load faster.

If so, you could achieve the same thing and possible with better performance, if you reduce the physical size of the image in some image editing software.

Can you post some actual background image width and height and what you would like to change them to and what the desired outcome is in terms of the performance you are after?

6

just working on performance and adding height and width to such images which can be can be controlled via css.

7

I’m not sure what you want to do then.

Setting a height and width to the element will result in the background image filling up the element by default unles you tell it to do otherwise.

It will help if you explain why you want to specify a height and width for the background image and not for the element

8

In case if this div is having content and as mentioned we have added image as background image then this will not work and will increase the height and width of content rather than assigning height and width to img.

Ex:

#myId {
background-image:url(//myp/img.gif);
}

<div id=“myId”> Hi … <div>

here if i only wanted to add height and width to image only.

any hint

9

I think setting a height and width to the #text element should do what you want.