Comments on: Multiple Background Images with CSS

By: banzai

banzai — Sat, 23 Mar 2013 16:21:29 +0000

you have to upload the image to the web site and then point
the image to the location on web site. Web sites can’t access your hard disk. Some authoring tools will do this for you automagically, but usually you have to do some part of it yourself.

copy C:\Users\saquib\Pictures\mypic.jpg to http://www.mysite.com/images/mypic.jpg (use ftp to do this) and your html pointer will be /images/mypic.jpg

By: saquib

saquib — Mon, 04 Mar 2013 16:28:44 +0000

i used the image from my hard disk, path of that image was C:\Users\saquib\Pictures. it did not work, why? please let me know.
thanking you

By: Brian McPherson

Brian McPherson — Sat, 19 Nov 2011 22:49:16 +0000

Davy, I use apDIv for everything on a web sity. Just do your header with the background color you want. Then do apDiv, size it just a little more then the Logo and put that Logo in side the Div. Make sure your use absolute for position and your can more that Logo anywhere you want, Make to check it that it does not overlay any other element.

By: Andrea Barnett

Andrea Barnett — Wed, 16 Mar 2011 10:03:15 +0000

I do not know what you mean by ‘according to change the “percentage of width” of that website?’ but in general, if you’re just applying a color to the background instead of a background image, you’d just specify the color – for example:

body {background: #ffffff;}

By: Subhendu

Subhendu — Wed, 16 Mar 2011 08:01:04 +0000

How could i change the background color of a website, according to change the “percentage of width” of that website?

By: Davy

Davy — Fri, 07 Jan 2011 04:27:27 +0000

I am trying to understand this because in a header I need to put one .gif as a gradient background repeat-x and over it I need to put a logo .gif I cannot figure it out. If you can explain how to do it I will be so thankful. Here is the .css code that has the gradient background in place and I need to know how to put the logo over it.

/* header area */

#header {

background: #c66310 url(images/head-bg.gif) repeat-x;

height: 127px;

border-top: 10px solid #fff8d9;

position: relative;

color: #08DA07;

By: Julie

Julie — Wed, 01 Dec 2010 05:17:43 +0000

Oh, Yeah!! after a lot of experimenting, I think I’ve got it.
I was trying to add a colored background to the middle of the page between the two images.
Instead of adding the bgcolor to the body tag, I added it to the html tag. This gave me a background color without covering up the left side image.

Thanks so very much for all of your help. Love your site.
Your tutorials are so easy to understand.

By: Julie

Julie — Wed, 01 Dec 2010 02:37:59 +0000

Thanks for responding so fast.The background color worked like a charm. That margin tag moved the right image to the top. So thanks for helping with my questions.Now I have another problem. The background now covers the left image. I have tried adjusting all the margins and padding, but am unable to figure out my problem. heres the page I am working on: http://www.homebusinessmoms.com/trything.shtml

By: Andrea Barnett

Andrea Barnett — Wed, 01 Dec 2010 00:59:45 +0000

To Julie:

The reason you see a space at above the background image on the right is the browser’s default margin/padding settings. Normally, I start my CSS with
* {margin: 0; padding: 0;}
which would take care of this spacing.

As to a background color (#808080 – or whatever), just add it to this line:

body {
background: url(bgimage.jpg) repeat-y right;
} — like so:

body {
background: url(bgimage.jpg) repeat-y right #808080;
}

or whichever tag, depending on where exactly you want the color.

Does that help?

By: Julie

Julie — Wed, 01 Dec 2010 00:06:25 +0000

Thank you so much for this sample. I have been trying to put two images on both sides for about two weeks. Two questions, please – 1. I understand the right image only follows the content, but is there a way to get it completely to the top? 2. I would like a background color and cannot seem to change it. Help!!