Background Images Move (Full Version)

All Forums >> [Web Development] >> Microsoft FrontPage Help



Message

chefsballs -> Background Images Move (5/31/2005 9:17:27)

Hi All

I have a dilemma. I have designed a website and want to use an image, albeit faded, as a  background.

The problem I have is when I have designed it, i go to background option, use image, browse and when the users have different screen resolutions the image appears differently, eg four times sometimes.

How do i force the image to stay in place as I want to put text over the top?

Plus

Regards

Chef



Larry M. -> RE: Background Images Move (5/31/2005 10:29:03)

http://www.frontpagewebmaster.com/m-269933/tm.htm



Kitka -> RE: Background Images Move (5/31/2005 14:45:07)

Hi Dominic,

All the possibilities for displaying background images using CSS are shown clearly here:
http://www.w3schools.com/css/css_background.asp



chefsballs -> RE: Background Images Move (5/31/2005 17:45:45)

Thank you so much kitka :)



chefsballs -> RE: Background Images Move (6/1/2005 7:34:20)

One q. How do i replace the url smiley gif with a local picture? Or change the location in other words?



chefsballs -> RE: Background Images Move (6/1/2005 11:20:14)

Hey, i figured this out all by little self. Thank you to w3schools too. I love this place.



chefsballs -> RE: Background Images Move (10/30/2005 11:07:19)

Ok, i need a bit more help with this please. Heres my dilemma:

I have applied a test image as a css style which when the page is loaded in the browser, works fine. However when i try to view the image on my local machine i just get a grey image which means i cannot position the text etc correctly?

Heres the html:

<html>
<head>

<style type="text/css">
body
{
background-image:
url('http://www.webmatrixdesign.co.uk/images/test_bgr.jpg')
}
</style>

</head>

<body>
</body>

</html>



chefsballs -> RE: Background Images Move (10/30/2005 14:57:59)

I have changed the link to an image only not a url but im still having no luck even with looking ay w3schools thread, anyone help please?



jaybee -> RE: Background Images Move (10/30/2005 16:03:12)

Depends where your folders are relative to the root of your site but if you want to see the image in FP as well as in the browser then try

body
{
background-image: url('../images/test_bgr.jpg')
}

Your original wouldn't work because it was a full web URI



chefsballs -> RE: Background Images Move (10/30/2005 16:58:13)

ok, the image i want to use is in the images folder after my domain name and is called test_bgr.jpg
When i put this into dreamweaver as a bground image i just get the text you gave me eg
{
background-image: url('/images/test_bgr.jpg')
}
I know i need to point it to a virtual directory but can i put the text you gave me anywhere in the body tags? and is the text above correct? thank you



chefsballs -> RE: Background Images Move (10/30/2005 18:04:42)

This is my site http://www.webmatrixdesign.co.uk/

I am just playing at the moment, as you see it works ok on the server. The bgr image on my machine is in my webs etc
this is the code i thought would work as i copied the image into the images folder within my webs\webmatrix etc:
{
background-image: url(C:\Documents and Settings\Owner\My Documents\My Webs\Web Matrix Oct05\/images/test_bgr.jpg)
}
But looking at the slashes im guessing this is wrong plus the image doesnt appear in dreamweaver so it cant be right.



Kitka -> RE: Background Images Move (10/30/2005 18:11:26)

quote:

is the text above correct?


No. You need this: 

body  {
background-image: url('images/test_bgr.jpg')
}


And the best place for it, is between the <head></head> tags like you have it in message 7 above, or in an external stylesheet.



chefsballs -> RE: Background Images Move (10/30/2005 18:25:18)

Theres something im doing really doing wrong here because i know that sometimes if you copy the code directly from a web page eg this forum it doesnt work, so you have to copy it into notepad first and then copy it, so i have done this. I still cant view the pictue on my machine but on the site its fine??

the total code in the head tag is:
<html>
<head>
<style type="text/css">
body
{
background-image:
url('/images/test_bgr.jpg');
background-repeat:
no-repeat;
background-position:
center;
}
</style>
body {
background-image: url('images/test_bgr.jpg')
}
</head>

SO where does the local image point go? I have tried putting the text in but all that appears is text not the image? Thanks



Kitka -> RE: Background Images Move (10/30/2005 18:54:19)

Try this: 

<html>
<head>
<style type="text/css">
body
{
background: url('images/test_bgr.jpg') no-repeat center;
}
</style>
</head>



chefsballs -> RE: Background Images Move (10/31/2005 15:17:26)

Thanks but all i get now is a grey square in dreamweaver but its ok on the website still. sorry :(



Kitka -> RE: Background Images Move (10/31/2005 15:50:18)

The problem seems to be with Dreamweaver. I just tried opening one of my sites, that has background images specified in an external stylesheet, in Dreamweaver and it shows them as grey, just as you describe. But if I use "Preview in Browser" from Dreamweaver, the background images appear exactly as they should.

Maybe you should try editing in FrontPage [;)]



jaybee -> RE: Background Images Move (10/31/2005 16:01:40)

What version of Dreamweaver are you both using?



chefsballs -> RE: Background Images Move (10/31/2005 16:05:41)

Doesnt show anything at all in front page - im lost now.



chefsballs -> RE: Background Images Move (10/31/2005 16:06:31)

quote:

ORIGINAL: jaybee

What version of Dreamweaver are you both using?


Im using version 6



Kitka -> RE: Background Images Move (10/31/2005 16:08:30)

MX, which I think is V6.



chefsballs -> RE: Background Images Move (10/31/2005 16:10:11)

mine is dreamweaver mx too version 6



jaybee -> RE: Background Images Move (10/31/2005 18:06:00)

OK, I've got MX2004 which seems to work fine. I'm off to bed now but in the morning I'll load up MX and see what happens.

Have you thought about moving over to Frontpage, HTML Kit or even notepad? [&:]



Kitka -> RE: Background Images Move (10/31/2005 18:35:00)

Mystery solved! [sm=boogie.gif] Dreamweaver MX doesn't like the quotes in the CSS code.

When I change this: 
background-image: url('images/bg.jpg');

to this: 
background-image: url(images/bg.jpg);


my background images show perfectly in Design View.

I rarely use Dreamweaver, so had never noticed this strange behaviour before. I wonder how important or "correct" it is to have the quotes. [8|]



chefsballs -> RE: Background Images Move (10/31/2005 18:43:38)

quote:

ORIGINAL: jaybee

OK, I've got MX2004 which seems to work fine. I'm off to bed now but in the morning I'll load up MX and see what happens.

Have you thought about moving over to Frontpage, HTML Kit or even notepad? [&:]


In Frontpage it doesnt display any image at all



chefsballs -> RE: Background Images Move (10/31/2005 18:44:19)

quote:

ORIGINAL: Kitka

Mystery solved! [sm=boogie.gif] Dreamweaver MX doesn't like the quotes in the CSS code.

When I change this: 
background-image: url('images/bg.jpg');

to this: 
background-image: url(images/bg.jpg);


my background images show perfectly in Design View.

I rarely use Dreamweaver, so had never noticed this strange behaviour before. I wonder how important or "correct" it is to have the quotes. [8|]


Nope it doesnt change anything for me [:o]

<html>
<head>
<style type="text/css">
body
{
background: url('images/test_bgr.jpg') no-repeat center;
}
</style>
</head>

becomes this?

<html>
<head>
<style type="text/css">
body
{
background: url(images/test_bgr.jpg) no-repeat center;
}
</style>
</head>



Kitka -> RE: Background Images Move (10/31/2005 19:20:13)

Do you have the complete html code on the page? What you are quoting above is only the headers, no body is included.

You need something like this: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Page</title>
<style type="text/css">
body
{
background: url(images/test_bgr.jpg) no-repeat center;
}
</style>
</head> 

<body>
<p>YOUR TEXT HERE</p>
</body>
</html>



chefsballs -> RE: Background Images Move (11/1/2005 3:05:53)

Yes I have



jaybee -> RE: Background Images Move (11/1/2005 4:27:44)

Why don't you post the code for the entire page, Kitka can pull it into her Dreamweaver/Frontpage and see what she gets. I have a client panic on this morning but I can look at it later.



chefsballs -> RE: Background Images Move (11/1/2005 5:41:43)


quote:

ORIGINAL: jaybee

Why don't you post the code for the entire page, Kitka can pull it into her Dreamweaver/Frontpage and see what she gets. I have a client panic on this morning but I can look at it later.


Thanks, the full html which works in the browser but only appears as a grey square in dreamweaver and no image whatsoever in frontpage is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body
{
background: url('images/test_bgr.jpg') no-repeat center;
}
</style>
</head>

<body>

</body>
</html>

Incidentally im looking on google for this. Do you think this could be anything to do with java?



Kitka -> RE: Background Images Move (11/1/2005 6:26:48)

The code as you posted it, works perfectly for me in FrontPage as is, and works in Dreamweaver if I remove the quotes around the background url.

Are you certain that "test_bgr.jpg" is located in the "images" folder of your web and that the name of it is exactly the same?

Can you open/view the image from your hard drive in a browser or graphics program?

Is the page you are working on saved in the same folder as the one containing the "images" folder?

After saving the page did you refresh the view to ensure you are seeing any changes?

quote:

Do you think this could be anything to do with java?


Java? [&:] There is no Java or Javascript in the code (that you have quoted so far). How could Java be affecting it? Is there more code on the page that you haven't mentioned previously?



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.125