/    Sign up×
Community /Pin to ProfileBookmark

background resized when the browser is resized or restored down

Copy linkTweet thisAlerts:
Jan 05.2007

Hi All,

I am building a simple page displaying an image in the background. When I resize my browser or click on ‘restore down’, the page and image is cut.

I would like the entire full page to appear regardless of how the browser is re-sized.

Does my question make sense?

here is my code:

[code=html]<html>
<head>

<title>My <?php echo $page_name;?> home page</title>

</head>

<table>

<TR><TD ALIGN=”center”>

<BODY BGCOLOR=”#000000″ BACKGROUND=”new.jpg”>

</TD></TR>
</table>

</body>

</html>[/code]

to post a comment
HTML

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@sinciliteJan 05.2007 — Your <body> tag needs to come straight after the </head> at the moment you have the start of your table before the start of the <body> of your page
Copy linkTweet thisAlerts:
@memeauthorJan 05.2007 — i removed the table tags completely. It didn't make any difference.

Please note, the size of the background image is 700x500, would this be the reason for it not re-sizing when the browser is re-sized?

If so, what can I do to solve this?

Many thanks
Copy linkTweet thisAlerts:
@grumpyoldtechsJan 05.2007 — you can either make an image with a fade or repeat or use javascript and have different sized images.

also DON'T use CAPITALIZED tags!

or align="center" its depreciated
Copy linkTweet thisAlerts:
@memeauthorJan 05.2007 — thanks.

I am not sure what you mean by 'you can make an image with a fade or repeat'.

also, I've removed that align=center tag because I removed the table completely.

here is how my code looks like now. But I still have the problem!

[code=html]<html>
<head>

<title><?php echo $page_name;?> home page</title>


</head>


<body bgcolor="#000000" style="background-image:url(new.jpg); background-repeat:no-repeat;">



</body>


</html>[/code]
Copy linkTweet thisAlerts:
@memeauthorJan 05.2007 — I am sorry to pester. Can anyone help me with the above?

Regards
Copy linkTweet thisAlerts:
@grumpyoldtechsJan 05.2007 — you either need to make an image which you can repeat over the page or.

edit the image so it fades to a solid color and have a blackground color so it doesn't look out of place.

or use javascript and different sized images for each screen resolutions.

also remove bgcolor="" it should be in the CSS as background-color:#000;
Copy linkTweet thisAlerts:
@sinciliteJan 05.2007 — At the moment you have you background image set to no-repeat which obviously means that its not going to repeat.

If you want it to repeat across the y axis use repeat-y and if you want it to repeat across the x axis use repeat-x. For both it's just repeat.
Copy linkTweet thisAlerts:
@memeauthorJan 06.2007 — Hello,

I don't want my image to repeat. I would like it to be displayed in the full page. However, if the browser page is resized, the image should resize with it. How can I do this

many thanks
Copy linkTweet thisAlerts:
@grumpyoldtechsJan 06.2007 — Hello,

I don't want my image to repeat. I would like it to be displayed in the full page. However, if the browser page is resized, the image should resize with it. How can I do this

many thanks[/QUOTE]

read the previous posts. doing what you want to do isn't an easy thing that any old wysiwyg website builder can do. its also not a common thing to be done.

people have told you your options yet you still ask an answered question

you either need to make an image which you can repeat over the page or.

edit the image so it fades to a solid color and have a blackground color so it doesn't look out of place.

or use javascript and different sized images for each screen resolutions.
[/quote]
Copy linkTweet thisAlerts:
@_Aerospace_Eng_Jan 06.2007 — Maybe you are looking for something more like this: http://www.cssplay.co.uk/layouts/background.html
×

Success!

Help @meme spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...