I try to implement the following effect by using the :before but I have problem with the z-index.
My code is like this:
.container {
background : #FFF;
}
.item {
background-position : 50% 50%;
background-repeat : no-repeat;
background-size: cover;
width : 200px;
height :200px;
position : relative;
}
.item:before {
content : '';
position : absolute;
width : 100%;
height : 100%;
right : -20px;
bottom : -20px;
border : 2px solid #0AF;
z-index : -1;
}
<div class="container">
<div class="item" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200')"></div>
</div>
The problem now, is that the container seems to cover the :before element.
For the moment I don't mind about the "MIDDLE AGE" item.
How can I overcome this issue ?
Add the following CSS styles:
.container {
position: relative;
z-index: 1;
}
Code in JSfiddle: https://jsfiddle.net/5cq5576k/
Try this:
.container {
background : #FFF;
position: relative;
float: left;
}
.item {
background-position : 50% 50%;
background-repeat : no-repeat;
background-size: cover;
width : 200px;
height :200px;
position : relative;
}
.item-border {
content : '';
position : absolute;
width : 100%;
height : 100%;
right : -20px;
bottom : -20px;
border : 2px solid #0AF;
z-index : -1;
}
<div class="container">
<div class="item-border"></div>
<div class="item" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200')"></div>
</div>
Related
I can't display a :before element outside my parent element. The :before element is cut as an overflow-hidden parent's child but removing the rule didn't help me :
The red color and the position of the div are just there to see where is the div and where is the :before near it.
Here is my css code :
div#sidezone {
position : fixed;
display : block;
width : 10%;
height : 100%;
right : 10%;
top : 0px;
bottom : 0px;
overflow-y : scroll;
z-index: 10;
background : red;
}
div#sidezone:before {
position : absolute;
content : "";
display : block;
/* font-family: "Font Awesome 5 Free"; */
width : 50px;
height : 20px;
left : -50px;
top : 50%;
bottom : 50%;
background : #12b7ff;
cursor : pointer;
border : 3px solid #12b7ff88;
border-radius: 5px 0px 0px 5px;
z-index: 10;
}
div#sidezone:hover {
right:0px;
}
I'd like to make two clickable images, one for video and one for PDF. They would be intersecting, and the PDF button is behind the Video button, just like in the image below:
So far, I haven't come across a similar solution on the internet, but I'd like to know if it's possible to create it without any interruptions, where both are easily clickable, and how I could do so.
A combination of position absolute and z-index will do the needy:
#video {
left: 100px;
top: 75px;
width: 250px;
height: 150px;
z-index: 10;
background: lightblue;
}
#pdf {
left: 300px;
top: 25px;
width: 75px;
height: 100px;
z-index: 1;
background: red;
}
.tile {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
<div id = 'video' class = 'tile'>VIDEO</div>
<div id = 'pdf' class = 'tile'>PDF</div>
Use position relative and absolute on your video and pdf respectively and wrap them inside a container that uses position :relative aswell
This should do the trick :
.container {
/* What you need */
position : relative;
/* the code below is only for this example */
width : 300px;
margin-top : 150px;
}
.video {
/* What you need */
position : relative;
z-index : 2;
/* the code below is only for this example */
width : 300px;
height : 300px;
display : flex;
align-items : center;
justify-content : center;
text-align : center;
background-color : red;
}
.pdf {
/* What you need */
position : absolute;
top : -100px; /* change value to desired position */
right : -100px; /* change value to desired position */
z-index : 1;
/* the code below is only for this example */
width : 150px;
height : 200px;
display : flex;
align-items : center;
justify-content : center;
text-align : center;
background-color : blue;
}
<div class="container">
<div class="pdf">pdf</div>
<div class="video">video</div>
</div>
<div class="item" data-bg="images/demo-images/team_bg_1.jpg">
I want to position the image used in data-bg property to right bottom corner. How to apply CSS for data-bg property.
Actual size of the image is 900px, actual size of the div is 100%,
Kindly help to fit the image in right bottom corner.
You cannot "position" a "property" with CSS. I am guessing you meant to have the image in data-bg as a background for your .item divs.
First you need to change data-bg to style to make the image appear as a proper CSS background-image, like this:
style="background-image: url(images/demo-images/team_bg_1.jpg")"
After this, you can use CSS rules to position the background and apply whatever styles you want:
.item {
background-repeat: no-repeat;
background-position: right bottom;
height: 300px;
border: 1px solid red;
}
<div class="item"
style="background-image: url(https://placehold.it/900x200)">
</div>
jsFiddle demo: https://jsfiddle.net/
I am not sure why would you use data-bg, do you have any JavaScript code that processes this data attribute? Your question is not clear enough.
For positioning background image to right bottom corner use follow css:
background-position: right bottom;
Note that you can't use image url from data-bg attribute in pure css. For more information see this link
/*==============================
BG BACKGROUND DATA BG
==============================*/
$('.bg-background-area').each(function() {
"use strict";
if ($(this).attr("data-bg")) {
$(this).css({
'background': 'url(' + $(this).data('bg') + ')',
'background-position': 'center center',
'background-repeat': 'no-repeat',
'background-size': 'cover',
'background-attachment': 'scroll'
});
}
});
.bg-background-area {
position: relative;
margin: 40px 0;
padding: 50px;
min-height: 400px;
}
.bg-background-area:after {
background-color: rgba(10, 0, 0, 0.8);
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
.bg-background-area p {
color: #fff!important;
}
.bg-background-area h2 {
color: #fff!important;
}
.bg-background-area h3 {
color: #fff!important;
}
.bg-background-area .container {
z-index: 1;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="bg-background-area" data-bg="https://cdn.pixabay.com/photo/2018/05/12/00/32/coffee-3392168_960_720.jpg">
<div class="container">
<p>Test text ....... </p>
</div>
</section>
I have 3 elements which I want to align in my html file. I have attached a sample image, the first image just has a left margin and is vertically centered. the middle element is vertically and horizontally centered and the third element has right margin and is vertically centered.
I can independently align elements horizontally and vertically with below code :
#element{
height : 40%;
position : relative;
left : 50%;
top : 50%;
transform : translate(-50%,-50%);
}
but when it comes to align elements along each other they don't place correctly.
I'll appreciate if you can help me with this.
Thanks very much
You can try the following:
.left_item {
float: left;
width: 10%;
}
.right_item {
float: right;
width: 10%;
}
.center_item {
float: left;
width: 80%;
}
I managed to solve it with below code :
<header id="header">
<div id="element1Container">
<img id="element1" src="http://globalapk.com/uploads/posts/2014-06/1402152414_unnamed.png"/>
</div>
<div id="element2Container">
<img id="element2" src="http://globalapk.com/uploads/posts/2014-06/1402152414_unnamed.png"/>
</div>
<div id="element3Container">
<img id="element3" src="http://globalapk.com/uploads/posts/2014-06/1402152414_unnamed.png"/>
</div>
</header>
and here's the css:
#header{
background:#2b2b2b;
height : 8.5%;
width : 100%;
position : absolute;
}
#header #element1Container{
position : relative;
height : 100%;
width : 25%;
float : left;
}
#header #element1Container img{
height : 65%;
top : 50%;
position : relative;
float : left;
margin-left : 4%;
transform : translate(0,-50%);
}
#header #element2Container{
position : relative;
float : left;
height : 100%;
width : 50%;
}
#header #element2Container img{
height : 40%;
position : relative;
left : 50%;
top : 50%;
transform : translate(-50%,-50%);
}
#header #element3Container{
position : relative;
float : right;
height : 100%;
width : 25%;
}
#header #element3Container img{
height : 65%;
top : 50%;
position : relative;
float : right;
margin-right : 4%;
transform : translate(0,-50%);
}
I want this result Demo
instead this Demo
Demo jsFiddle
How to move the div menu to end right side of div Container , So the menu will be on the right side.
I dont want position absolute because when you change the width size of the window page, the menu will hide the background of the image background Frog+Snake.
Many Thanks.
The code:
<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
body {
background-color : black;
background-image : url('pic/bg1.png');
background-size : 100% 700px;
background-repeat : no-repeat;
margin : 0;
margin-left : -100px;
padding : 0;
}
.imageContainer {
position : relative;
margin-left : auto;
margin-right : auto;
top : 10px;
background-size : 1000px 500px;
width : 1000px;
height : 500px;
overflow : hidden;
}
#Container {
background-image : url('pic/1/3.jpg');
background-repeat : no-repeat;
z-index : 0;
}
.layer {
position : absolute;
width : 1000px;
height : 500px;
padding : 0;
margin : 0;
}
#parrot {
z-index : 5;
}
#frog_snake {
z-index : 4;
}
#fly {
z-index : 3;
}
#crok {
z-index : 2;
}
#leafvarible {
position : absolute;
padding : 0;
margin-left : auto;
margin-right : auto;
display : block;
top : 10px;
left : 100px;
width : 1px;
height : 1px;
z-index : -1;
}
#pos {
top : 50px;
left : 10px;
color : white;
font-size : 16px;
}
#status {
position : absolute;
top : 350px;
left : -100px;
color : pink;
font-size : 20px;
padding-left : 120px;
}
#status1 {
position : absolute;
top : 375px;
left : -100px;
color : pink;
font-size : 20px;
padding-left : 120px;
}
#status2 {
position : absolute;
top : 400px;
left : -100px;
color : red;
font-size : 20px;
padding-left : 120px;
}
#fps_count {
position : absolute;
top : 10px;
right : 10px;
width : 150px;
font-size : 20px;
color : white;
font-family : 'Happy Sans', cursive;
border : red solid 1px;
}
#loading {
background : blue;
background-image : url('pic/FrogGameBackGround.jpg');
background-repeat : no-repeat;
background-size : 1000px 500px;
z-index : 10;
}
#loading > #barCont {
width : 400px;
height : 20px;
position : absolute;
top : 300px;
left : 50%;
margin : -10px 0 0 -200px;
background : black;
}
#loading > p {
position : absolute;
top : 275px;
left : 50%;
z-index : 11;
}
#bar {
width : 0;
height : 20px;
position : absolute;
left : 0;
background : #F3FF67;
}
#menu {
float : left;
width : 200px;
height : 500px;
position : relative;
left : 10px;
top : 0;
background-image : url('pic/menu.png');
border : red solid 1px;
clear : both;
}
#StartButton {
position : absolute;
right : 25px;
top : 300px;
width : 200px;
text-align : center;
color : white;
font-size : 35px;
text-shadow : 4px 4px 4px black;
cursor : pointer;
}
#speaker {
position : absolute;
right : 150px;
top : 350px;
width : 50px;
}
</style>
</head>
<body>
<div id= "Container">
<canvas id="A1" class="layer"></canvas>
<canvas id="A2" class="layer"></canvas>
<canvas id="A3" class="layer"></canvas>
<canvas id="A4" class="layer"></canvas>
</div>
<div class="imageContainer" id="loading">
<p id="loadText">Loading...</p>
<div id="barCont">
<div id="bar"></div>
</div>
</div>
<canvas id="A5"></canvas>
<div id="menu">
<!-- Button Start Game -->
<input id="StartButton" type="button" value="Start Game"/>
<!-- Loading sounds -->
<div id="speaker">speaker</div>
</div>
<script></script>
</body>
</html>
use position relative instead of absolute and use float:right; and/or float:left;
on both your main page and on your menu.
also what is that A5 thing for?
Remove all position property from #menu and set it to display:flex; and later add following margin margin:0 0 0 auto; . This will make menu align to right side no matter what is screen size is.