16 replies [Last post]
virtualburn
virtualburn's picture
Offline
Regular
Last seen: 12 years 3 weeks ago
Joined: 2006-10-10
Posts: 15
Points: 0

www.shootingfish.co.uk

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?

thanks.

~ Make hay while the sun shines ~ CHS

csscr
csscr's picture
Offline
Enthusiast
Last seen: 2 years 42 weeks ago
Timezone: GMT+7
Joined: 2003-03-12
Posts: 126
Points: 55

background-image

Hi virtualburn,
Sounds like you should have the beach as a repeated background-image and the other image as a image element in the markup.

virtualburn
virtualburn's picture
Offline
Regular
Last seen: 12 years 3 weeks ago
Joined: 2006-10-10
Posts: 15
Points: 0

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.

~ Make hay while the sun shines ~ CHS

virtualburn
virtualburn's picture
Offline
Regular
Last seen: 12 years 3 weeks ago
Joined: 2006-10-10
Posts: 15
Points: 0

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?

~ Make hay while the sun shines ~ CHS

virtualburn
virtualburn's picture
Offline
Regular
Last seen: 12 years 3 weeks ago
Joined: 2006-10-10
Posts: 15
Points: 0

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--]

~ Make hay while the sun shines ~ CHS

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

virtualburn
virtualburn's picture
Offline
Regular
Last seen: 12 years 3 weeks ago
Joined: 2006-10-10
Posts: 15
Points: 0

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('name'); ?>

<?php bloginfo('description'); ?>

~ Make hay while the sun shines ~ CHS

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Not really the question I

Not really the question I asked Smile 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.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

virtualburn
virtualburn's picture
Offline
Regular
Last seen: 12 years 3 weeks ago
Joined: 2006-10-10
Posts: 15
Points: 0

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.

Th images are here:
www.shootingfish.co.uk/wp-content/themes/tiga/images/header-bg-x.jpg and www.shootingfish.co.uk/wp-content/themes/tiga/images/header-bg.jpg

The code above is what is in the header.php
the css can be found here:
www.shootingfish.co.uk/wp-content/themes/tiga/style.php

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.

~D

~ Make hay while the sun shines ~ CHS

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

virtualburn
virtualburn's picture
Offline
Regular
Last seen: 12 years 3 weeks ago
Joined: 2006-10-10
Posts: 15
Points: 0

Ok, I've set the image to

Ok, I've set the image to repeat in the header, the CSS is here:
.header {
border-color:#4E4E74;
background-color:#B1B18B;
height:100px;
background-image:url("images/header-bg-x.jpg");
background-repeat:repeat-x;
background-position:left;
border-style:solid;
margin-bottom:5px;
border-width: 1px;
padding-left:10px;
}

The code using this in the header is:


"><?php bloginfo('name'); ?>

<?php bloginfo('description'); ?>


########################################

I have tried using the image inline using:

with:

span#inline:{content:url(images/header-bg.jpg)}

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.

~D

Full CSS can be viewed here:
http://shootingfish.co.uk/wp-content/themes/tiga/style.php

~ Make hay while the sun shines ~ CHS

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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:

span#inline{
background:url(wp-content/themes/tiga/images/header-bg.jpg);
width:89px;
height:100px;
position:absolute;
right:0;
top:0;

}

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

N.B. position:relative on

N.B. position:relative on the .header div!! Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

virtualburn
virtualburn's picture
Offline
Regular
Last seen: 12 years 3 weeks ago
Joined: 2006-10-10
Posts: 15
Points: 0

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 right:5;
top:5;

and

right:-5; top:-5;

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.

~ Make hay while the sun shines ~ CHS

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hugo bangs head against wall

Smile

Hugo bangs head against wall and again wrote:

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.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

.header {

.header { position:relative; height:124px; border:#4E4E74 solid 1px; background: #B1B18B url(images/header-bg-x.jpg) repeat-x ; margin-bottom:5px; padding-left:10px; }

Note that the rules have been condensed using CSS shorthand.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

virtualburn
virtualburn's picture
Offline
Regular
Last seen: 12 years 3 weeks ago
Joined: 2006-10-10
Posts: 15
Points: 0

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.

www.shootingfish.co.uk.

~D

~ Make hay while the sun shines ~ CHS