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

Posted by: pandy Sep 23 2021, 04:35 AM

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]

Posted by: Brian Chandler Sep 24 2021, 10:01 AM

It's surely a spam link to "myaarpmedicare"

Posted by: pandy Sep 24 2021, 01:36 PM

Yeah. The sig was added later. Bye-bye Walter!

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