Cross browser header image question

Get Started
1

Hi,

On my blog I have an image in ther header set with the following CSS:

/* This will be the header */
#zigwarp {
background: url(‘http://www.israpsych.org/images/sunset.jpg’) no-repeat top 50%;
margin:0 auto;
min-width:880px;
text-align:center;
}

The problem is that the immage shows only IE8.

Please help me here.

2

Can you post the HTML as well?

3

Hi,
Do you mean this part?

<body>
<div id=“leaves”>
<img src=“images/leaves.gif” class=“lv” border=“0” width=“260” height=“130” />
</div>

<div id=“topzig”>
<div id=“zigwarp”>
<div id=“bighead”><a href=“http://www.israpsych.org”>
<img src=“images/title.gif” class=“logotitle” align=“left”></img></a>
</div>

4

Indeed it can be “Gooooooooood” if we can work together.
It doesn’t mather what mother tongue you have, there is only one HTML and CSS for all.
So, can we work together?

5

You have a CSS syntax error in:

[COLOR=#464646]background: url('http://www.israpsych.org/images/sunset.jpg') no-repeat [B]top 50%[/B];[/COLOR]

When using shorthand for positioning in the background property you should state X (along width) and Y (along height) and shouldn’t mix units.

A valid version would be:

[COLOR=#464646]background: url('http://www.israpsych.org/images/sunset.jpg') no-repeat [B]center top[/B];[/COLOR]

or

[COLOR=#464646]background: url('http://www.israpsych.org/images/sunset.jpg') no-repeat [B]50% 0%[/B];[/COLOR]

Hope it helps.

6
Off Topic:

Regarding the post with the nonsense “gooooood” and URL that will be dealt with since it breaks the SPF forum rules regrading fluff, self-promo and other crimes of clogging up the internet with junk comments.

7

Thanks zbing,
One step forward.
With 'background: url(‘http://www.israpsych.org/images/sunset.jpg’) no-repeat center top;’ and FireFox, I can see half picture only and then the background color.
What else can I do?

8

Is there anything wrong I did?

9

you can add: height: 133px;

10

Thanks but still the same problem.
the code is:
/* This will be the header */
#zigwarp {
background: url(‘http://www.israpsych.org/images/sunset.jpg’) no-repeat center top;
height: 133px
margin:0 auto;
min-width:880px;
text-align:center;
}

What’s wrong here?
In IE shows OK, in FF shows half picture.

11

Thank you sularome,
IT WORKS!
I owe you one…big time.:slight_smile: