I have created a full screen background image website using css, however when I try and also link bootstrap it creates a white, full screen container covering the entire page. When I go into the bootstrap CSS and comment the whole thing out the white container remains. The only way to get rid of it is to remove the bootstrap link from my head tag. Below is the HTML then the CSS.
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="local.css" rel="stylesheet"/>
</head>
html{
background:url('img/50925.jpg') no-repeat center center;
min-height:100%;
background-size:cover;
}
body{
min-height:100%;
}
Anyone got any ideas?
Set the background of the body to be fully transparent with
background-color:rgba(0, 0, 0, 0.0);
jsfiddle: https://jsfiddle.net/o9mgygzu/
Related
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<video controls autoplay>
<source src="./test.mp4" type="video/mp4"/>
<track default kind="captions" srclang="en" label="English" src="./test.vtt"/>
</video>
</body>
</html>
CSS
.yellowish {
background-color: blue;
color: yellow;
}
.redcolor {
background-color: white;
color: red;
}
VTT
WEBVTT
00:00:00.000 --> 00:00:03.000
<c.yellowish>This text should be yellow.</c> This text will be the default color.
00:00:03.000 --> 00:00:06.000
<c.redcolor>This text should be red.</c> This text will be the default color.
I hosted them on a simple http server with node.js and tried it on chromium and Firefox.
They did not show colors.
I tried including styles in the vtt file, it did not work either.
Size and colors seems to be not working in Firefox and chromium.
Alignment doesn't work in chromium.
All other webvtt features work perfectly.
Am I supposed to use any front-end frameworks for this?
It works on YouTube perfectly.(1:30 to 1:40)
About:
Finished a very basic Parallax Scrolling effect tutorial with jQuery. The effect works as it should.
My issue:
Content allready overlaps the background image when first viewing the page by a certain amount of pixels. This needs to start right below the viewport (and thus, background image).
My question: What exactly do I need to change (or add) in order to make it start below the background image?
My attempts to resolve:
Tried setting a fixed height of 100% to the background in order to have the content part start out of sight (below the background image). This removed my background as a whole and pushed the content further upwards.
Tried changing .content height from 1500px to lower or higher. This is not ideal, unfortunately.
Tried changing .parallax-bg padding from 300px to higher in order to push the content down. It works, but I am not certain wether this works on different resolutions.
My coding:
(function() {
var documentEl = $(document),
parallaxBg = $('div.parallax-bg');
documentEl.on('scroll', function() {
var currScrollPos = documentEl.scrollTop();
parallaxBg.css('background-position', '0 ' + -currScrollPos/4 + 'px');
});
})();
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
}
.content {
height:1500px;
background-color:#333;
}
.parallax-bg {
padding:300px 0;
background-image:url('/img/bg.png');
background-size:cover;
background-attachment:fixed;
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
transition:all 0.2s ease;
}
.parallax-bg h1 {
text-align:center;
text-transform:uppercase;
color:#fff;
font-size:70px;
font-family:arial:
}
<!doctype html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="content">
<div class="parallax-bg">
<h1>Hello Everybody</h1>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="js/scrolling.js"></script>
</body>
</html>
I should start by saying I'm relatively new to the likes of HTML/CSS. I have an image that is 2880x540 and I'm looking to set it as the landing page for a website. This means I need to have the image centered so that the excess width bleeds off the browser window, without having a scrollbar (the excess resolution is there for the likes of higher resolution monitors). I'm planning on using two regions of the image as rollovers for two other images that have the same proportions.
As of right now my code is very basic:
<!DOCTYPE html>
<head>
</head>
<body>
<img src="sitewide.png" width="2880" height="540" alt=""/>
</body>
</html>
Any feedback is greatly appreciated.
You can set your image as a centered background of a div:
<!DOCTYPE html>
<head>
<style>
body{
overflow-x: hidden;
}
#bigImage{
background:url('sitewide.png') no-repeat top center;
width: 2880px;
height: 540px;
}
</style>
</head>
<body>
<div id="bigImage"></div>
</body>
</html>
Always problems with IE8 ...
I'm trying to use inline-block to align some text with the top right edge of an image. It works fine in FF, but of course, doesn't work in IE8.
Here's a Fiddle for what I'm doing: http://jsfiddle.net/9DPv5/
I've tried the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Did nothing.
<!DOCTYPE html>
Did nothing.
<!--[if lt IE 8]>
<style type="text/css">
li { display: inline !imporant; }
</style>
<![endif]-->
Didn't fix the problem and broke stylings elsewhere on the page.
margin-right:1px
The block already has a margin set on it, so this ofc didn't change anything.
Not really sure what else to try. I don't think anything in the CSS doesn't work with IE8.
I found these too, but not sure where to put them to test:
.divInlineBlock
{
display: inline-block;
float: left;
}
and
display: inline-table;
Edit: It seems that the image is aligning correctly, it's just the text that isn't.
Any help appreciated.
Okay, after a lot of faffing around (I have to log out of the website to test, then log back in EVERY time I make a change, to see if it works...don't ask :( ) I've finally fixed it.
I changed:
#accordion .foobar .foo {
display:inline-block;
width:180px;
height:125px;
vertical-align:top;
margin-right:10px;
to:
#accordion .foobar .foo {
display:inline-block;
float:left;
width:180px;
height:125px;
vertical-align:top;
margin-right:10px;
Adding the "float:left;" to the image fixed this problem.
Please can someone point me in the right direction! I can't get the queries to work as intended.
So, I have for example:
<link rel="stylesheet" href="/480.css" type="text/css" media="screen and (max-width:480px)" />
<link rel="stylesheet" href="/768.css" type="text/css" media="screen and (max-width:768px)" />
<link rel="stylesheet" href="/960.css" type="text/css" media="screen and (min-width:960px)" />
In the 480 stylesheet:
#box{width:100px;height:100px;}
In the 960 stylesheet:
#box{width:200px;height:200px;}
When I resize the browser to 480px or less the 960 style is overriding the 480 style. I have tried loading all queries in the one stylesheet and I've tried using separate stylesheets for different resolutions but still not working. When testing it in either Chrome or FF Aurora it makes no difference.
What am I doing wrong? Thanks!
Works perfectly for me:
http://felixebert.de/so-12811458/
Is the path to the css files correct?
Is the HTML Doctype correct (<!DOCTYPE html>)?
Do you mix an id-reference with a class-reference? (#box = <div id="box" />, .box = <div class="box" />)
What's in 768.css?
Try this:
<style>
#media screen and (max-device-width: 480px),
screen and (max-width: 960px) {
#box{width:100px;height:100px;outline:1px solid red;}
}
/* Still small! (but scaling up) */
#media screen and (min-width: 960px) {
#box{width:200px;height:200px;outline:1px solid red;}
}
</style>
http://jsfiddle.net/sthAngels/EecJD/