CSS text on overlaySet cellpadding and cellspacing in CSS?Convert HTML + CSS to PDF with PHP?Vertically align text next to an image?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?Is there a CSS parent selector?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSHow do I vertically center text with CSS?Is it possible to apply CSS to half of a character?
Why are electrically insulating heatsinks so rare? Is it just cost?
How to prevent "they're falling in love" trope
Can I use a neutral wire from another outlet to repair a broken neutral?
Why is consensus so controversial in Britain?
Emailing HOD to enhance faculty application
Why "Having chlorophyll without photosynthesis is actually very dangerous" and "like living with a bomb"?
What is the intuition behind short exact sequences of groups; in particular, what is the intuition behind group extensions?
Intersection of two sorted vectors in C++
How is it possible to have an ability score that is less than 3?
How can I make my BBEG immortal short of making them a Lich or Vampire?
Theorems that impeded progress
How to model explosives?
What reasons are there for a Capitalist to oppose a 100% inheritance tax?
Facing a paradox: Earnshaw's theorem in one dimension
Why does Kotter return in Welcome Back Kotter
I Accidentally Deleted a Stock Terminal Theme
What do you call someone who asks many questions?
What is the most common color to indicate the input-field is disabled?
Why is the 'in' operator throwing an error with a string literal instead of logging false?
Will google still index a page if I use a $_SESSION variable?
Is it unprofessional to ask if a job posting on GlassDoor is real?
Why doesn't H₄O²⁺ exist?
Brothers & sisters
Can a virus destroy the BIOS of a modern computer?
CSS text on overlay
Set cellpadding and cellspacing in CSS?Convert HTML + CSS to PDF with PHP?Vertically align text next to an image?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?Is there a CSS parent selector?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSHow do I vertically center text with CSS?Is it possible to apply CSS to half of a character?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
So I have this code which plays a video on my website.
When I run it locally the video is fine and the text is over it
When I upload it the code is below it?
I used z-index 2? to bring the text to the front
On the website it looks like this
https://gyazo.com/b44cff259296ad76b3542880203bed14
Locally it looks like this - https://gyazo.com/448e05e2e55cc904860cc2c62f0f33cc
So I'm very new to stack overflow and cannot get my head around the CTRL + K
So here are 2 ghostbin links. (Sorry)
HTML Code - https://ghostbin.com/paste/87ctg
CSS Code - https://ghostbin.com/paste/cwnsf
body
background-color: #000000;
padding: 0px;
margin: 0px;
font-family: "Futura Hv BT";
overflow-x: hidden;
.v-header
height: 100vh;
display: flex;
align-items: center;
color: white;
.container
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
.fullscreen-video-wrap
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
.fullscreen-video-wrap video
min-width: 100%;
min-height: 100%;
.header-content {
z-index: 2;
<header class="v-header container">
<div class="fullscreen-video-wrap">
<video src="https://gazzy.xyz/video.mp4" autoplay="true" loop="true">
</video>
</div>
<div class="header-content">
<h1>gazzy</h1>
<a target="_blank" href="https://steamcommunity.com/id/fovon/">steam</a>
<a target="_blank" href="https://discord.gg/Gb5nrNN">discord server</a>
<button type="button" onclick="copyToClipboard('gazzy#1004'); alert('discord username copied to clipboard')">discord</button>
</div>
</header>
html css
add a comment |
So I have this code which plays a video on my website.
When I run it locally the video is fine and the text is over it
When I upload it the code is below it?
I used z-index 2? to bring the text to the front
On the website it looks like this
https://gyazo.com/b44cff259296ad76b3542880203bed14
Locally it looks like this - https://gyazo.com/448e05e2e55cc904860cc2c62f0f33cc
So I'm very new to stack overflow and cannot get my head around the CTRL + K
So here are 2 ghostbin links. (Sorry)
HTML Code - https://ghostbin.com/paste/87ctg
CSS Code - https://ghostbin.com/paste/cwnsf
body
background-color: #000000;
padding: 0px;
margin: 0px;
font-family: "Futura Hv BT";
overflow-x: hidden;
.v-header
height: 100vh;
display: flex;
align-items: center;
color: white;
.container
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
.fullscreen-video-wrap
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
.fullscreen-video-wrap video
min-width: 100%;
min-height: 100%;
.header-content {
z-index: 2;
<header class="v-header container">
<div class="fullscreen-video-wrap">
<video src="https://gazzy.xyz/video.mp4" autoplay="true" loop="true">
</video>
</div>
<div class="header-content">
<h1>gazzy</h1>
<a target="_blank" href="https://steamcommunity.com/id/fovon/">steam</a>
<a target="_blank" href="https://discord.gg/Gb5nrNN">discord server</a>
<button type="button" onclick="copyToClipboard('gazzy#1004'); alert('discord username copied to clipboard')">discord</button>
</div>
</header>
html css
My guess is that your local version is running a slightly different version of the code than the one you have on the live website. Maybe you have some per-processor that tidy the code when you pack it for deployment?
– Guy Yogev
Mar 8 at 23:00
Hello Gazzy. Welcome to SO. Please put the code into the post.
– Olafant
Mar 8 at 23:10
please include any js that you are using
– Rachel Gallen
Mar 8 at 23:52
Your code seems fine. Try hard refreshing your browser by SHIFT + F5. It's probably getting an old cached version of the CSS file.
– perellorodrigo
Mar 9 at 0:15
add a comment |
So I have this code which plays a video on my website.
When I run it locally the video is fine and the text is over it
When I upload it the code is below it?
I used z-index 2? to bring the text to the front
On the website it looks like this
https://gyazo.com/b44cff259296ad76b3542880203bed14
Locally it looks like this - https://gyazo.com/448e05e2e55cc904860cc2c62f0f33cc
So I'm very new to stack overflow and cannot get my head around the CTRL + K
So here are 2 ghostbin links. (Sorry)
HTML Code - https://ghostbin.com/paste/87ctg
CSS Code - https://ghostbin.com/paste/cwnsf
body
background-color: #000000;
padding: 0px;
margin: 0px;
font-family: "Futura Hv BT";
overflow-x: hidden;
.v-header
height: 100vh;
display: flex;
align-items: center;
color: white;
.container
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
.fullscreen-video-wrap
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
.fullscreen-video-wrap video
min-width: 100%;
min-height: 100%;
.header-content {
z-index: 2;
<header class="v-header container">
<div class="fullscreen-video-wrap">
<video src="https://gazzy.xyz/video.mp4" autoplay="true" loop="true">
</video>
</div>
<div class="header-content">
<h1>gazzy</h1>
<a target="_blank" href="https://steamcommunity.com/id/fovon/">steam</a>
<a target="_blank" href="https://discord.gg/Gb5nrNN">discord server</a>
<button type="button" onclick="copyToClipboard('gazzy#1004'); alert('discord username copied to clipboard')">discord</button>
</div>
</header>
html css
So I have this code which plays a video on my website.
When I run it locally the video is fine and the text is over it
When I upload it the code is below it?
I used z-index 2? to bring the text to the front
On the website it looks like this
https://gyazo.com/b44cff259296ad76b3542880203bed14
Locally it looks like this - https://gyazo.com/448e05e2e55cc904860cc2c62f0f33cc
So I'm very new to stack overflow and cannot get my head around the CTRL + K
So here are 2 ghostbin links. (Sorry)
HTML Code - https://ghostbin.com/paste/87ctg
CSS Code - https://ghostbin.com/paste/cwnsf
body
background-color: #000000;
padding: 0px;
margin: 0px;
font-family: "Futura Hv BT";
overflow-x: hidden;
.v-header
height: 100vh;
display: flex;
align-items: center;
color: white;
.container
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
.fullscreen-video-wrap
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
.fullscreen-video-wrap video
min-width: 100%;
min-height: 100%;
.header-content {
z-index: 2;
<header class="v-header container">
<div class="fullscreen-video-wrap">
<video src="https://gazzy.xyz/video.mp4" autoplay="true" loop="true">
</video>
</div>
<div class="header-content">
<h1>gazzy</h1>
<a target="_blank" href="https://steamcommunity.com/id/fovon/">steam</a>
<a target="_blank" href="https://discord.gg/Gb5nrNN">discord server</a>
<button type="button" onclick="copyToClipboard('gazzy#1004'); alert('discord username copied to clipboard')">discord</button>
</div>
</header>
body
background-color: #000000;
padding: 0px;
margin: 0px;
font-family: "Futura Hv BT";
overflow-x: hidden;
.v-header
height: 100vh;
display: flex;
align-items: center;
color: white;
.container
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
.fullscreen-video-wrap
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
.fullscreen-video-wrap video
min-width: 100%;
min-height: 100%;
.header-content {
z-index: 2;
<header class="v-header container">
<div class="fullscreen-video-wrap">
<video src="https://gazzy.xyz/video.mp4" autoplay="true" loop="true">
</video>
</div>
<div class="header-content">
<h1>gazzy</h1>
<a target="_blank" href="https://steamcommunity.com/id/fovon/">steam</a>
<a target="_blank" href="https://discord.gg/Gb5nrNN">discord server</a>
<button type="button" onclick="copyToClipboard('gazzy#1004'); alert('discord username copied to clipboard')">discord</button>
</div>
</header>
body
background-color: #000000;
padding: 0px;
margin: 0px;
font-family: "Futura Hv BT";
overflow-x: hidden;
.v-header
height: 100vh;
display: flex;
align-items: center;
color: white;
.container
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
.fullscreen-video-wrap
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
.fullscreen-video-wrap video
min-width: 100%;
min-height: 100%;
.header-content {
z-index: 2;
<header class="v-header container">
<div class="fullscreen-video-wrap">
<video src="https://gazzy.xyz/video.mp4" autoplay="true" loop="true">
</video>
</div>
<div class="header-content">
<h1>gazzy</h1>
<a target="_blank" href="https://steamcommunity.com/id/fovon/">steam</a>
<a target="_blank" href="https://discord.gg/Gb5nrNN">discord server</a>
<button type="button" onclick="copyToClipboard('gazzy#1004'); alert('discord username copied to clipboard')">discord</button>
</div>
</header>
html css
html css
edited Mar 9 at 4:54
Guy Yogev
670313
670313
asked Mar 8 at 22:28
GazzyGazzy
1
1
My guess is that your local version is running a slightly different version of the code than the one you have on the live website. Maybe you have some per-processor that tidy the code when you pack it for deployment?
– Guy Yogev
Mar 8 at 23:00
Hello Gazzy. Welcome to SO. Please put the code into the post.
– Olafant
Mar 8 at 23:10
please include any js that you are using
– Rachel Gallen
Mar 8 at 23:52
Your code seems fine. Try hard refreshing your browser by SHIFT + F5. It's probably getting an old cached version of the CSS file.
– perellorodrigo
Mar 9 at 0:15
add a comment |
My guess is that your local version is running a slightly different version of the code than the one you have on the live website. Maybe you have some per-processor that tidy the code when you pack it for deployment?
– Guy Yogev
Mar 8 at 23:00
Hello Gazzy. Welcome to SO. Please put the code into the post.
– Olafant
Mar 8 at 23:10
please include any js that you are using
– Rachel Gallen
Mar 8 at 23:52
Your code seems fine. Try hard refreshing your browser by SHIFT + F5. It's probably getting an old cached version of the CSS file.
– perellorodrigo
Mar 9 at 0:15
My guess is that your local version is running a slightly different version of the code than the one you have on the live website. Maybe you have some per-processor that tidy the code when you pack it for deployment?
– Guy Yogev
Mar 8 at 23:00
My guess is that your local version is running a slightly different version of the code than the one you have on the live website. Maybe you have some per-processor that tidy the code when you pack it for deployment?
– Guy Yogev
Mar 8 at 23:00
Hello Gazzy. Welcome to SO. Please put the code into the post.
– Olafant
Mar 8 at 23:10
Hello Gazzy. Welcome to SO. Please put the code into the post.
– Olafant
Mar 8 at 23:10
please include any js that you are using
– Rachel Gallen
Mar 8 at 23:52
please include any js that you are using
– Rachel Gallen
Mar 8 at 23:52
Your code seems fine. Try hard refreshing your browser by SHIFT + F5. It's probably getting an old cached version of the CSS file.
– perellorodrigo
Mar 9 at 0:15
Your code seems fine. Try hard refreshing your browser by SHIFT + F5. It's probably getting an old cached version of the CSS file.
– perellorodrigo
Mar 9 at 0:15
add a comment |
1 Answer
1
active
oldest
votes
Im also new to web dev, however i figured that if you try margins around the text div it might work? Maybe try:mergin-top:20px;
and see how that edits the text, if not try going through the steps here: https://www.w3schools.com/howto/howto_css_image_text.asp
or try this video if you hate reading like me:
https://www.youtube.com/watch?v=edCuCED3Zmo
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55071864%2fcss-text-on-overlay%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Im also new to web dev, however i figured that if you try margins around the text div it might work? Maybe try:mergin-top:20px;
and see how that edits the text, if not try going through the steps here: https://www.w3schools.com/howto/howto_css_image_text.asp
or try this video if you hate reading like me:
https://www.youtube.com/watch?v=edCuCED3Zmo
add a comment |
Im also new to web dev, however i figured that if you try margins around the text div it might work? Maybe try:mergin-top:20px;
and see how that edits the text, if not try going through the steps here: https://www.w3schools.com/howto/howto_css_image_text.asp
or try this video if you hate reading like me:
https://www.youtube.com/watch?v=edCuCED3Zmo
add a comment |
Im also new to web dev, however i figured that if you try margins around the text div it might work? Maybe try:mergin-top:20px;
and see how that edits the text, if not try going through the steps here: https://www.w3schools.com/howto/howto_css_image_text.asp
or try this video if you hate reading like me:
https://www.youtube.com/watch?v=edCuCED3Zmo
Im also new to web dev, however i figured that if you try margins around the text div it might work? Maybe try:mergin-top:20px;
and see how that edits the text, if not try going through the steps here: https://www.w3schools.com/howto/howto_css_image_text.asp
or try this video if you hate reading like me:
https://www.youtube.com/watch?v=edCuCED3Zmo
answered Mar 9 at 0:01
MagiixkMagiixk
13
13
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55071864%2fcss-text-on-overlay%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
My guess is that your local version is running a slightly different version of the code than the one you have on the live website. Maybe you have some per-processor that tidy the code when you pack it for deployment?
– Guy Yogev
Mar 8 at 23:00
Hello Gazzy. Welcome to SO. Please put the code into the post.
– Olafant
Mar 8 at 23:10
please include any js that you are using
– Rachel Gallen
Mar 8 at 23:52
Your code seems fine. Try hard refreshing your browser by SHIFT + F5. It's probably getting an old cached version of the CSS file.
– perellorodrigo
Mar 9 at 0:15