17 replies [Last post]
chazza
Offline
Regular
Last seen: 15 years 25 weeks ago
Joined: 2005-11-16
Posts: 29
Points: 0

http://www.aussiesettlermotel.com.au

How can i set the y co-ordinates for the image in #content please?[/url]

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 3 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

background image positioning

Try this:

#content{
background: url(flow.gif) no-repeat 830px xxpx;
}

You can set both x and y coordinates this way.

Verschwindende wrote:
  • CSS doesn't make pies

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 47 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

background image positioning

background-position accepts two values the x and the y value so just have

background-position: xxxpx yyypx;

You might also want to consider a bit of shorthand.

#content
{
     background: url(flow.gif) no-repeat 830px 300px;
}

chazza
Offline
Regular
Last seen: 15 years 25 weeks ago
Joined: 2005-11-16
Posts: 29
Points: 0

background image positioning

Thanks - so the first is always x? i've confused things by having a content and content2. the flower image changes ofcourse depending on the length of the page - my method is all wrong

PS: what's wrong with the doctype??? :!:

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

background image positioning

There doesn't appear to be anything wrong with your doctype.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Anonymous
Anonymous's picture
Guru

background image positioning

Tyssen wrote:
There doesn't appear to be anything wrong with your doctype.
Actually it should have a complete url
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

instead of
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">

chazza
Offline
Regular
Last seen: 15 years 25 weeks ago
Joined: 2005-11-16
Posts: 29
Points: 0

background image positioning

Thanks, I'll fix that.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

background image positioning

Triumph wrote:
Tyssen wrote:
There doesn't appear to be anything wrong with your doctype.
Actually it should have a complete url
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

instead of
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">

Oops! :oops:

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

StuartL
Offline
newbie
Hervey Bay QLD Australia
Last seen: 15 years 17 weeks ago
Hervey Bay QLD Australia
Timezone: GMT+10
Joined: 2006-01-14
Posts: 2
Points: 0

background image positioning

Ummmm - why am I seeing that top image stretch way off the screen?

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

background image positioning

Because the OP has used a graphic that is 1600px wide and set it as a foreground image in a div that is only ~970px wide. image overflows it's div.

Chazza what are you trying to achieve here? it looks to me as though you should really set this graphic as a background image in a liquid div allowing for expansion of the width but setting a minimum width the page can reduce to.

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 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

background image positioning

Apropo of the DocType chaps in actual fact an XHTML DTD with or without a URL but with the public identifier will switch on standards mode. the DTD used does in fact achieve CSS1compat mode in both IE6 and FF.

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 3 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

background image positioning

chazza wrote:
PS: what's wrong with the doctype??? :!:

You'll notice the only remark about a doctype is in my sig. Ah well Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

chazza
Offline
Regular
Last seen: 15 years 25 weeks ago
Joined: 2005-11-16
Posts: 29
Points: 0

background image positioning

Anyway it's fixed, thanks

PS I don't like using background image for banners because there is no option for alt image text= greater accessibility or rather less depending on which way you look at it. I really don't care if my banner stretches to fit only that it can be read by anyone regardless of whether they want graphics or not.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 3 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

background image positioning

chazza wrote:
PS I don't like using background image for banners because there is no option for alt image text= greater accessibility or rather less depending on which way you look at it. I really don't care if my banner stretches to fit only that it can be read by anyone regardless of whether they want graphics or not.

<h1> Site Title Here</h1>

h1 {
text-indent: -9999em;
background: url(your-banner-here.gif) no-repeat 0 0;
}

It's called Image Replacement Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

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

background image positioning

You could think about accessible image replacement techniques chazza, an alt atrrribute does not necessarily make it accessible and such a long piece of alt text is not really the right use of the attribute it's for a short description of the image your use is more akin to a longdesc.

You could move your H1 tag up and use it for a text title replaced with your image, then if images don't load you have a nice styled heading for your page.

Why though is your image so wide if you weren't intending to make use of the width and what do intend doing with that width? horizontal scrolling is not a desired feature of a web page.

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

chazza
Offline
Regular
Last seen: 15 years 25 weeks ago
Joined: 2005-11-16
Posts: 29
Points: 0

background image positioning

Good ideas, didn't know you could do that!
I'll give it a go when next I work on it.
Thanks.

As for space to the right - I just figured you'll have that anyway so who cares if your banner runs along with it until I saw a fluid banner with fixed content the other day but I will probably run into problems getting that right esp. if using bg image.

StuartL
Offline
newbie
Hervey Bay QLD Australia
Last seen: 15 years 17 weeks ago
Hervey Bay QLD Australia
Timezone: GMT+10
Joined: 2006-01-14
Posts: 2
Points: 0

background image positioning

Why not just crop the image?

For a motel I would have thought that you would have wanted your site to present well on PDAs and even mobile's and a big image like that is not going to help your site do that.

chazza
Offline
Regular
Last seen: 15 years 25 weeks ago
Joined: 2005-11-16
Posts: 29
Points: 0

background image positioning

Thanks but it's not my motel - I created it for a small amount of money - had it nearly finished when the owner decided to try uploading new stuff minus all my changes and deleted all my work by accident - now they won't pay me to fix it so I'm leaving it.