two images in a header?

  • luceylin

    (@luceylin)


    14 years, 3 months ago

    I have created a site with a logo in the header. Now I want to be able to put picturesin the header as well–with the logo on the left and the pictures on the right. Ideally, I would have photos that rotated as different pages we clicked on or something like that.

    I would think that this is doable, and that I have to do the following things:

    1) in my header file, create another header image file (header2, for example)
    2) put the images I want to use for header2 in my images folder
    3) go the the style.css and tell it where in the header to put the header2 images

    Am I on the right track? Is there something I have left out? And, exactly how do I create the rotating/gallery effect? I know that there are some plug ins, but am not sure which one I would want for use in a header. And, I am really a beginner at all of this, so I might need very specific guidance………….

    here is the site: http://www.paullucey.com

Viewing 8 replies - 1 through 8 (of 8 total)
  • Micah Cooksey

    (@micahcooksey)

    14 years, 3 months ago

    NextGen Gallery is a good plugin for that, but it would require some coding to make it appear in your header. To have two images in your header, just make sure that their combined widths are not more than the width of your header. You could use float:left; for the one and float:right; for the other. Then for the rotating script, just google “random image php script” and you should get a script that will work fine.

    And yes, your steps above are about right.

    Thread Starter luceylin

    (@luceylin)

    14 years, 3 months ago

    Ok first things first. Thought I would see if I could get just two images in the header, and leave the rotating part till I accomplished the first part. Below is the code from my style.css sheet but there must be something wrong. I did add “header2” as an image in the header.php file, and both header1.jpg and header2.jpg are in the right place. But only the original header image is appearing.

    ‘/* begin Header */
    div.art-Header
    {
    margin: 0 auto;
    position: relative;
    z-index:0;
    width: 980px;
    height: 225px;
    }

    div.art-Header-jpeg
    {
    position: absolute;
    z-index:-1;
    top: 0;
    left: 0;
    width: 680px;
    height: 225px;
    background-image: url(‘images/Header1.jpg’);
    background-repeat: no-repeat;
    background-position: center center;
    float: left;

    position: absolute;
    z-index:0;
    top: 0;
    left: 0;
    width: 300px;
    height: 225px;
    background-image: url(‘images/header2.jpg’);
    background-repeat: no-repeat;
    background-position: right center;
    float: right;
    }
    /* end Header */’

    Micah Cooksey

    (@micahcooksey)

    14 years, 3 months ago

    Ok, here’s what you want for those last two:

    div.art-Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 680px;
height: 225px;
background-image: no-repeat url('images/Header1.jpg') center center;
float: left;
}

div.art-Header2-jpeg {
position: absolute;
z-index:0;
top: 0;
right:0;
width: 300px;
height: 225px;
background: no-repeat url('images/header2.jpg') right center;
float: right;
}

    And make sure you add the div.art-Header-jpeg element to your header.php within your div.art-header. It’s kind of hard without seeing the site, but that should work.

    Michael

    (@alchymyth)

    14 years, 3 months ago

    @luceylin
    make it easier:
    (always make a backup copy before editing your theme files)
    if you look at your html structure, you have .art-Header, and within that, you have .art-Header-jpeg:
    .art-Header-jpeg already has the existing background image and is positioned top left.
    .art-Header has no background image and is the perfect place for your second image which can be positioned directly with css.

    build on the existing structure, no need for another div in the header.

    here is the style, you could just replace the whole /* begin Header */ to /* end Header */ section:

    /* begin Header */
div.art-Header
{
	margin: 0 auto;
	position: relative;
	z-index:0;
	width: 980px;
	height: 225px;
background-image: url('images/Header1.jpg');
	background-repeat: no-repeat;
	background-position: 300px top;
}

div.art-Header-jpeg
{
	position: absolute;
	z-index:0;
	top: 0;
	left: 0;
	width: 300px;
	height: 225px;
	background-image: url('images/header2.jpg');
	background-repeat: no-repeat;
	background-position: right center;

}
/* end Header */

    Micah Cooksey

    (@micahcooksey)

    14 years, 3 months ago

    Thanks alchymyth, good idea.

    Thread Starter luceylin

    (@luceylin)

    14 years, 3 months ago

    I tried that code but it did not work. Can someone peek at my site and see why? Much obliged.

    http://www.paullucey.com

    Michael

    (@alchymyth)

    14 years, 3 months ago

    it’s there.
    refresh your browser cache by pressing CTRL F5 simultanously, or press the reload a few times.

    Thread Starter luceylin

    (@luceylin)

    14 years, 3 months ago

    Awesome. Now I just have to make it a little smaller. Thanks alot. The next thing I will dig into is putting random images in the header instead of just that one picture……

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘two images in a header?’ is closed to new replies.