Home > html > Text overLay wont reach bottom of the page (CSS) [on hold]

Text overLay wont reach bottom of the page (CSS) [on hold]

June 11Hits:6
Advertisement

I cannot seem to make this text overlay reach the bottom of the page and fit all over the video (OBVIOUSLY LOCAL FILE) but it can still be seen that the overlay does not go down to the bottom of the page.

please see code attached.

many thanks

body, html{    margin: 0;  padding: 0;     } video {   position: absolute;     top: 50%;   left: 50%;  transform: translate(-50%, -50%);   min-width: 100%;    min-height: 100%;   z-index: 1;     background: rgba(200,0,0,0.4); } .text {    z-index: 2;     position: absolute;     background: rgba(200,0,0,0.4);  width: 100%;    height: 100%;   top: 0;     bottom: 0;  left: 0;    right: 0;       }
    <html>         <head>        <meta charset="utf-8">        <title> The GYM </title>        <link rel="stylesheet" href="custom.css">     </head>       <body>        <div class="container">           <video poster="poster.jpg" autoplay="true" loop>              <source src="GYM.MP4" type="video/mp4">               <source src="GYM.webm" type="video/webm">             </video>      <div class="text">        Start your journey Today        </div>        </div>        </body>   </html>
Tags:html, css

Related Articles

  • Text overLay wont reach bottom of the page (CSS) [on hold]June 11

    I cannot seem to make this text overlay reach the bottom of the page and fit all over the video (OBVIOUSLY LOCAL FILE) but it can still be seen that the overlay does not go down to the bottom of the page. please see code attached. many thanks body, h

  • How to vertically align a text block at the bottom of a page in Pages?September 1

    Using Pages '09, I would like to vertically align a block of text at the bottom of a page, in Text Edition mode. The idea is to have a series of paragraphs that should behave as a block, and always be at the bottom of a page, and be pushed to the nex

  • How to have text overlay top and bottom of image with fade at top and bottom?April 17

    How can I make the text in my letter just slightly overlay the top and bottom of a centered, margin-to-margin image within my document. The image is faded at the top and bottom so that the image is just visible---you know, a gradient fade. Anyway, I

  • Drawing a box at the bottom of the page

    Drawing a box at the bottom of the pageNovember 18

    I want to draw a box with some text inside at the bottom of a page, and remove that page number. So far, I can draw the box and fill it with text using the table environment. I'm using the p option to make it have its own page. But I can't make it ap

  • Vertically align some text to top and some to bottom on same pageApril 23

    I know how to vertically align text with Word 2007. However, I would like to vertically align some text at the top and some text at the bottom, all on the same page. I tried doing this by adding a continuous section break (one that does not go to the

  • Add custom text at bottom of every page?October 27

    We've published around 200+ pages on our WordPress site and I want to add an iframe to the bottom of selected pages, or every page. For the sake of time, is there a quick or easy way to do this job with some plugin or trick? --------------Solutions--

  • Putting text at the bottom of the pageMay 16

    Have a look at the MWE example below. I want the text to appear at the bottom of the page rather than on top. I tried the \vfill option, but this does not seem to do the job. Any ideas? \documentclass{report} \begin{document} \vfill Copyright by KU L

  • Positioning of text and table always at the bottom of a page

    Positioning of text and table always at the bottom of a pageJune 14

    I need to align some content (text/tables) always at the bottom of a page. In between there is a tableofcontents - this is obvisouly of relative length. That's why I cannot use absolute distance with \vspace \documentclass[15pt, a4paper]{scrartcl} \b

  • two columns of text, how to make it fill the page to the bottom for all resolutions?

    two columns of text, how to make it fill the page to the bottom for all resolutions?February 2

    I have this layout for notebook and desktops: when the screen has more height, the text should still fill to the bottom of the page. It would be possible to upsize the font. The problem is, sizing up the font or using things like vh as the font incre

  • Add text to the bottom of particular pagesMarch 19

    I want to add [one_third][responsive] <a href="http://weburl.com/lifestyle"> <img class="aligncenter size-full wp-image-176" alt="courses" src="http://weburl.com/img/buttons/courses.png" width="310&quo

  • Placing an image with caption at the bottom of the page in XeLaTeX?

    Placing an image with caption at the bottom of the page in XeLaTeX?April 23

    I need to create a figure an place it at the bottom of the page (figure includes the image and some caption text). Is there a way to do it? I tired using figure environment, but it sends my image all the way to the end of the document. MWE: \document

  • How can I push footnotes to the bottom of the page in beamer?

    How can I push footnotes to the bottom of the page in beamer?January 21

    In beamer, footnotes appear at the bottom of the slide, but above the footline. However, the theme that I'm using has lots of empty space on the left side of the slide that would be perfect for showing these footnotes. Is there a way to position the

  • How can I get a centered comment 2cm above the bottom of the page?April 23

    Just as the title states, how can I get a centered comment 2cm above the bottom of the page? --------------Solutions------------- You can use Tikz for this stuff. \documentclass[border=10pt,a4paper]{article} \usepackage{tikz} \begin{document} \begin{

  • Placement of rules at the top or bottom of a page

    Placement of rules at the top or bottom of a page June 2

    I am writing a two-column document and I use \hrule to separate different sections. Once the \hrule reaches the top or the bottom of the page it stays there. Shouldn't for aesthetic reasons be placed elsewhere so to have text above and below it? Tex

  • Move the page number to the very bottom of the pageFebruary 4

    I need to move the page number to the very bottom of the page, so it scrapes the bottom edge of the actual sheet (US letter). How do we do that? --------------Solutions------------- \usepackage[includefoot,bottom=0pt]{geometry} You can do more than m

  • Heading at the bottom of the pageMarch 30

    I'm typesetting a large document (phdthesis) with pdflatex and I'm using KOMAscriptand the scrreprtdocument class. I was very surprised as I saw a heading (\subsubsection) standing at the bottom of a page without any text below! This is really bad st

  • Position tikz graph at the bottom of twocolumn page in memoirApril 7

    According to section 10.4 of memoir manual double column floats may only be placed at the top of a page. However, I need a tikz graph at the bottom of the page. So I have tried using minipage(floating is not required), but have not been able to get th

  • How to place a "floating text box" at a specified location in page coordinates

    How to place a "floating text box" at a specified location in page coordinatesAugust 1

    I have read this thread, but I don't think it addresses the same problem. I am looking for a way to have a command in LaTeX with an interface as follows: \placetextbox{x_in_page_percentage, y_in_page_percentage}{This is my text} The command would pla

  • Add static images to bottom of view pageSeptember 7

    I have a view called Courses, which outputs an table of college courses. I'd like to add two standalone images to the bottom of the page. Fairly simple really, but I'm not sure how to implement this layout. How can I achieve this? --------------Solut

  • SO-style Markups for References in the Bottom of the Page in Bibtex-ed Document?

    SO-style Markups for References in the Bottom of the Page in Bibtex-ed Document?January 28

    I often have a long bibliography and then later I find that I should have a notice like this buying-list in a project (not that important so not wanting them to the bibtex). I find it overkill to explain a trivia like a buying-list-notice next to mor

Copyright (C) 2018 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 1.367 s.