I have a block of text and it want it to be above the block's background color and below the block's background image. I know I could just create multiple blocks and z-index them. I'm wanting to keep the code as clean as possible and not have a bunch of unnecessary stuff.
I'm guessing that the answer is "no", but maybe you guys know something I do (maybe a nifty new background property or JavaScript function).
HTML Code:
<section role="main" id="content">
<h1 class="pageheading">Home Page</h1>
</section>
CSS Code:
#content {
background-color:#69583b;
background-image:url(tattoo-256x256.png);
background-position:center bottom;
background-repeat:no-repeat;
}
Obviously, as it stands, the text "Home Page" sits on top of the image.
The logical thought would simply be to use <img> and position:absolute it, but, again, that's not my intention. I know multiple, other, ways it can be done. I'm just trying to find out if I can do it, this way.
You could do it with a CSS pseudo class. (I've added in opacity just as part of the demo):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#content {
background-color:#69583b;
background-position:center bottom;
background-repeat:no-repeat;
position: relative;
}
#content::after {
content: "";
position: absolute;
z-index: 2;
width: 100%;
top: 0; bottom: 0; left: 0; right: 0;
background: url(http://placehold.it/256x256);
opacity: 0.8;
}
</style>
</head>
<body>
<section role="main" id="content">
<h1 class="pageheading">Home Page</h1>
</section>
</body>
</html>
Related
So i'm making a online profile for myself, and i was doing research on how to make the landing page as attractive as possible. Came across HTML5 Canvas, did some research and experimentation on making an interactive background, and this is the result (in codepen).
Now, i would like to write my name in the middle of the canvas with the text infront of the animation.
The animation gets called in a recursive loop and the initialization function gets called when the page is resized or refreshed.
Problem is, i can't get the text infront, and for some odd reason, my text shrinks when the page is resized.
Here is my pen
https://codepen.io/hamza-tariq-khan/pen/mzKMNd
<!doctype html5>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Canvas Resize</title>
<style>
canvas{
/* border: 1.5px solid black; */
/* background-color: red; */
display: block;
}
body{
margin: 0;
overflow-x: hidden;
}
.wrapper{
margin : 20px;
}
</style>
</head>
<body>
<canvas></canvas>
<script src="script.js"></script>
<div class="wrapper">
<h1>This is a sample sentence</h1>
</div>
</body>
</html>
and this is an idea of what i want to achieve. (the writing of Mathew williams infront of the moving background)
http://findmatthew.com
If I were you, I would skip rendering text in the canvas and apply some CSS rules to the div to make it show up on top instead. The CSS approach improves performance and also improves accessibility. A blind person using a screen reader will be able to figure out what's in the div, but reading text in the canvas is not supported. Most importantly, it's a lot easier to reason about HTML and CSS than it is to reason about text rendering in a canvas element. How often will you do that? When you come back to change the code in a month, six months, or a year, it will be easier to change the HTML/CSS than it will be to think through the canvas rendering logic all over again!
To do this, use the following CSS for div wrapper:
.wrapper{
position: absolute;
top: 0px;
color: red;
font-size: 60px;
margin : 20px;
}
position: absolute allows the div to overlap the canvas, and properties top, bottom, left and right allow you to control how far the div is offset from the edges of its parent (in this case wrapper is a child of body). I adjusted color and font-size just to make it obvious that it works.
And here is a link to a working example: https://codepen.io/anon/pen/LqoroR
var canvas = document.getElementById("dm_graphs");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
<style>
body,
canvas,
html {
font: 24px sans-serif;
height: 100hv;
width: 100%;
margin: 0;
padding: 0;
background: #888;
color: #135;
overflow: hidden
}
#fs {
position: relative
}
#txt,
canvas {
position: absolute
}
#txt {
color: yellow;
margin: 50px;
font: 24px subpixel-antialiased Noto Sans Samaritan;
background: transparent
}
</style>
<body>
<div id="fs">
<canvas id="dm_graphs" width="400" height="300"></canvas>
<div id="txt">This is a text over a canvas.</div>
</div>
</body>
I have an animated background from Codepen (link below) I cannot get my text to float in-front of the background however. I haven't included the js as I dont think it will help
Codepen: https://codepen.io/zessx/pen/ZGBMXZ
Screenshot: https://gyazo.com/37568fdb9681e4c9d67d4d88fc7658ba
I have tried using z-index and using an absolute position isnt helping either.
Index.html Note: I have removed code that is irrelevant
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="bg"></div>
<div class="content w3-content" style="width: 80%;margin-left: 10%;">
<h1 class="font w3-jumbo w3-text-black">MOLLY URS</h1>
</div>
</body>
</html>
style.css
.bg {
z-index: 1;
background: -webkit-radial-gradient(center ellipse, #721B94 0%, #210627 100%) no-repeat center center fixed;
background: radial-gradient(ellipse at center, #721B94 0%, #210627 100%);
overflow: hidden;
}
body {
margin: 0;
}
.content {
position: absolute;
z-index: 100;
overflow: hidden;
}
Fixed position to the text container will solve this issue.
<div class="content w3-content" style="width: 80%;margin-left: 10%; position : fixed">
<h1 class="font w3-jumbo w3-text-black">MOLLY URS</h1>
</div>
I have working plunker here [link]
position: absolute should in most cases be paired with top, bottom, left, and/or right. You are missing top:0 or similar. You shouldn't need to change z-index. .content comes later in the DOM, so it'll be "painted" above #bg.
Place html text first, the bg last.
Attach position: fixed; to text container.
I have a webpage that uses tubular.js script to show youtube video as a site background. There's a sentence on tubular page:
First, it assumes you have a single wrapper element under the body tag
that envelops all of your website content. It promotes that wrapper to
z-index: 99 and position: relative.
So following that, I wrote a simple html/css code:
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#logocontainer{
position: absolute;
top: 20%;
margin-top: -35px;/* half of #content height*/
left: 0;
width: 100%;
text-align:center;
}
#logo {
margin-left: auto;
margin-right: auto;
height: 75px;
}
</style>
<body>
<div id="wrapper" class="clearfix">
<div id="logocontainer">
<div id="logo">
<img src="img/logo.png"/>
</div>
</div>
</div> <!--wrapper-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
<script type="text/javascript">
$(function() {
var options = {
videoId : '9JXVUP1hyxA',
start : 1
};
$('body').tubular(options);
});
</script>
</body>
</html>
but now, when I run it - I see only youtube video without my logo on top... I know the logo is there, because when I comment out the youtube script I can see it, however I don't see it when the video is present. I tried to add z-index:99 to #logo but that didn't do any magic... Can you help me with that?
EDIT:
As A. Wolff suggested below, I added to my css:
#wrapper{
z-index:99;
position: relative;
}
still though - no good results, video is still on top..
I see in their own Tubular they use this little script...
$('document').ready(function() {
var options = { videoId: 'ab0TSkLe-E0', start: 3 };
$('#wrapper').tubular(options);
// f-UGhWj1xww cool sepia hd
// 49SKbS7Xwf4 beautiful barn sepia
});
Just adding this keeps everything on top.
Use the code in this Fiddle as a sample.
Your must use z-index with position: relative/absolute.
Also your z-index in video must be less than in your blocks.
video {
position: absolute;
z-index: 1;
}
div {
position: relative;
z-index: 2;
}
I'm trying to accomplish something as simple as putting to div's side by side. The thing is I'm very capable in CSS, however the solutions I'm trying to use do not work as intended, here is the problem.
I'ved used: (so both divs is laying side by side)
display: block; float: left; margin-right: 15px;
And it work flawlessly LOCALLY, the thing is I'm creating this as a template solution which the html & css are being build into a system and after that will be generated to a javascript tag. The javascript tag will then be thrown into different websites and therefore, it's very important it acts alike in all browsers.
Then i tryed position the div (the one laying on the side) to: absolute and using left to position it on the side... That don't work either because its absolute to where the tag is implemented, meaning it would show up different places depending which site the tag is implemented.
So my question is, is there a way i can use either css or javascript so my divs are side by side no matter where i implement the tag?
Below is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Sidekick</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/sidekick.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="eas_sidekick_divs">
<div id="eas_sidekick">
<div class="eas_sidekick_open">x</div>
</div>
<div id="eas_sidekick_container"></div>
</div>
</body>
</html>
CSS:
.eas_sidekick_divs div
{
display: block;
float: left;
margin-right:15px;
}
#eas_sidekick
{
width:300px;
height:600px;
background: #ccc;
}
#eas_sidekick_container
{
width: 850px;
height:600px;
background: #ccc;
}
This solution works locally as said, but not after i generate this to a tag. You can see the example here:
http://yoursource.eu/stuff/Templates/sidekick/300x250/javascript.html
Look in the different browsers like: IE & Chrome and see the difference and how weird it acts.
Click on the button of the little banner to the right stating: "exiting me" and you'll see the div expand, the expanded div is the one i want to position to right at all times.
Hope u can help me out! :)
You can use display:inline-block; or display:block; both will work but as you mention "#eas_sidekick_container" width should be equal or should not exceed with parent Element width please correct "#eas_sidekick_container" width.
Here is the corrected code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.eas_sidekick_divs div
{
float: left;
margin-right:15px;
}
#eas_sidekick
{
width:300px;
height:600px;
background: #ccc;
}
#eas_sidekick_container
{
width: 300px;
height:600px;
background: #ccc;
}
</style>
</head>
<body>
<div class="eas_sidekick_divs">
<div id="eas_sidekick">
<div class="eas_sidekick_open">x</div>
</div>
<div id="eas_sidekick_container"></div>
</div>
</body>
</html>
I've figured out myself a javascript solution for fixing my issue.
I've used position absolute to fix it in all browsers and then created a javascript that depending on the width of the site, it position itself always 10 pixels to the right of my container.
Below is my code:
$(document).ready(function() {
var cssWidth = 1024;
var cssPos = 10;
$("#eas_sidekick_container").hide();
$("#eas_sidekick_container").css(
{
width: '0px',
position: 'absolute',
top: '0px',
left: cssWidth + cssPos
});
$(".eas_sidekick_open").click(
function() {
$("#eas_sidekick_container").show();
$("#eas_sidekick_container").animate({
width: '850px'
});
$('html, body').animate({
scrollLeft: '850'
});
});
$(".eas_sidekick_close").click(
function() {
$("#eas_sidekick_container").animate({
width: '0px'
});
setTimeout( function(){
$("#eas_sidekick_container").css(
'display' , 'none'
);
}, 350);
});
});
I have a div that rotates around the x-axis, around its center, so that the top half "falls away" from the screen while the bottom half comes toward the screen. When I try to capture the onclick event, I only get it from the div if I click on it below its centre. If I click on it above its center, the containing div receives the onclick event.
I've tried moving the div to the front with z-index and translateZ(), but still the containing div receives the onclick when I click on the top half of the div.
How can I get the div to receive the onclick event, regardless of where on the div it is clicked?
Here's a sample that demonstrates the problem:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function onMainClick() {
console.log('onMainClick()');
}
function onContainerClick() {
console.log('onContainerClick()');
}
</script>
<title>Click Test</title>
</head>
<body>
<div onclick="onContainerClick()" style="width: 200px; height: 200px; background-color: burlywood">
<div onclick="onMainClick()" style="width:100%; height: 100%; background-color: grey; -webkit-transform: perspective(1000px) rotateX(45deg)"></div>
</div>
</body>
</html>
onMainClick() is not called when clicking the top half of the grey div.
Built the case in a jsfiddle, I don't exactly know what the perspective rotation does, but the solution is to give the other div a z-index of -1...
CSS
#div1 {
width: 200px;
height: 200px;
background-color: burlywood;
z-index: -1;
}
#div2 {
width: 100%;
height: 100%;
background-color: grey;
-webkit-transform: perspective(1000px) rotateX(45deg);
}
Update: correct jsfiddle link...