9 replies [Last post]
macamba
macamba's picture
Offline
Regular
Arnhem
Last seen: 11 years 6 weeks ago
Arnhem
Timezone: GMT+1
Joined: 2007-03-22
Posts: 45
Points: 0

Hi all,

I am developing a web page to be displayed using PHP and CSS. Where I have a problem with, is putting an image in the header. I have code for an image in the header. To the right of the image the background has the same color as the right side of the image.

The code is:
#header{
height: 80px;
background-image: url('../images/original.jpg');
background-repeat: no-repeat;
background-position: 0 0;
border-bottom: 1px solid #fff;
position: relative;
}

I want to replace this code by code using three images, called left.jpg, middle.jpg and right.jpg (in this example). Middle.jpg is to be used to fill up the space between left.jpg and right.jpg. But how do I do that? I can imagine that
#header{
background-image: url('../images/middle.jpg');
background-repeat: repeat-x;
etc.
}

will give me a big image consisting off several middle.jpg images. But what do I need to do to get the left.jpg and right.jpg in the picture?

Is this something?
#header{
height: 80px;
background-image: url('../images/left.jpg');
background-repeat: no-repeat;
background-position: top left;
background-image: url('..images/middle.jpg');
background-repeat: repeat-x;
background-position: top center;
background-image: url('../images/right.jpg');
background-repeat: no-repeat;
background-position: top right;
border-bottom: 1px solid #fff;
position: relative;
}

Looking forward to your comments.

Macamba

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

multiple background images

multiple background images are not part of CSS 2.1, they are part CSS 3, but only Safari supports it right now. Can you show a pic of what you're trying to accomplish?

macamba
macamba's picture
Offline
Regular
Arnhem
Last seen: 11 years 6 weeks ago
Arnhem
Timezone: GMT+1
Joined: 2007-03-22
Posts: 45
Points: 0

Hi Wolf,

Hi Wolf,

This was what I was thinking about:
http://www.imagewoof.com/view_image/dd28d401/header_image.jpg
The middle image should be used to fill up the space between the left and right image. I hope that is clear.

I don't mind that CSS2.1 does not support multiple background images, I only want to be able to offer an image in the header that seems to grow, and shrink, with the width of the browser.

What I mean is discussed on http://dev.joomla.org/content/view/1136/79/1/10/

How do I accomplish that?

Macamba

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

It's not yet clear (to me).

It's not yet clear (to me). You're showing 4 colors: red, white, black, (white again) green. Is it that you want the red on the left a certain width; green on the right, again a certain width; and everything in between black?
Are you using solid colors, or are they indeed images?
Are they two outer sections fixed width?

oh, and btw, you can post images here in the forum.

edit/ hold on, I just saw the second link in your post. BRB

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Well to accomplish that with

Well to accomplish that with the three backgrounds you will need 3 elements to place a bg on. The image on the left looks like it would be used as a logo or site name - I would place an image on a hx tag inside the header for this.

Now as far as the other two are concerned, I would actually be inclined to use a single, non repeating image that includes the top right rounded corner. This image would need to be as long as the widest you would expect a page to be (minus the left image) would would probably equate to around 2000px. This bg image would be placed on the header div to the top right, and any overflow would just not be seen, but be revealed as the window size increased. The increase in file size would be negligible, and would decrease an extraneous element and server calls.

macamba
macamba's picture
Offline
Regular
Arnhem
Last seen: 11 years 6 weeks ago
Arnhem
Timezone: GMT+1
Joined: 2007-03-22
Posts: 45
Points: 0

Yes, I know you can post

Yes, I know you can post images on the forum. But when I tried it, nothing was shown. So I had to revert back to the link.

On your other point, I do not see how I can accomplish this. Anyone else with an insight?

S8nsick66
S8nsick66's picture
Offline
Regular
Sweden
Last seen: 12 years 17 weeks ago
Sweden
Timezone: GMT+1
Joined: 2006-11-17
Posts: 39
Points: 0

Don't understand or don't belive?

Do you mean that you don't understand the suggested solution, or that you don't believe in it? If it's the first, just ask and I'm sure you will be guided through it.

The solution should work great and is probably the best one, if there aren't other factors to consider.

macamba
macamba's picture
Offline
Regular
Arnhem
Last seen: 11 years 6 weeks ago
Arnhem
Timezone: GMT+1
Joined: 2007-03-22
Posts: 45
Points: 0

Actually, I don't

Actually, I don't understand. If you would clarify, I would be obliged.

In the mean time, I was thinking on a different track. I thought to solve my problem by only defining the background image in the css file. In html I would then define the header image, and the image on the right. But the result was not to my liking.

Here is the code I used:

This is a test with a scalable image

#header
{
height: 80px;
background-image: url('middle.jpg');
background-repeat: repeat-x;
background-position: 0 0;
/* border-bottom: 1px solid #fff; */
position: relative;
}

This is a test with a scalable image


The not so beautiful result is displayed in (about a browser page big):
http://www.imagewoof.com/view_image/a8932946/Letter_webpage.JPG

So this is not the approach either. Anyone (Wolf) an idea? Or is this not the correct track to follow?

Macamba

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Here's my

Here's my approach:


This is a test with a scalable image

/**/



I threw together some mockup images as well. Note that I used jpgs and defaulted to white under the 'corners'. You could use pngs as well (with some javascript hacks for IE6) and use any color body background.

AttachmentSize
headerbg.jpg 3.96 KB
h2bg.jpg 3.14 KB
macamba
macamba's picture
Offline
Regular
Arnhem
Last seen: 11 years 6 weeks ago
Arnhem
Timezone: GMT+1
Joined: 2007-03-22
Posts: 45
Points: 0

Thanks Wolf. That hit the

Thanks Wolf.

That hit the spot.

Macamba