Is the code background-image limited by size?

Home » Programming & Design » Is the code background-image limited by size?
Programming & Design No Comments

body {
background-image: url("background.png") ;
}

that is my code.. whenever I put a lower size file in there it is just fine, but when I put something over 100kb it just doesn't do anything.. is there any work arounds?

Best Answer:

Keyan: There should not be a problem – other than irate visitors who have to download 100KB of stupid background image when they just want to see the site…anything other 30KB is way too much.

Does it work without the quote marks around background.png

https://developer.mozilla.org/en/docs/We…

Other answer:

Keyan:
Is the code background-image limited by size? No.

I assume you don't know anything about what you are doing. 100kb image is a good amount of memory, for an online picture.

If you use an image that is over 100kb, and under 1mb, then you should not have any problems. The larger the image size you use might take longer to load on your web page, or website. If you wanted, you could use a picture that is over 1mb.

The reason why your css is not doing anything is because you are making a mistake, and your not able to see it. Because your picture is not being rendered by your web browser.

Sometimes people make mistakes without realizing it.

Maybe you put your background picture in a directory (folder), and your css is not pointing to your image.
Try using only one image at a time to check if you can see your background image on your web page, or website. Maybe you spelled something wrong. Your picture would have to be called the same thing as whatever you use in your css. If you want to use background.png, then your image would have to be called background.png. Maybe your css file extension does not match your file's extension. Maybe your file is corrupted.

You have to make sure NOTHING is wrong. Because if something is wrong, then what you want to do WILL NOT work.

Keep trying, and don't give up!

Chris:
You don't need the quotes, but IF you use them, you need to put them around the entire filename, not just the part before the extension.

Also, the size of the image shouldn't matter one bit; you can in theory use a 5MB image no problem.

As for how the image is displayed, that's what
background-position
and
background-size
are for.

You probably want

background-position: center;
background-size: cover;

Laurence I:
check the w3school and practice there, read this first and be sure your browser is up to the challenge. http://www.w3schools.com/cssref/css3_pr_… and read this on stackoverflow as it answers a few questions there http://stackoverflow.com/questions/13413…
Keyan:
I edited the images in photoshop is that the problem? I will upload the picture EDIT: I cant, yahoo is experiencing some problems
Andy T:
You forgot a resizing CSS field.

LEAVE A COMMENT