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
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-2019 Invision Power Services, Inc.