DIV overlay with parallax effect - javascript

I'm about to redesign my website, and i want to make it more interesting vit some parralax effect. So here's my idea: I want 3 boxes, which overlay each other (and make the 2. and 3. box blurry, but it doesn't matter now). I would put it to the top of the site. So here's the parallax thing: I want it to move with the scrolling, something like this:
PICTURE
I tried to search for it, or code it by myself, but i failed :(
Has anybody got some cool stuff to do this?

Definetely this is your page:
http://stephband.info/jparallax/
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="" />
<meta name="description" content="" />
<title>jQuery.parallax</title>
<script>document.documentElement.className = 'js';</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<!-- Force latest IE rendering engine & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Make IE recognise HTML5 elements for styling -->
<!--[if lte IE 8]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<noscript>
<strong>Warning!</strong>
Your browser does not support HTML5 so some elements on this page are simulated using JScript. Unfortunately your browser has JScript disabled. Please enable it in order to display this page.
</noscript>
<![endif]-->
<!-- Disable image toolbar in IE6 -->
<!--[if lte IE 6]><meta http-equiv="imagetoolbar" content="no" /><![endif]-->
<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/template.min.css" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/template.theme.min.css" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/site.layout.css" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/docs.classes.css" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/demos.theme.css" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="http://stephband.info/css/template.layout.32em.css" media="all" />
<link rel="stylesheet" href="http://stephband.info/css/template.layout.48em.css" media="all" />
<![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="http://stephband.infocss/template.ie.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="http://stephband.infocss/template.ie8.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="http://stephband.infocss/template.ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="http://stephband.infocss/template.ie6.css" /><![endif]-->
<link rel="stylesheet" href="../css/jquery.parallax.css" />
<style type="text/css" media="screen, projection">
#wrapper {
width: 60em;
}
.button {
background: #2f3134;
float: left;
position: relative;
width: 60px; height: 60px;
margin: 3.2em 3.2em 0 0;
}
#viewport {
float: left; position: relative; background: #2f3134;
width: 60px; height: 60px; margin: 6.4em 3.2em 0 2.4em;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
#mouseport {
float: left; position: relative; background: #2f3134;
width: 60px; height: 60px; margin: 6.4em 3.2em 0 0;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.layer_1 { position: absolute; width: 45px; height: 45px; z-index: 101; }
.layer_2 { position: absolute; width: 48px; height: 48px; z-index: 102; }
.layer_3 { position: absolute; width: 52px; height: 52px; z-index: 103; }
.layer_4 { position: absolute; width: 58px; height: 58px; z-index: 104; }
.layer_5 { position: absolute; width: 67px; height: 67px; z-index: 105; }
.layer_6 { position: absolute; width: 80px; height: 80px; z-index: 106; }
.tl, .tr, .bl, .br {
width: 11px; height: 11px;
}
.tl { background: url('http://stephband.info/images/corner_dark_tl.png'); }
.tr { background: url('http://stephband.info/images/corner_dark_tr.png'); }
.bl { background: url('http://stephband.info/images/corner_dark_bl.png'); }
.br { background: url('http://stephband.info/images/corner_dark_br.png'); }
</style>
</head>
<body>
<header class="site_header" id="page_header">
<div class="site_wrap wrap">
<a class="logo_thumb thumb" href="http://stephband.info" title="stephband" rel="index">
<h1>stephband.info</h1>
</a>
</div>
</header>
<div class="site_wrap wrap">
<h2>jParallax Demos next</h2>
<div id="wrapper" class="clear">
<div id="viewport">
<!-- Parallax layers -->
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/1.png" alt="" class="layer_1"/>
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/2.png" alt="" class="layer_2"/>
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/3.png" alt="" class="layer_3"/>
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/4.png" alt="" class="layer_4"/>
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/5.png" alt="" class="layer_5"/>
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/6.png" alt="" class="layer_6"/>
</div>
<div id="mouseport"></div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="../js/jquery.parallax.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
// Set up parallax layers
jQuery("#viewport>img").parallax(
{ mouseport: jQuery("#mouseport") }, // Options
{ xparallax: '6px', yparallax: '6px' }, // Layer 1
{ xparallax: '12px', yparallax: '12px' }, // Layer 2
{ xparallax: '30px', yparallax: '30px' }, // Layer 3
{ xparallax: '54px', yparallax: '54px' }, // Layer 4
{ xparallax: '84px', yparallax: '84px' }, // Layer 5
{ xparallax: '120px', yparallax: '120px' } // Layer 6
);
});
</script>
</body>
</html>
Hope this encourages your creativity!

Related

Tooltip does not show with Bootstrap Slider

Problem:
I am using Bootstrap Slider, which can be found here https://seiyria.com/bootstrap-slider/. When using example 8, the tooltip does not show as it does on the website.
Minimal Working Example (MWE):
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Judgement</title>
<!-- Bootstrap Core CSS -->
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Slider -->
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">
</head>
<body>
<input id="judgement" data-slider-id="judgementslider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#judgement").slider({
tooltip: 'always'
});
});
</script>
</body>
</html>
Example Snippet:
$(document).ready(function() {
$("#judgement").slider({
tooltip: 'always'
});
});
body {
padding: 100px;
}
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">
<input id="judgement" data-slider-id="judgementslider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
JS Fiddle:
http://jsfiddle.net/2u4xs9cv/1/
Desired outcome:
To always show the tooltip when the slider changes.
I know this is pretty late but I was looking for a solution and am posting here in hopes that this might be of help for someone else.
I set
.tooltip.in {
opacity: 1;
}
and the tooltip started showing.
Using Bootstrap v4.2.1 and the latest version of bootstrap-spinner with their angular directive (in their slider.js file), I used the following HTML
<slider id="intervalSlider"
ng-model="refreshInterval" on-stop-slide="intervalChanged($event,value)"
min="10" step="10" max="60" slider-tooltip="show" ></slider>
I found that the tootip and arrow did not display. I added the following CSS into my custom CSS file
.slider .tooltip.in {
opacity: 1;
}
.slider .tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.slider .tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.slider .tooltip.top {
padding: 5px 0;
}
This is still opened issue for Bootstrap 4.3.1 - #689. The Bootstrap v4 is not yet fully supported.
On the end of the discussed issue they are shown some solutions I use it following:
$("#ex12c").slider({ id: "slider12c", precision:2, step:0.01, min: 0.70, max: 1.00, range: true, value: [0.80, 0.90] });
#slider12c .slider-track-high {
background: #5cb85c;
}
#slider12c .slider-selection {
background: #ffc107;
}
.slider-handle::after{
content: attr(aria-valuenow);
position: absolute;
bottom: calc(100% + 0.5em);
left: 50%;
transform: translateX(-50%);
font-size: 0.75em;
font-weight: 600;
color: #393f50;
background-color: white;
box-shadow: 0px 0px 6px 0px rgba(182, 182, 182, 0.4);
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.3em;
width: 4em;
height: 2.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap 4 CDN CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Bootstrap 3 slider -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.min.css" />
</head>
<body>
<br />
<br />
<input id="ex12c" type="text"/>
<!-- Bootstrap 4 CDN JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.min.js">
</script>
<body/>
<html/>

Including a different image in SweetAlert2 popup message based on selection of a div after clicking a button

I think something similar to this question was answered in the past. However, I read a number of StackOverflow posts and still couldn't solve the issue. Probably, that is because I don't have a good understanding of jQuery yet and can't apply basic concepts to what I need to solve. So, I would greatly appreciate if you could help me solve this issue. Thanks!
Right now, what happens is the following:
1. When clicking a button in the middle, five circles show up.
2. When you click a circle, a popup message made with SweetAlert2 shows up.
3. When clicking the "ok" button in the popup message, the message is closed and you can see that the circle's background was changed to light orange.
What I want to do : show a different image(https://s25.postimg.cc/kw0l49gz3/original.png) in the popup message when clicking a circle with the text "okay".
Note: I assigned "options" class for all circles and different id for each circle. The id for a circle with the text "okay" is "option5".
$(document).ready(function() {
$('#test').click(function(){
$(".options:hidden").fadeIn()
.on("click", function(){
$(this).css("background", "#F3C78D");
})
.on("click", function(){
swal({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: 'https://unsplash.it/400/200',
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image',
animation: false
})
// swal({
// title: 'Sweet!',
// text: 'Modal with a custom image.',
// imageUrl: 'https://s25.postimg.cc/kw0l49gz3/original.png',
// imageWidth: 400,
// imageHeight: 200,
// imageAlt: 'Custom image',
// animation: false
// })
});
});
});
body{
font-family: 'Poor Story', sans-serif;
}
#test{
cursor: pointer;
display: block;
text-align: center;
position: absolute;
display: flex;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.options {
background: #f7f7f5;
display: none;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
border-radius: 50%;
border-style: solid;
border-color: #F3C78D;
width: 60px;
height: 60px;
font-size: 12px;
}
.options span {
color: #000000;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#option1{
transform: translate(-100%, -150%);
}
#option2{
transform: translate(-160%, -40%);
}
#option3{
transform: translate(-50%, 50%);
}
#option4{
transform: translate(60%, -40%);
}
#option5{
transform: translate(15%, -150%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
<!-- <link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
<!-- sweetalert2 -->
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.all.min.js"></script>
<!-- CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.min.css'>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-outline-success" id="test">test</button>
<div class="options" id="option1"><span>Hello<br>World</span></div>
<div class="options" id="option2"><span>Goodbye</span></div>
<div class="options" id="option3"><span>How<br>are<br>you?</span></div>
<div class="options" id="option4"><span>Fine</span></div>
<div class="options" id="option5"><span>Okay</span></div>
</div>
</body>
</html>
You can use data-attribute to define the image link inside the element and then you can easily use it within the JS code. You can also do the same with the other parameter.
$(document).ready(function() {
$('#test').click(function(){
$(".options:hidden").fadeIn()
.on("click", function(){
$(this).css("background", "#F3C78D");
})
.on("click", function(){
var url=$(this).attr('data-img');
swal({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: url,
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image',
animation: false
})
});
});
});
body{
font-family: 'Poor Story', sans-serif;
}
#test{
cursor: pointer;
display: block;
text-align: center;
position: absolute;
display: flex;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.options {
background: #f7f7f5;
display: none;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
border-radius: 50%;
border-style: solid;
border-color: #F3C78D;
width: 60px;
height: 60px;
font-size: 12px;
}
.options span {
color: #000000;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#option1{
transform: translate(-100%, -150%);
}
#option2{
transform: translate(-160%, -40%);
}
#option3{
transform: translate(-50%, 50%);
}
#option4{
transform: translate(60%, -40%);
}
#option5{
transform: translate(15%, -150%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
<!-- <link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
<!-- sweetalert2 -->
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.all.min.js"></script>
<!-- CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.min.css'>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-outline-success" id="test">test</button>
<div class="options" data-img="https://unsplash.it/400/200" id="option1"><span>Hello<br>World</span></div>
<div class="options" data-img="https://unsplash.it/400/200" id="option2"><span>Goodbye</span></div>
<div class="options" data-img="https://unsplash.it/400/200" id="option3"><span>How<br>are<br>you?</span></div>
<div class="options" data-img="https://unsplash.it/400/200" id="option4"><span>Fine</span></div>
<div class="options" data-img="https://s25.postimg.cc/kw0l49gz3/original.png" id="option5"><span>Okay</span></div>
</div>
</body>
</html>

html object not displaying where it should on mobiles devices

I'm working on a Flappy bird clone that works as well on mobile devices using service workers. I'm also learning new stuff about these techonologies.
Everything seemed to be working fine on desktop, but on mobile, the bottom pipes display a little higher than they should.
I'm using this meta viewport configuration:
HTML
<!DOCTYPE HTML>
<html>
<head>
<title> FLAPWAPP </title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div id="gamecanvas">
<div id="sky"></div>
<div id="playspace">
<div id="skylimit"></div>
<div id="bird" class="bird"></div>
</div>
<div id="land"></div>
</div>
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('sw.js')
.then(function() { console.log("Service Worker Registered"); });
}
</script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
.pipe
{
position: absolute;
height: 100%;
z-index: 5;
width: 52px;
left: -100px;
animation: pipeAnimation 7500ms linear;
}
.pipe_upper
{
position: absolute;
top: 55px;
width: 52px;
background-image: url('../assets/pipe.png');
background-repeat: repeat-y;
background-position: center;
}
.pipe_upper:after
{
content: "";
position: absolute;
bottom: 0;
width: 52px;
height: 26px;
background-image: url('../assets/pipe-down.png');
}
.pipe_lower
{
position: absolute;
bottom: 0;
width: 52px;
background-image: url('../assets/pipe.png');
background-repeat: repeat-y;
background-position: center;
}
.pipe_lower:after
{
content: "";
position: absolute;
top: 0;
width: 52px;
height: 26px;
background-image: url('../assets/pipe-up.png');
}
What this could be? You can check the entire source code on my github: github
This is because android is base on linux. So some of your css code might has being ignored by the android. Find the code, and use the webkit on it.
The problem has been solved here: https://github.com/llucmk/FLAPWAPP/blob/master/js/main.js
There was a problem related to the javascript and the object position, not giving it's correct position with it.

Can't center an image on a page with links. What am I doing wrong?

I'm trying to develop a single page like the design in the image below however I can't seem to make it work. The image (smiley face logo) isn't responsive as it doesn't scale down properly to mobile devices. The 'About' and 'Contact' links also does not appear directly under the image either. Any suggestions?
Concept image:
My CSS:
/* Global Styles */
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.CenterScreen{
position:absolute;
/*element can move on the screen (only screen, not page)*/
left:50%;top:50%;
/*set the top left corner of the element on the center of the screen*/
transform:translate(-50%,-50%);
/*reposition element center with screen center*/
}
.text-vertical-center {
display: table-cell;
text-align: center; */
vertical-align: middle;
margin: 0 auto;
}
.text-vertical-center h1 {
margin: 0;
padding: 0;
font-size: 4.5em;
font-weight: 700;
}
.text-vertical-center h3 {
text-align: left;
}
/* Header */
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: yellow no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
My HTML code:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Smile test</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/ACo.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- Header -->
<header id="top" class="header">
<div class="text-vertical-center">
<img src="img/smile.svg" class="CenterScreen" style="display:inline" alt="Smilelogo" width="800" height="800">
<div class="row">
<div class="col-sm-4 col-sm-push-5">
<h3>About</h3>
<h3>Contact Us</h3>
</div>
</div>
</div>
</header>
Complete Code
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.CenterScreen{
position:absolute;
/*element can move on the screen (only screen, not page)*/
left:50%;top:50%;
/*set the top left corner of the element on the center of the screen*/
transform:translate(-50%,-50%);
/*reposition element center with screen center*/
}
.text-vertical-center {
display: table-cell;
text-align: center; */
vertical-align: middle;
margin: 0 auto;
}
.text-vertical-center h1 {
margin: 0;
padding: 0;
font-size: 4.5em;
font-weight: 700;
}
.text-vertical-center h3 {
text-align: left;
}
/* Header */
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: yellow no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
<!DOCTYPE html>
<html lang="en">
<meta name="author" content="">
<title>Smile test</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/ACo.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- Header -->
<header id="top" class="header">
<div class="text-vertical-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" class="CenterScreen" style="display:inline" alt="Smilelogo" width="300" height="300">
<div class="row">
<div class="col-sm-4 col-sm-push-5">
<h3>About</h3>
<h3>Contact Us</h3>
</div>
</div>
</div>
</header>
For the smile use and modify the margin-top value for its start position
.CenterScreen{
position:relative;
width:50%;
height:50%;
margin:0 auto;
margin-top:20%;
}
and for the text use
.text-vertical-center {
position:relative;
width:100%;
text-align:center;
}
For your image, Add a max-width property of 100%. This would make it responsive.
And for the text.. make it a 12 column row each text.. and text-align property to center.
together these two properties should help you achieve the result

I can't get this background appear in a div

Can someone point me in the right direction? I don't see why I can't get the achtergrond_homepage.png as background in rounded corners.
Edit: It looks like the grey color is allways on top of everything. Can it be that it's controlled in the javascript part?
This is the css:
#charset "utf-8";
/* CSS Document */
html, body {
color: #444141;
font-family: 'trebuchet ms' !important;
font-size: 12px;
margin: 0px;
padding: 0px;
height: 100%;
background: #eaeade;}
.justyParagraph {
text-align: justify;}
a img {
border: 0;}
.clearer {
clear: both;}
.rounded_corners{
background: url(../images/achtergrond_homepage.png) no-repeat left bottom;
color:#FFF;
padding: 8px;
width: 380px;
border: 2px solid #4e4b4b;
height: 450px;
}
div#blockdark {
height: 517px;
left: 450px;
position: absolute;
top: 130px;
z-index: 1000000;
width: 360px;
visibility: visible;
}
This is the HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="bookmark" href="/favicon.ico" />
<link rel="shortcut icon" href="/favicon.ico" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/excanvas.js" type="text/javascript"></script>
<script src="js/jQuery.min.js" type="text/javascript"></script>
<script src="js/roundCorners.jQuery.js" type="text/javascript" ></script>
<script type="text/javascript">
$(window).load(function(){
$('.rounded_corners').bg(['20px', '20px', '20', '20']);
});
</script>
</head>
<body>
<div id="blockdark">
<div class="rounded_corners">
<div> <h1> Title </h1> </div>
<div> Content </div>
</div>
</div>
</body>
</html>
This is a example, maybe it has something to do with the javascript for rounded corners?
http://www.coldcharlie.nl/test/
Try adding display: block to the .rounded_corners. Also it looks like you're missing a ; from the background line of .rounded_corners

Categories