Arggggggg - Close to breakdown - Help with logo in header needed

I really am very close to just throwing the computer out the window and i need sleep badly. I have spent the last two days trying to sort a header logo out....either the filesize is too large or it keeps repeating itself...Some people have offered advice regarding the former problem but i haven't a clue how to go about doing what advice they gave me despite doing a search to find out.

( i'm a complete newbie and need step by step help and not just a few lines saying change your css stylesheet mainlogowrapper etc etc and its hard trying to find relevant information within 500 page threads )

I tried changing the logowrapper so the repeating part was omitted ( it didn't help i just ended up with a blank section )

site is http://www.darkrealmfox.com/catalog

I would rather be able to design a logo with proper pictures and text but file size is way too large - even current logo is 30kb.

Please have sympathy for my plight and tell me step by step how do i stop the logos repeating themselves.

I need sleep - going to bed now.

Try changing line 197 of your stylesheet from> background-repeat: repeat-x; to > background-repeat: no-repeat;

That worked.

New problem though - At 1280x1024 resolution there is a blank white space across from the logo - How do i make the logo fluid so that whenever a new resolution is chosen it changes size to that resolution ?

Mal2869:

That worked.

New problem though - At 1280x1024 resolution there is a blank white space across from the logo - How do i make the logo fluid so that whenever a new resolution is chosen it changes size to that resolution ?

you need to cut a slice out of the Graphic where there is only the gradient, use that has the background image, and change your repeat back to "repeat-x"

You need to split your logo image in two and attach one part to #logoWrapper as you have it, and one part to #logo. (The gradient repeated is another way that can work, but requires another step and some added HTML code.)

First, in Photoshop or whatever graphics program you have, take the left & middle part of the image up to but not including the grass on the right, and stretch the plain shaded blue background by another 300 or 400 pixels to the right. Save it as headerbgl.jpg. Take the right part of the image with the grass and save that as headerbgr.jpg.

Now edit your stylesheet. Find this#logoWrapper{ background-image: url(../images/headerbg.jpg); background-repeat: no-repeat; background-color: #D6E0DD; height:110px; margin: 0em; padding: 0em; }and change it to this```
#logoWrapper{
background-image: url(../images/headerbgl.jpg);
background-repeat: no-repeat;
background-position: top left;
background-color: #D6E0DD;
height:110px;
margin: 0em;
padding: 0em;
}

#logo{
background-image: url(../images/headerbgr.jpg);
background-repeat: no-repeat;
background-position: top right;
/width:100%; uncomment this if necessary/
height:110px;
margin: 0em;
padding: 0em;
}

Thanks

Thats the type of advice i was looking for and it helps me understand exactly what i now need to do.

I actually added a little bit of text to logowrapper before reading all this.

background-position: right;

Now the logo is stretched out to full page on 1280x1024 with 2 areas of grass but looks normal on lower resolutions....thats interesting but i don't have a clue what i just did ( unfortunately )

I will try my preferred logo now and take the advice given above. ( probably spend all day on it which could be better served adding products but i might as well learn how to do this right first and i still need to fix 13 html errors within the front page of the store )

Thanks again.

Does the original image have two patches of grass on the right? How many pixels wide is the image file?

Background images will not push out the dimensions of their container like foreground images do, so you have to specify the size of the container. As much of the bg image will show as there is space in the container.

The grass was just a small file added by Paint Shop Pro's Picture Tube Tool...There was only one patch of grass on the right side but whatever i did added 2 on 1280x1024 but reverts to the normal one only on lower resolutions.

Anyways tried your advice and haven't managed to make it work just yet...I won't give up though as i'm probably doing one little thing wrong.

I have been leaving a blue area as you said although the image size remains at 988x110....Did you mean stretch that out to 1288x110 ?

I'm going to try a new logo using pictures and following your advice with some text to the left saved as a gif file. I would add the text using the header.php but it just never goes where i want it to go and not in the black highlight color i need.

Incidentally this template i am using Arch_Shoppe isn't supposed to be fluid yet whatever i did a few days ago seems to have made it that way as i had 2 borders at 1280x1024 resolution but now i don't ( I am happy about that too ) or maybe it's just me seeing that i don't know ?

My images keep appearing corrupted when uploading them...It's a recent thing and only started to happen in the last few days - Yet i upload my original first logo and it's NOT corrupted....I don't think it's the FTP program since it happens when using both FTP Cute and Filezilla - Anyone else experienced this and know a fix ?

I have to say i have managed to configure quite a bit with help from these forums but the logo is a real pain in the --- Its the single most annoying thing i have experienced so far when working on zen cart.

I fixed the logo issue with corruption...Paint Shop Pro 8 to blame ( A Re-install fixed it )

I think my logo looks better now ( and i didnt need to use the html above but thanks for giving me options )

I simply took into account which side was repeating itself and put some info that i thought would be ok repeating on both sides ( with my fav grass of course )

Thanks again for the help it gave me the idea.

If you can predict the maximum width the image will need to cover and make the repeat work for that, your solution is a good one.