How do I slice the banner to fit all screen resolutions?

I have made a 1200 px wide banner, I need to slice into 3 sections (I can handle that part), I need to know how to code the CSS so that the 3 images will look right in all resolutions by making the left image stay on the left, the right one on the right, and the center one on top of both in a lower resolution than 1280.

This way, if someone is using any resolution, they see what appears to be a continuous image. I designed it so it would look right, but I forgot how to code it in...

Thanks in advance..

As far as I am aware, an image of fixed width / height will render in that fixed width / height irrespective of the browser's screen resolution. ZC caters for this (in part) by allowing for a background image in the header, over which floats the logo.

So, you may have to look very carefully how you compose the logo - both from a colour composition as well as width point of view.

If your BG image for the header is tiled in the header, then clever designing of that BG image and its associated "floating" logo will ensure that even at a chosen browser aspect of 800PX, you will avoid the browser forcing a horizontal scroll-bar, yet still have your header image rendering in full.

If your logo is 1200PX wide, then anyone browsing at 800PX will get scroll bars.

I think I am right here, but perhaps someone else more knowledgeable can comment, please???

The information above is correct, but it will also be possible to do a three-part "sliding door" logo with no or minimal PHP code changes, depending on exactly how you want it to be laid out.

You have #logoWrapper, #logo and #logo img to work with in the stylesheet.```
#logoWrapper {
width: 100%;
background: #aabbcc url(../images/logoleft.gif) top left no-repeat;
}

#logo {
width: 100%;
background: #aabbcc url(../images/logoright.gif) top right no-repeat;
}

#logo img {
margin: auto;
}

Edit /includes/languages/english/your_template/header.php and change this information as required:```php
// added defines for header alt and text
  define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce');
  define('HEADER_SALES_TEXT', 'TagLine Here');
  define('HEADER_LOGO_WIDTH', '192px');
  define('HEADER_LOGO_HEIGHT', '64px');
  define('HEADER_LOGO_IMAGE', 'logo.gif');

You see... Glenn is much better at this complicated stuff than I am! I learn more from him than I try to teach others! :D

Thanks!!!:clap:

Please can I have some help.

I have increased the width of my template to 100%.

But now the banner isn't wide enough to fill the screen.

So I would like to move the existing banner to the right and insert a piece of banner on the left hand side, so the banner is in 2 pieces and acts like 2 sliding doors so the banner fills all 100% of the width of the screen (except there is a border round the edge and ideally the banner would start at the border - as the banner is currently positioned)

I have created the 2nd piece of banner to plug the gap and called it logo.gif but dont have any css knowledge to change the coding.

My website is https://www.costume-fashion-jewellery.co.uk

I found the free template at
http://www.zenflavor.com/free-zen-cart-template-2-wide.html
where the css code can be downloaded or I can paste it here.

No need to paste - we can see the CSS on your site.

Even the one banner piece is wider than my whole monitor. It would be wise to make the largest piece no more than 1250px or so, to fit in 1280px monitors, if not 1000px to fit 1024px monitors which are still very common.

Ive looked at my site on my laptop and 2 pc's and the banner is usually too short. But I dont know what is going on, but sometimes
the text goes bigger on my laptop and the template displays differently and the banner becomes an exact fit.

Shortening the banner, thats the easy bit ! Thanks as I didnt
know what the usual screen width was.

Your divs #headerContent and #headerpic can hold the two sliding door backgrounds. I would put the right image in #headerContent, and the main/left image in #headerpic. (This is assuming you want the right image to slide behind the left image.)```
#headerContent {background: url(../images/logo.gif) no-repeat right center;}

#headerpic {
position: relative;
background: url(../images/hd.jpg) no-repeat left center;
height: 171px;
width: 1320px;
}

Switch the background-images and/or left/right if I have misunderstood your intentions and you want the parts to behave differently.

Ive just changed the banner to be 1000px wide .... but Im a bit concerned as it only fills slightly over half the width my laptop screen.

The part of the banner that is currently showing on my website is held in hd.jpg

Because of the pattern design on hd.jpg ... hd.jpg would need to be the piece that sits to the front of the screen - so none of the bubbles are lost.

The additional part of the logo that I have created is just the plain part of the banner (with no bubbles) and is cut from the left hand part of hd.jpg. That would need to sit under hd.jpg

Am I explaining this ok ?

OK then:```
#headerContent {background: url(../images/logo.gif) left center;}

#headerpic {
background: url(../images/hd.jpg) no-repeat right center;
height: 171px;
}

Is this code supposed to overwrite the current #headerContent lines as Ive overwritten both headerContent lines and the banner remains the exactly the same.

#headerContent {

}

#headerContent #logoimg {
border: 0px;
position: relative;
top: 25px;
left: 30px;
}

Replace your current #headerpic {} and #headerContent {} rules with the ones shown.

The first thing I did was copy away my existing code to another .css file in the same directory so that the original code could be recovered.

Big mistake as I found that this recovery copy shouldnt have a .css extention as it blocks out any changes made to my new css version.

Ive quite enjoyed playing with the coding you gave, but I cant get it to do what I wanted to do.

It will not combine/overlay the 2 spliced pieces of logo within the same banner space.

I can take hd.jpg and it will wrap round this picture round twice and fill the whole banner width.

or

I can take logo.gif and and it will repeat this several times to fill the whole banner width.

or I can have logo.gif repeating the whole banner width then
hd.jpg sitting in the correct possition to the right of the screen but
directly below the banner, instead of overlaying the banner.

<div id="headerContent">
  <!-- <div id="nameWrapper"></div>  -->
</div>
<div id="headerpic">
  <div id="slogan">
    <h1>Costume-Fashion-Jewellery.co.uk</h1>
    <h2></h2>
  </div>
</div>
```Your problem is that you have #headerContent and #headerpic as separate, sequential elements. What you should have is #headerpic nested inside #headerContent, like this:```
<div id="headerContent">
  <!-- <div id="nameWrapper"></div>  -->
  <div id="headerpic">
    <div id="slogan">
      <h1>Costume-Fashion-Jewellery.co.uk</h1>
      <h2></h2>
    </div>
  </div>
</div>

You are going to love me .....

as after all the experimenting trying to piece together the logo I thought Id just pick a colour from within the css and see what the logo looked like if it was just one plain matching colour ... seeing as I could only get one type of logo to wrap round ..... and to be honest after all of this I probably think its looks better left plain and simple as the given logo doesnt lend itself to piecing together - I wasn't after spending ages on the logo.

How does my plain logo look on your computer screen ?
Does it fit your screen ok ?

I went hunting for examples of css code and nearly every example was piecing 3 bits of logo together and they seemed to be in nested coding.

This has certainly wetted my appetite to learn some css (Ive been doing a course on object oriented programming) and although I like computing, it bored me to tears, maybe website design is what I should be doing.

Thank you very much for your help :smile:

You have to experiment with layouts/designs to find out what works best. It is more legible now, and the nice background didn't necessarily have anything to do with costume jewelry. I think the text all by itself is too stark, and you should have some spark or bling for this subject. Just don't go overboard - the right bit can do a lot.

I was just so pleased to find this lovely free template that had the layout that I wanted that I thought losing the logo would ruin the overall look of the template .... and the overall look was what I liked about it in the first place !

But I dont think the plain is too bad and it doesnt look odd now as it hasnt got a block of white space in the logo.

You are probably right about the wording ... but I think Im going to be spending hours and hours just to getting up google as the keywords for selling jewellery are so very competative.