because i need to give a constant width & height to my div depending on my background image size,i need to find out that.
here was many solutions for this issue....
like here:
How do I get background image size in jQuery?
here is my code
body{
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
background-position: center;
background-image: url(./mybgimg.png);
}
#a{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 980px;
max-height: 680px;
background-image: url(../myImage.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample</title>
</head>
<body>
<div class="container">
<div id="a">
<div >
<!-- sth that should place exactly in this div depending on what size is my #a div ... -->
</div>
</div>
</div>
</body>
</html>
how i get background image size of div with #a id ?
Related
I have some issues with particles-js, firstly, it does not cover the whole page. Secondly, I cannot interact with the particles for some reason.
This is the code for HTML:
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
And this is my css for particles-js:
#particles-js{
position : absolute;
width:100%;
height:100%;
z-index:-1;
background-image: url(gfx/testback.png);
}
[1]: https://i.stack.imgur.com/XO6w5.png
It's really easy to cover all the page with particle-js like my website: https://askianoor.ir
You should add a div with height 100
Edited Version :
<body>
<div class="h-100">
<!-- PARTICLES-->
<div id="particles-js">
<div class="position-absolute w-100">
Place your text here !
</div>
</div>
</div>
</body>
and in CSS :
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url(gfx/testback.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
I want to create a navigation page where 3 images are displayed as diagonal stripes. My first approach was to use div's and to transform -webkit-transform: skew into shape. The problem is that the first and last image leaves a lot of free space.
My second approach would be to use canvas because it allows me to define the shape freely.
I'm not sure if I can use the images as buttons(onclick event) because the shape would be correct, but the div will remain rectangular. With the consequence that if for example the middle image is clicked and the middle div overlap the first div the first function of the first image is triggered.
Do you know a good way to solve this problem? Do you have a better approach?
The idea:
The stripes should have the +- the same size. Unlike my sketch
As requested here the code fragment. Unfortunately there is not much, as I haven't found a clever approach yet:
html, body{
width: 1024px;
height: 768px;
}
:root{
--preset-screen-width: 1024px;
--preset-screen-height: 768px;
--main-img-width: calc((var(--preset-screen-width) / 3) - 5px);
}
/*
.Hidden-Images {
width: 1024px;
height: 768px;
}
*/
.Hidden-Image_1{
width: 1024px;
height: 768px;
background-image: url(../img/redhead.jpg);
background-size: 1024px 768px;
background-repeat: no-repeat;
display: none;
}
.Hidden-Image_2{
width: 1024px;
height: 768px;
background-image: url(../img/brownhead.jpg);
background-size: 1024px 768px;
background-repeat: no-repeat;
display: none;
}
.Hidden-Image_3{
width: 1024px;
height: 768px;
background-image: url(../img/loecklihead.jpg);
background-size: 1024px 768px;
background-repeat: no-repeat;
display: none;
}
.Image-Stripes-Holder{
width: 1024px;
height: 768px;
text-align:center;
background-color: rgb(93, 129, 39);
overflow: hidden;
}
.First-Image-Holder{
width: var(--main-img-width);
height: var(--preset-screen-height);
border: red 1px solid;
display: inline-block;
-webkit-transform: skew(20deg);
overflow: hidden;
}
.Second-Image-Holder{
width: var(--main-img-width);
height: var(--preset-screen-height);
border: blue 1px solid;
display: inline-block;
-webkit-transform: skew(20deg);
overflow: hidden;
}
.Third-Image-Holder{
width: var(--main-img-width);
height: var(--preset-screen-height);
border: green 1px solid;
display: inline-block;
-webkit-transform: skew(20deg);
overflow: hidden;
}
<!doctype html>
<html>
<head>
<title>CH.Valette_S1.C1_2019.1850-DE</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/valette_custom.css">
<link rel="stylesheet" href="modules/essential/bootstrap/css/bootstrap.css">
<script type="text/javascript" src="modules/noBouncing/noBouning.js"></script>
<script type="text/javascript" src="modules/fastSwipe/fastSwipe.js"></script>
<script type="text/javascript" src="modules/essential/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="modules/fastSwipe/_vendor/jquery-ui.min.js"></script>
<script type="text/javascript" src="modules/essential/veeva-lib/veeva-library-3.2.js"></script>
<script type="text/javascript" src="modules/fastSwipe/_vendor/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="modules/fastSwipe/accelerator/lib/touchy.min.js"></script>
<script type="text/javascript" src="modules/fastSwipe/_vendor/iscroll.js"></script>
<script type="text/javascript" src="modules/essential/bootstrap/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="Hidden-Images">
<div class="Hidden-Image_1">
</div>
<div class="Hidden-Image_2">
</div>
<div class="Hidden-Image_3">
</div>
</div>
<div class="Image-Stripes-Holder">
<div class="First-Image-Holder">
<!--<img class="First-Image" src="assets/img/redhead_small.jpg">-->
</div>
<div class="Second-Image-Holder">
<!--<img class="First-Image" src="assets/img/brownhead_small.jpg">-->
</div>
<div class="Third-Image-Holder">
<!--<img class="First-Image" src="assets/img/loecklihead_small.jpg">-->
</div>
</div>
</body>
</html>
You can try using a map in your HTML to define click areas. Done this in the past and it works perfectly.
Remember to use
<area shape="poly"> for the map and define coordinates for click areas.
More detailed reading with an example can be found here.
Hi I was using a Scrollr jquery plugin made by Alexander Prinzhorn to make a parallax effect. I made a parallax effect happen on full screen, but when I wanted it to happen on a specific div, it doesn't work. The original tutorial is made by Petr Tichy. I hope You can help me out here.
This is the code
css file
.con{
width: 500px;
height: 500px;
overflow: auto;
margin: 40px; background-color: #b3b3b3;
}
body{
padding: 0;
margin: 0;
background-color: #a3a3a3;
}
section{
height: 400px;
}
#slide-1 .bcg{
display: block;
}
#slide-2 .bcg{
display: block;
}
.bcg{
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 500px;
width: 500px;
}
These are script files I included.
<script src="path to jquery/jquery-1.9.1.min.js"></script>
<script src="path to scrollr js /skrollr.js"></script>
<script>
//initialize the scrollr function
$(document).ready( function(){
var s = skrollr.init({
forceHeight: false });
});
</script>
html file
<div class="con">
<section id="slide-1">
<div class="bcg" style="background-image: url('img1.jpg')"
data-center-top="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-anchor-target="#slide-1"
data-emit-events>
</div>
</section>
<section id="slide-2">
<div class="bcg" style="background-image: url('img2.jpg')"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-bottom-top="background-position: 50% 100px;"
data-anchor-target="#slide-2"
data-emit-events>
</div>
</section>
</div>
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;
}
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/