Help - Search - Members - Calendar
Full Version: HTML, CSS full screen image with overlay of tables, text etc
HTMLHelp Forums > Web Authoring > Graphics, Flash and Multimedia
Roey
Hi there,

Im creating a website for a friend and have come to a sticky part which im not sure how to do. Please take in mind that im a beginner.

I would like to have a Bg and on the same page the table ive already created as an overlay, so the Bg would be full screen ok 100%.

If any one could help me ?

ive tried alsorts of stuff ive found online but im not sure in which order to put things.

Many thank if some can help..

Lee smile.gif
pandy
So you want a background for BODY? What have you tried so far?

http://htmlhelp.com/faq/html/images.html#bgimage
Christian J
Sounds like OP wants the BG to cover the entire window. This can be done with CSS, see e.g. https://css-tricks.com/almanac/properties/b/background-size/ (note that the image will sometimes be cropped or stretched, since not all windows have the same proportions).

Using a table as an "overlay" sounds a bit fragile, especially if you're a beginner.
Roey
I seem to have cracked it guys,

Many thanks for all your help.

smile.gif smile.gif smile.gif smile.gif smile.gif
pandy
So what was the solution?
Roey
I refered the html page to a CSS sheet with a background command and hey presto. Therefore any tables and other stuff i could still scroll

I wanted the bg to be 100% not repeated.

html.

<link rel="stylesheet" type="text/css" href="theme.css">

css.

@charset "utf-8";
/* CSS Document */
html {
background: url(Sea-Chart.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

it did the trick.

the only problem now i have is to get the table to have like a shadow gradiant all round it....

Roey
http://franka-maria.de/Astro/

Heres a link above to show the site, now id like a shadow around the table.

Ive tried box shadows and various things, no luck.

Question is has it anything to do with the html already used for page
pandy
What are you talking about? This thread is 3½ years old and you haven't participated in it before. What do you want help with?

[This was in reply to a now removed post]
Brian Chandler
It's surely a spam link to "myaarpmedicare"
pandy
Yeah. The sig was added later. Bye-bye Walter!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2024 Invision Power Services, Inc.