Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Graphics, Flash and Multimedia _ HTML, CSS full screen image with overlay of tables, text etc

Posted by: Roey Mar 31 2018, 05:39 AM

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

Posted by: pandy Mar 31 2018, 06:40 AM

So you want a background for BODY? What have you tried so far?

http://htmlhelp.com/faq/html/images.html#bgimage

Posted by: Christian J Mar 31 2018, 10:10 AM

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.

Posted by: Roey Apr 1 2018, 03:50 AM

I seem to have cracked it guys,

Many thanks for all your help.

smile.gif smile.gif smile.gif smile.gif smile.gif

Posted by: pandy Apr 1 2018, 08:56 AM

So what was the solution?

Posted by: Roey Apr 2 2018, 07:34 AM

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....


Posted by: Roey Apr 2 2018, 09:38 AM

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)