My question is how can i set full width and height background image for the header in Bootstrap like http://demo.evenfly.com/view?theme=SantaGo ( i am not expecting animations, i am expecting how to make background that fits in to screen like this)?
This is what i have done so far,
https://codepen.io/anon/pen/reYRBo
HTML:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="sltac.css">
</head>
<body>
<header>
<div class="row">
<div class="bg-image" id="jumboid">
<img src="http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg" class="img-responsive" alt="Cinque Terre" width="100%" height="40%" back>
</div>
</header>
</body>
</html>
CSS:
body{
margin:0;
padding:0;
width:100%;
}
#jumboid{
width:100% ;
}
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
max-width: 1200px; /* corresponds to max height of 450px */
margin: 0 auto;
}
header{
width:100%;
height:100%;
height:calc(100% - 1px);
background-image:url('a.jpg');
background-size:cover;
}
At the end i'm expecting the result like this(if i take full page screen shot),
expected result
There is no need to use an extra image tag. Just set the background and the property background-size: cover
Try it like this:
html,
body {
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 100%;
background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg) center center no-repeat;
background-size: cover;
}
<body>
<header>
</header>
</body>
Do you have an img tag inside the #jumboid?
In case you don't, you can easily fix it with a background-image on #jumboid.
Edit the css as following:
#jumboid{
width:100% ;
height: 100vh;
background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
background-size: cover;
background-repeat: no-repeat;
}
(forked) example: https://codepen.io/pimskie/pen/wGPOar
Simply use, using contain keeps your bg-img scalable and responsive-
background-size:contain;
OR if want to have a fixed header height and wan't to keep the image background scaled upto header's width-
background-size:100% 100%;
Hi try this code and Is this what you are looking for.
body {
margin: 0;
padding: 0;
width: 100%;
}
#jumboid {
width: 100%;
}
.bg-image {
position: relative;
background: url("http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg") no-repeat center center /cover;
height: 450px;
background-attachment: fixed;
}
.bg-image img {
display: block;
width: 100%;
margin: 0 auto;
}
header {
width: 100%;
height: 100%;
height: calc(100% - 1px);
background-image: url('a.jpg');
background-size: cover;
}
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="sltac.css">
</head>
<body>
<header>
<div class="row">
<div class="bg-image" id="jumboid">
</div>
</div>
</header>
<div class="restofthecontent">
<p>your content</p>
</div>
</body>
</html>
Put your image in background of DIV by css not in <img> tag.
and give that DIV below CSS.
.Your_DV {
background-image: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
background-position: fixed;
background-size: cover;
background-repeat: no-repeat;
}
Related
I have a basic html document with a sticky header and footer. I also have a div below the header that sticks to the header because it will eventually contain some tabs above a form. I have tried to align the form below this vertically but they don't line up. The problem is the tab div does not have a scrollbar but the form does. This means the width of the form is different to the width of the tabs. I tried to set them to 70% of the width and center but, because of the scrollbar they don't line up. I've tried some javascript to get the width of the scrollbar and then add this to the current right margin but it doesn't work. You will see the form is not as wide as the tabs div. I have spent hours on this.
Also, I tried adding a margin-bottom to the form but no margin appears below the border.
$(document).ready(function () {
setFormsWidth();
});
function setFormsWidth() {
let scrollbox = document.createElement('div');
// Make box scrollable
scrollbox.style.overflow = 'scroll';
// Append box to document
document.body.appendChild(scrollbox);
// Measure inner width of box
scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
// Remove box
document.body.removeChild(scrollbox);
// Get current width of right margin, which should be 30% of the
// width of the form-panel parent (the content class).
var formPanel = document.getElementById("main-form");
// Get the current right margin and remove the px at end of number
var style = window.getComputedStyle(formPanel);
var marginRightString = style.getPropertyValue('margin-right');
var marginRight = marginRightString.slice(0,-2);
// now addthe scrollBarWidth to the right margin
var newMargin = marginRight + scrollBarWidth;
formPanel.style.marginRight = newMargin + "px";
}
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.page {
flex: 1;
overflow: auto;
background: pink;
}
.content {
background-color: green;;
}
.tabs {
width: 70%;
height: 50px;
background-color: aqua;
margin: 0 auto;
border-bottom: solid #FE6D73 7px;
}
.form-panel {
width: 70%;
height: 1000px;
background-color: #FFF;
margin: 0 auto;
overflow-y: auto;
border-bottom: solid #FE6D73 7px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="tabs">
THIS IS TAB
</div>
<div class="page" id="calculator">
<div style="height:1000px;">
<div class="content">
<form class="form-panel" id="main-form">THIS IS FORM</form>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>
I suggest to show the scrollbar besides .form-panel element but not .page div, so it will not affect centering .form-panel element.
Here is how to change the css.
Set height to 100% for all elements between .page and .form-panel elements, including .form-panel itself, so that scrollbar for .page will not be shown
Set box-sizing: border-box; for .form-panel, so that the border is drawn inside .form-panel
move .footer outside .page element
If you would like to set a specific height for .form-panel, you can create a div inside it and set its height like below:
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.page {
flex: 1;
overflow: auto;
background: pink;
}
.content {
background-color: green;
height: 100%;
}
.tabs {
width: 70%;
height: 50px;
background-color: aqua;
margin: 0 auto;
border-bottom: solid #FE6D73 7px;
}
.form-panel {
width: 70%;
height: 100%;
background-color: #FFF;
margin: 0 auto;
overflow-y: auto;
border-bottom: solid #FE6D73 7px;
padding-bottom: 7px;
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="tabs">
THIS IS TAB
</div>
<div class="page" id="calculator">
<div style="height:100%;">
<div class="content">
<form class="form-panel" id="main-form">
<div style="height:1000px">
THIS IS FORM
</div>
</form>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
sorry for this dumb question but i can't figure it out, can someone help me to make the picture float over the particle effect?
If a link can be added to this image it will be nicer.
Here is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Particles.js Example Page</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 { position:absolute; top:30px; left:100px; color:#fff;}
.jquery-script-ads { position:absolute; top:150px; left:100px;}
canvas {
position: absolute;
}
.background {
background-image: url('1.jpg');
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body class="background">
<h1>jQuery Particles.js Example Page</h1>
<canvas class="canvas"></canvas>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="dist/jquery.particles.js"></script>
<script>
$(document).ready(function() {
$('.canvas').particles({
connectParticles: true,
color: '#ffffff',
size: 3,
maxParticles: 80,
speed: 1.8
});
});
</script>
<IMG class="displayed" src="image.png" height="400" width="400">
</body>
</html>
I find a way by adding :
IMG.displayed {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
MY issue is simple.
I have a header-box with 3 divs inside;
A background image (relative)
a overlay; background-color with opacity (relative)
and a text.
The issue is that i can't position my text in the middle;
I created a javascript function handeling the issue, but the script doesn't do anything
The only way to set the top, left value for the element is to write it into the css file.
Any guesses? (And no the JS / JQuery code did work; tested it without the div-boxing madness)
Here are the files:
Index.html:
<head>
<title> Website </title
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" href="css/content.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/fontboxes.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<!-- jQuery Einbindung -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function adjust() {
getElementById("mediumfontbox").style.top = 125;
}
</script>
</head>
<body>
<header>
<img src="img/header1.jpg"> </img>
<div id="overlay1"></div>
<div class="mediumfontbox" onload="adjust()"> Inspirational Quote </div>
</header>
<div class="main"></div>
<footer id="overlay1">
<div id="copy">Copyright by Vancold</div>
</footer>
</body>
header.css
header
{
width:100%;
height:100%;
}
header > *
{
position:absolute;
}
img
{
z-index: 0;
width: 100%;
height:100%;
top: 0px; left:0px;
}
header > .mediumfontbox
{
z-index: 2;
}
header > #overlay1
{
z-index:1;
height: inherit;
}
header > #overlay2
{
z-index:1;
height: inherit;
}
header > #overlay3
{
z-index:1;
height: inherit;
}
fontboxes.css
.smallfontbox
{
width: 125px;
height: 125px;
}
.mediumfontbox
{
width: 250px;
height: 250px;
}
.bigfontbox
{
width: 500px;
height: 500px;
}
.font
{
color: white;
font-family: "Times New Roman", Times, serif;
font-size: 32px;
}
layout.css
* {
margin: 0px;
padding: 0px;
}
#overlay1
{
background: blue;
opacity: 0.125;
width: 100%;
}
#overlay2
{
background: red;
opacity: 0.125;
width: 100%;
}
#overlay3
{
background: green;
opacity: 0.125;
width: 100%;
}
Your script is running in the header of your file, before anything is rendered in the body. Try moving your script to the end of your document body.
The style value for top should be a string with a unit - for example '125px'.
getElementById is a function of document.
onload doesn't apply to div. Put it on body.
#mediumfontbox {
position: absolute;
}
<head>
<script>
function adjust() {
document.getElementById("mediumfontbox").style.top = '125px';
}
</script>
</head>
<body onload="adjust()">
<div id="mediumfontbox">
Inspirational quote
</div>
</body>
i want to use wow.js on my website. I got a sidebar which needs to have the content inside a container with overflow-x: auto;. Because of this wow.js does not work.
Is it possible to define in wow.js the scrolling container?
My site looks like this:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="lib/js/wow.js"></script>
<link rel="stylesheet" type="text/css" href="lib/css/animate.css">
<script>
$("document").ready(function() {
new WOW().init();
})
</script>
<style>
body,html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#container {
height: 100%;
width: 100%;
position: relative;
}
#menu {
position: absolute;
width: 300px;
left: -300px;
background: red;
}
#content {
position: absolute;
width: 100%;
height: 100%;
background: green;
overflow-x: auto;
}
.wow {
background: yellow;
}
</style>
</head>
<body>
<div id="container">
<nav id="menu">
<ul>
<li>sidebar1</li>
<li>sidebar2</li>
<li>sidebar3</li>
</ul>
</nav>
<div id="content">
contentcontent<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="wow bounce">text</div>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</body>
<script>
</script>
</html>
Problem solved:
I've changed the Contentcontainer to a section and used this code to init wow.js
var wow = new WOW({ scrollContainer: "section"});
wow.init();
Thanks anyway
Have a block with another relative block inside, which has a background in style of parent block (like on a a picture). When i trying to change width of my block, relative block disappears.
picture
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
#button
{
width: 195px ;
height: 60px;
display: inline-block;
position: relative;
background: url('/res/bg.png') repeat-x;
}
#button div#arrow
{
background: url('/res/Arrow.png') no-repeat;
width: 30px;
height: 60px;
display: block;
position: absolute;
top:0px;
right: -30px;
}
</style>
</head>
<body>
<div id='button'>
<div id='arrow'></div>
</div>
</body>
</html>
Forgot about the code of animating:
$('#button').animate({width:'-=120px'}, 2000)
Set overflow: visible !important on the parent div.
Demo: http://jsfiddle.net/P5CHX/2/