Add 2 images to the header

:lamo:Help! I've looked for hours in the FAQs and forums, and have read the book, but I can't seem to find the right answer for adding two images to my header. I have changed the logo and floated it in the middle. Now I want to add an image on both sides of the logo

If your layout is a fixed width you can add this as a background image

I've made somewhat of an effort to that with no success. I'm a newbie, could you explain with more detail.

Thanks for the quick reply!:clap:

How about a link to where you are

http://www.cstrucktops.com

I like the idea of editing the stlyesheet, seems easier, but i'm not understanding

You can try creating your images(not too wide & height to match) and attaching one to #logo and the other to #logoWrapper - float one left and the other right

#logoWrapper {
float: left;
background-image: url(../images/left_bg.jpg);
background-repeat: no-repeat;
background-color: #ffffff;
height: match heightpx;
}
#logo {
float: right;
background-image: url(../images/right_bg.jpg);
background-repeat: no-repeat;
background-color: #ffffff;
height: match heightpx;
}

I tried with no success. No images appeared on either side, and it moved my logo from the center to the right. the image size that I used is 125 x 97. Any ideas?

I tried with no success. No images appeared on either side, and it moved my logo from the center to the right. the image size that I used is 125 x 97. Any ideas?Yoy added what was posted to your stylesheet correct?
Where did you upload images to?
Seems that logo is also responding to logoWrapper setting?

Will have to use positioning for background check at w3schools

I have my logo centered in the stylesheet under #logo text-align: center.

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg
{text-align: center;}

#logo
{float: right;
background-image: url(/home/cstruckt/public_html/images/cartoontruck1.jpg);
background-repeat: no-repeat;
background-color: #ffffff;
height: 140px;}

is this creating a problem?
I have no image showing yet.
My logo size is 600 x 140. Is this too big?

Move images to includes/templates/CST/images/ and edit your calls from:

background-image: url(/home/cstruckt/public_html/images/cartoontruck1.jpg);

to:

background-image: url(../images/cartoontruck1.jpg);

did that. now I got the image on the left showing, and my logo on the right, but no right image. is there a conflict with the text-align: center and the float: right both under #logo? cause the logo is floating right instead of center, maybe it is covering the right side image?

by the way thanks for all your time and effort

I just removed the logo. and it's floating to the right. which is probably overriding the image on the right. anyway to seperate these two? you'll have to spell it out, I'm not good at PHP or CSS

Hey, Just had an idea. what if I put all three images together into one image? is there any software that could do that for me?

jacon1965:

Hey, Just had an idea. what if I put all three images together into one image? is there any software that could do that for me?

I was going to suggest this approach at the beginning of your thread but I assumed you had already considered this.

You could use a number of different programs to combine the images together. Adobe Photoshop and MS Paint to name a couple.

kobra:

If your layout is a fixed width
Yours is 100% and a static single image will not display correctly at all resolutions

If you switch to a fixed width of 750 to 1005 or so I would create the image as 2 - one the logo you already have the other that will be as wide as your fixed value with a bare(white or transparent) area for the logo and apply it as a single background image. The same as the classix template does