Website responsive background

oliver2311 · May 18, 2014

Hi guys I'm experimenting a bit with html and css in dreamweaver. I'm trying to create a website with a responsive background (video background) and so far I've got the video running in loop in the background, but my problem now is to write text on over the video, for buttons etc.

Heres the code in the index file so far:

<head>

<title>icables</title>

</head>

<body>

</video>

</div>

</body>

</html>

It's only for the video so far, when I try to add a header over the video it places it on top instead of over, as if the video isn't the background.

So if you guys got any suggestions how to fix this pls help me

Website link: http://www.icables.dk

Thx

Ivyk · May 18, 2014

It's acting like it's not in the background because it is not. You can't simply place things on top of things without the right code. You want to use position: absolute; if you want to have the header over the video.

Duda777 · May 18, 2014

Hi guys I'm experimenting a bit with html and css in dreamweaver. I'm trying to create a website with a responsive background (video background) and so far I've got the video running in loop in the background, but my problem now is to write text on over the video, for buttons etc.

Heres the code in the index file so far:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>icables</title>

</head>

<body>

<div id="container">

<video width="100%" autoplay loop poster="bg.jpg">

<source src="ARMA.mp4" type="video/mp4" />

</video>

</div>

</body>

</html>

It's only for the video so far, when I try to add a header over the video it places it on top instead of over, as if the video isn't the background.

So if you guys got any suggestions how to fix this pls help me

Website link: http://www.icables.dk

Thx

You need to give your video an id tag , then in css link to your id tag , then set the background to the path of the video and appropriately set your widths, heights , size and postions. This is the way i would do it , although you can just set the postion.

Edit : Also you have no doctype, so that will not help as well

leodaniel · May 18, 2014

This is how I would do it, Video with position Absolute and z index -1000. Then you can easily work with relative position for the rest.

Hope it helped.

PS: Maybe give a background if the video is loading, but anyway, I m not a big fan of background video

HTML:

<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"><source src="#.webm" type="video/webm"><source src="#.mp4" type="video/mp4">Video not supported </video>

CSS

html{    min-height:100%;    position:relative}#video_background {  position: absolute;  bottom: 0px;  right: 0px;  min-width: 100%;  min-height: 100%;  width: auto;  height: auto;  z-index: -1000;  overflow: hidden; }

oliver2311 · May 18, 2014

This is how I would do it, Video with position Absolute and z index -1000. Then you can easily work with relative position for the rest.

Hope it helped.

PS: Maybe give a background if the video is loading, but anyway, I m not a big fan of background video

HTML:
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"><source src="#.webm" type="video/webm"><source src="#.mp4" type="video/mp4">Video not supported </video>
CSS
html{    min-height:100%;    position:relative}#video_background {  position: absolute;  bottom: 0px;  right: 0px;  min-width: 100%;  min-height: 100%;  width: auto;  height: auto;  z-index: -1000;  overflow: hidden; }

Do i need to create another document for the CSS code?

leodaniel · May 18, 2014

Do i need to create another document for the CSS code?

Yes, always seperate CSS and HTML!!!!!!!!!!

Check out W3School, you will find anything you need there.

tbc · May 19, 2014

no. do NOT use w3school.

use MDN (mozilla developer network).

Paralectic · May 19, 2014

Yes, always seperate CSS and HTML!!!!!!!!!!

Check out W3School, you will find anything you need there.

Seperation of CSS and HTML is personal preference, when designing pages I usually keep the styling in <style></style> tags untill it's finished.

Ciccioo · May 19, 2014

Seperation of CSS and HTML is personal preference, when designing pages I usually keep the styling in <style></style> tags untill it's finished.

it's more about what is most practical for the specific scenario imo

if you're building a single, long, complex page then you could just use the <style> tag

if you're building a whole website with many many pages that need to have that 'family feeling' tho, it's almost required to have a seperated stylesheet that is referenced in every page

tbc · May 19, 2014

using styles blocks is only justified on 'proof of concept' pages (such as making an anchor tag look like a button). it's easier to pass the test file (notice singular) to another person. obviously you would have CDNs for major libraries and script blocks for js.

using it on a production site is NEVER a good idea unless you have a SMALL single page.*

the productivity loss from constantly scrolling back and forth from your html to css to find a class is gargantuan and just frankly very annoying.

* there is one caveat where you inline the css needed for above the fold content to help the 1000ms to glass guideline....but inlining the CSS should be part of your build system, not something a dev would actually do during coding time.

leodaniel · May 19, 2014

using styles blocks is only justified on 'proof of concept' pages (such as making an anchor tag look like a button). it's easier to pass the test file (notice singular) to another person. obviously you would have CDNs for major libraries and script blocks for js.

using it on a production site is NEVER a good idea unless you have a SMALL single page.*

the productivity loss from constantly scrolling back and forth from your html to css to find a class is gargantuan and just frankly very annoying.

* there is one caveat where you inline the css needed for above the fold content to help the 1000ms to glass guideline....but inlining the CSS should be part of your build system, not something a dev would actually do during coding time.

Completely agree with you!

leodaniel · May 19, 2014

no. do NOT use w3school.

use MDN (mozilla developer network).

Why not?? I think for beginning it's quiet usefull...

And I think he don't has much web development experience... (correct me if I am wrong )

oliver2311 · May 19, 2014

Seperation of CSS and HTML is personal preference, when designing pages I usually keep the styling in <style></style> tags untill it's finished.

Thanks, i will try out both solutions

oliver2311 · May 19, 2014

Why not?? I think for beginning it's quiet usefull...

And I think he don't has much web development experience... (correct me if I am wrong )

You are not

tbc · May 19, 2014

Oliver, you're supposed to marl the actual post as the correct answer. Not yourself

tbc · May 19, 2014

http://gal.steinitz.com/blog/2013/07/21/why-w3schools-is-bad-for-the-internet/

one of many articles explaining why w3schools is a BAD

adding further, w3schools is basically a grocery store. does a grocery store care about your nutrition? hell no. they care about having tasty products that make you keep coming back. do they care about giving you the best prices? hell no, their sole reason for existence is to get your money at your expense.

what does this mean in terms of technology? w3schools RARELY has links outside of its website because it doesn't benefit from other sites getting traffic. this crucially cuts you off from hundreds (thousands?) of bloggers who have practical experience and can provide you with multiple teaching styles so you have the freedom to pick which one works best for you.

MDN is effectively a moderated public wiki. if something is wrong or too new to be included, you're not stuck with outdated information because there are many, many other devs who are on the case and got your back. this isn't wikipedia where you have page vandalism either. technical data is held to the highest standard (the truth).

leodaniel · May 21, 2014

http://gal.steinitz.com/blog/2013/07/21/why-w3schools-is-bad-for-the-internet/

one of many articles explaining why w3schools is a BAD

adding further, w3schools is basically a grocery store. does a grocery store care about your nutrition? hell no. they care about having tasty products that make you keep coming back. do they care about giving you the best prices? hell no, their sole reason for existence is to get your money at your expense.

what does this mean in terms of technology? w3schools RARELY has links outside of its website because it doesn't benefit from other sites getting traffic. this crucially cuts you off from hundreds (thousands?) of bloggers who have practical experience and can provide you with multiple teaching styles so you have the freedom to pick which one works best for you.

MDN is effectively a moderated public wiki. if something is wrong or too new to be included, you're not stuck with outdated information because there are many, many other devs who are on the case and got your back. this isn't wikipedia where you have page vandalism either. technical data is held to the highest standard (the truth).

Okey, I understand.

Anyway, it's some years ago I used it last, but I basically begann learning with it, this is why I mentioned it.

Ciccioo · May 21, 2014

-snip-

even though i agree with all of that, i have to admit that i'm guilty for still relying on w3schools for a thing: when you want to know whether or not a certain CSS property or JS function will work across all browsers, i find w3school to be really helpful

i don't know of any other website that has those browser-compatibility infos

MDN usually says what works with firefox, and for which version of firefox, and tells you if the thing is standard or not

but browsers sometimes just do dafuq they want, so you need an actual comparison table to know what browser your code will be compatible with

edit:

OT as hell

tbc · May 21, 2014

...

i'm going to bet you're thinking about the old MDN pages.

the new ones feature a table showing browser support near the bottom and usually include a polyfill somewhere on the page if possible.

as well, other community resources such as 'caniuse' and 'html5please' are REALLY great at quickly giving you an answer on a feature as well as recommending polyfills.

daviesjohn · June 9, 2014

Try doing it with CSS or HTML5 you will desinitely get it.Or else if you are finding it difficult then try doing it with the CSS pseudo codes.This would help you making it easy. If you need more information about this then check florida web design company .

Sign In

Website responsive background

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites