The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML, CSS full screen image with overlay of tables, text etc
Roey
post Mar 31 2018, 05:39 AM
Post #1





Group: Members
Posts: 4
Joined: 31-March 18
Member No.: 26,621



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 31 2018, 06:40 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



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

http://htmlhelp.com/faq/html/images.html#bgimage
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 31 2018, 10:10 AM
Post #3


.
********

Group: WDG Moderators
Posts: 7,893
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Roey
post Apr 1 2018, 03:50 AM
Post #4





Group: Members
Posts: 4
Joined: 31-March 18
Member No.: 26,621



I seem to have cracked it guys,

Many thanks for all your help.

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

This post has been edited by Roey: Apr 1 2018, 04:07 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 1 2018, 08:56 AM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



So what was the solution?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Roey
post Apr 2 2018, 07:34 AM
Post #6





Group: Members
Posts: 4
Joined: 31-March 18
Member No.: 26,621



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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Roey
post Apr 2 2018, 09:38 AM
Post #7





Group: Members
Posts: 4
Joined: 31-March 18
Member No.: 26,621



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 20th September 2018 - 09:26 AM