How would I keep the image I have on the right but also add a slice of the beach to repeat all the way to the right so when the window is resized the right image moves in?
Sounds like you should have the beach as a repeated background-image and the other image as a image element in the markup.
You know I didn't think of
You know I didn't think of that, that would be the easiest way to do it wouldn't it.
I'll try that out thanks a lot.
ok I have got the image to
ok I have got the image to repeat but the other image the is situated to the right is now behind the repated image?
It seems the hard coded
It seems the hard coded image and location is over riding the CSS to repeat the slice across the top to the left of it.
It's either one image or the other...
there must be a way around this.
[-----------image slice - repeated----------][--trees--]
Is the original link you
Is the original link you posted updated to reflect these changes? as I'm seeing an attempt to place two background images on the same element, one of them as an inline style rule, there can only be one background to an element.
This is my current header
This is my current header code for the top Div.. I know it's rough but I just want to see it working.. the images aren't displaying properly though.. :S
<?php bloginfo('description'); ?>
Not really the question I
Not really the question I asked snippets of code like that are not that helpful as they do not show all the picture especially when it contains scripting, update your link please it's easier for us.
Does that div that you are trying to place background on have any height? as it doesn't seem to have content therefore no reason to exist!
And why the tables? Wordpress doesn't use tables it outputs nice semantic code.
Can you show CSS along with html and if possible update the live link for us to look at.
Edit/ Your table structure is malformed, where are the table tags?, actually forget all that I'm going to presume that this is from the template you have chosen to use, my best advice is that you only choose WP templates from sources that know what they are doing you can find plenty on the WP site, I tried to look at the template authors site to see what the theme was about but was blocked because I'm not allowing activex controls to run on that basis alone I would go elsewhere.
Yeah I understand what you
Yeah I understand what you are saying Hugo, thanks for taking time to look at it.
All I want to do is have the image of a beach in my header, of which the sand ans sea part will ljust repeat from right to left with the image off the palm trees aligned right.
The code above is what is in the header.php
the css can be found here:
If you could fathom a way so I can put more semantic code into the header.php and the relevant CSS I need for this to work, I would be eternaly grateful.
Tony did suggest one method
Tony did suggest one method earlier which is to repeat the sand/sea graphic as a background of header then nested in header place the other graphic as a inline image but made position absolute with width and height and right:0; the header will need position relative to provide the point of reference for the absolute element positioning.
Another option is to create another element or use an existing one within header that you can use to place the other graphic on as a background but have it no-repeat and positioned right.
WP should allow for placing another background on one of the elements calling the $blog_info i.e the h1 just ensure that it is as high as the header.
Have a go and post up an updated link if you can.
As for the tables mess I can't advise as that will just have to be looked for in the various template includes iirc WP had a funny habit of starting a section in one file and closing it in another.
Ok, I've set the image to
Ok, I've set the image to repeat in the header, the CSS is here:
The code using this in the header is:
"><?php bloginfo('name'); ?>
<?php bloginfo('description'); ?>
I have tried using the image inline using:
but this didn't seem to work...
Thanks for your help so far, but there must be an easier sollution to this, I've searched the internet, but maybe I'm not using the correct strings to get the results I need.
Full CSS can be viewed here:
You're confused as to the
You're confused as to the terminology in use, 'Inline Images' means an image placed in the html using the 'img' tag e.g <img src="" width="" height="" alt="" />
You have tried to set a new element with a background on but the syntax is all wrong you have a colon after the selector and 'content' doesn't exist in this fashion as a property it should be background but you would need to make the span display:block with width and height for it to show span is an inline element without content i.e text it wont display but to position the image it's perhaps easiest to set the span as position absolute.
Working with what you've done you need to change the rules to this for it to work and set .header to position:relative as I mentioned earlier:
N.B. position:relative on
N.B. position:relative on the .header div!!
Hugo your a star, I 've
Hugo your a star, I 've edited the code I was using to what you said and the image is there.
the only issue is that it needs nudging down and to the left...
I tried using
but this just knocked the image down to the left. :s
Also using position:relative just knocks the image down to the left but also alters the size of the header, it seems to work position:absolute but just needs that nudge.
I'm really starting to see how this work now in relation to using the CSS rather than HTML etc... thanks for your help.
Hugo bangs head against wall
but made position absolute with width and height and right:0; the header will need position relative to provide the point of reference for the absolute element positioning.
No no negative offsets you must read what has been written position absolute needs a reference point, at the moment it's 'body' until you position the .header setting a new context for absolute to work from.
border:#4E4E74 solid 1px;
background: #B1B18B url(images/header-bg-x.jpg) repeat-x ;
Note that the rules have been condensed using CSS shorthand.
Oh Hugo you have the
Oh Hugo you have the patience of a saint, thank you so much for your help.
Just a little snippet off the sliced image to remove the faint line and it will be perfect.
Again thank you for your time and effort.
You have given me a greater understanding of using the inline function and the relative and absolute settings.