Comments on: How to Add a Background Image with CSS

By: Pierre

Pierre — Tue, 02 Aug 2011 04:06:03 +0000

Hi Andrea,
Thank you so much for your help. It seems to be working fine now. Really appreciate it!
Cheers, Pierre

By: Andrea Barnett

Andrea Barnett — Wed, 27 Jul 2011 11:09:03 +0000

Pierre, I’ve copied your comment over to http://www.killersites.com/community – you can find it and a reply here:
http://www.killersites.com/community/index.php?/topic/5875-background-issue/page__pid__26800#entry26800

The Killersites Community is a great place to find help.

By: Pierre

Pierre — Wed, 27 Jul 2011 01:57:02 +0000

Thanks for this great post. It was very helpful.

I have one slight problem though. When I apply the code as per above:

****
body {
background: url(bgimage.jpg) no-repeat #f6f1b9 fixed top right;
padding-right: 250px;
}
****

I only get the image showing. If the image for some reason is unavailable at the time of viewing I would have thought the background fixed colour (#f6f1b9) would show instead. In my case it doesn’t.

On another issue, when viewing this code in IE the image doesn’t show.

The code I ended up applying looks like this:

****
.Button_green-graded
{
line-height: 20pt;
background: url(Button_green-graded.jpg) #33CC00 repeat right fixed top left;
border: 2px;
border-color: #FFFFFF;
font-family: sans-serif;
font-size: 10pt;
color: #000000;
text-align: center;
vertical-align: middle;
}
****
Can anyone see what I’m doing wrong? Thanks

By: Andrea Barnett

Andrea Barnett — Mon, 14 Jun 2010 10:39:24 +0000

Craig – post your question on the Killersites Community: http://www.killersites.com/community/index.php?/index and provide some more detail. Are you talking background image? Depending on the circumstance of your 100% header, that size might vary, so a set width image with set width margins or padding won’t work. But more detail is needed to give a good answer.

By: Vihar

Vihar — Sun, 13 Jun 2010 15:02:09 +0000

How can I position a (square shaped) image inside of a 100% wide header with a chosen amount of distance or margin between the image and the left side of the screen?

By: Andrea Barnett

Andrea Barnett — Sat, 13 Mar 2010 13:46:24 +0000

@ Michael – I assume you mean url(..), no-repeat, top, etc.? The order does not matter.

@ Craig – I am not sure what you mean. Color codes are the same no matter what you apply the color to. If you’re looking to find what color has what code, just google ‘hex color codes’.

By: Craig Vika

Craig Vika — Sat, 13 Mar 2010 08:13:25 +0000

How can l get the colour codes of backgrounds

By: Michael Hall

Michael Hall — Fri, 12 Mar 2010 00:43:48 +0000

yet another one that had me puzzled for a long time, is there a specific order that the declarations(?) should be listed in?

i finally remember the order for the font: shorthand to do several things in one line of css code.

= )

for some reason css baffles me and i’ve been coding php and javascript for almost 10 years! i think it’s mostly the cross-browser compatibility issues, and the fact that it doesn’t give error messages like javascript and php to help you along, lolol.

By: How to Add a Background Image with CSS - Web design video tutorials for beginners - Killersites.com Blog

Thu, 04 Mar 2010 18:17:00 +0000

[...] pursuit to make web design easy for you, we have yet another great little tutorial on using CSS to insert background images into your web [...]