I'm creating a button that changes the background but I kinda got stuck.
I got far enough that I have the main functionallity but the background is not fullscreen. I have no clue how to get it back to fullscreen.
<html <?php echo "STYLE='background: url(".$back.") no-repeat center center fixed; width: 100%;'";?> >
and some css in the html
html {
background: url(../pic/back2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pic/back2.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pic/back2.jpg', sizingMethod='scale')";
}
Try to implement background-size property.
background-size:100% auto;
Background size is changed using attribute background-size so in your case you are changing HTML property width , not the background.
Try this..
<div id="background">
<img src="<?php echo $yourimage ;?>" class="stretch" alt="" />
</div>
then add this css
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -999; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
Why don't you use Javascript?
Something like:
<html>
<head>
<script>
function background() {
document.getElementsByTagName('html').url == "http://www.newurl.com/";
};
</head>
<body>
<button onclick="background()"></button>
</body>
</html>
Related
I have uploaded two videos to the database and Its being displayed on my website. I am trying to make them the same shape and height. The width is fine, but one of them is shaped like a square and the height is longer while the other is rectangle and the height is shorter and I know its because of the way video was taken, one was taken vertically and the other horizontally. How do I get them to be the same shape and height. Can you help me please?
I tried this
<video class="video1" id="cb" preload="auto" video="src="{{$proo->video}}#t=1"" style=" height:80%; max-height:20em; width:100%; max-width:20em; object-fit: cover;
float:left; clear:both;
padding-left:2%; margin-top:0px; cursor:pointer; "><source="video1.jpg" playsinline alt="Video Unavailable" id="" ></source>
</video>
this the javascript part to handle the onclick,onmouseleave
$(document).on('mouseover touchstart', 'video', function() {
$(this).get(0).play();
this.muted=true;
});
//pause video on mouse leave
$(document).on('mouseleave', 'video', function() {
this.currentTime = 1;
$(this).get(0).pause();
});
$(document).on('click touchstart', 'video', function() {
$(this).get(0).play();
this.muted=false;
this.currentTime = 0;
});
This a little something i came up with when i need to output YouTube videos in iframes and its very responsive meaning that it adjusts its height and width in relation with current screen size.
<style>
#mediaPlayer{
position: relative;
height: auto;
padding-bottom: 56.25%;
padding-top: 1.875em;
overflow: hidden;
border: 0.1875em double #185875;
background-image:url('../video_loading.gif');
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-attachment: fixed;
}
#mediaPlayer iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
}
</style>
/*use the div to specify the exact height and width you want*/
<div style="height: 50%; width:50%;">
<center>
<div id="mediaPlayer">
<iframe id="play_now" width="100%" height="100%" src="source here" value="value here" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</center>
</div>
The video_loading.gif background is usually a good idea for users with slow network to have something in the background while your iframe content is loading
but you have to find your own unique gif file/image and set it's location in the background-image:url('../file-location-here.gif');
Suppose I have a preloader screen for my site. I want to set it randomly for each time the site loads. I want to make the background property of my css file random using php. Here is a a demo code for the css file:
<style>
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
<?php
$number=rand(1,4);
$url=base_url('media');
if($number==1)
{
echo "background:"."url(". $url."/images/loader-64x/infinity1.gif) center no-repeat #fff;";
}
if($number==2)
{
echo "background:"."url(". $url."/images/loader-64x/infinity2.gif) center no-repeat #fff;";
}
if($number==3)
{
echo "background:"."url(". $url."/images/loader-64x/infinity3.gif) center no-repeat #fff;";
}
if($number==4)
{
echo "background:"."url(". $url."/images/loader-64x/infinity4.gif) center no-repeat #fff;";
}
?>
}
</style>
I just want to make the background property different each time. But I think it's not working, as I am not getting any preloader screen at all. Is there any mistake in setting the background inside php?
The problem is with base_url function in xampp. Use the below code instead and its working fine for me if you are having the images in correct location
<style>
.se-pre-con{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
<?php
$number=rand(1,2);
$url='media';
if($number==1)
echo "background:url('".$url."/images/loader-64x/infinity1.gif') center no-repeat #fff;";
else if($number==2)
echo "background:url('".$url."/images/loader-64x/infinity2.gif') center no-repeat #fff;";
?>
}
</style>
How ever I have a better solution, play php with html not css
<html>
<head>
<style>
.se-pre-con{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
}
.bg1{
background:url('media/1.jpg') center no-repeat #fff;
}
.bg2{
background:url('media/2.jpg') center no-repeat #fff;
}
</style>
</head>
<body>
<div class="se-pre-con <?php $arr=array('bg1','bg2'); echo $arr[array_rand($arr)];?>"></div>
Hello World
</body>
</html>
Where bg1 and bg2 are the classes created for different backgrounds and pick a random bg class for the preloader div
You are missing to put a quote into the CSS code. For example the code
echo "background:"."url(". $url."/images/loader-64x/infinity1.gif) center no-repeat #fff;";
will generate
"background": url(something/images/loader-64x/infinity1.gif) center no-repeat #fff;
Instead you need
echo "background:"."url(\"". $url."/images/loader-64x/infinity1.gif\") center no-repeat #fff;";
which will generate
"background": url("something/images/loader-64x/infinity1.gif") center no-repeat #fff;
I just noticed this weird thing. So I have a master CSS document, and I'm overriding one section in it with a PHP variable that I include at the beginning of my index.php to dynamically change a background image based on whats in a folder on the server.
In typical CSS I have this:
.fullscreen{
background: url('./Hero_Image/image01.jpg') no-repeat center center;
}
And I have a nice, full-screen image background for the .fullscreen class section that is scaled appropriately for the browser window and scales as the window is resized.
However, when I try to make this dynamic, using php and overriding like so:
<?php
include '_SiteResources/php/loadHeroImage.php'; //<< note: output is basically an echo of the URL of the first file in a folder
?>
<head>
<style type="text/css">
.fullscreen{ background: url('<?php getHeroImage(); ?>') no-repeat center center;}
</style>
</head>
I'm noticing overriding using PHP isn't showing the same result. Yes, its also fullscreen, but I'm noticing it also doesn't scale as the window scales, like the original CSS implementation; it seems to display scaled up, and doesn't scale with the browser window.
Why is that?
Here's the code for loadHeroImage.php per request:
<?php
function getHeroImage(){
$h = opendir('./Hero_Image/'); //Open the current directory
while (false !== ($heroImage = readdir($h))) {
if($heroImage != '.' && $heroImage != '..') { //Skips over . and ..
$heroFileInfo = pathinfo($heroImage);
$heroImagePath = $heroFileInfo['dirname'];
$heroImageBase = $heroFileInfo['basename'];
// $heroImageFullPath = $heroImagePath.$heroImageBase;
echo './Hero_Image/'.$heroImageBase.' ';
break;
}
}
}
?>
Ok, I managed to figure out my issue thanks to some hints from #jkon and #EduardoEscobar.
When overriding my CSS in the <head> tag, I thought I would only need to override the one command that I was changing, but it seems I needed to also include the rest of the other CSS commands.
In my CSS, my .fullscreen class looked like this:
.fullscreen {
height: 100%;
width: 100%;
background-color: #212121;
background: url('http://pathToImage.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
box-shadow: 0px 10px 45px #000000;
}
and in my index.php <head> tag, I was overriding just the background URL with PHP like so:
<head>
<style type="text/css">
.fullscreen{ background: url('<?php getHeroImage(); ?>') no-repeat center center;}
</style>
</head>
But what I should have been doing was including all the other CSS code. This is what ended up getting the same result as just my CSS hardcoded URL:
<style type="text/css">
.fullscreen{ background: url('<?php getHeroImage(); ?>') no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position: relative;
box-shadow: 0px 10px 45px #000000;
height: 100%;
width: 100%;
background-color: #212121;
}
</style>
Thanks everyone for your feedback and help! I really appreciate it!
I know you found the answer to your problem but I just wanted to expand on my comment to your answer.
You should be able to override just the background-image. You just have to include the base css declaration and then override just the background-image in another declaration.
For example:
<head>
<style type="text/css">
/* Base css code */
.fullscreen {
height: 100%;
width: 100%;
background-color: #212121;
background: url('http://pathToImage.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
box-shadow: 0px 10px 45px #000000;
}
/* Override the background image */
.fullscreen{
background: url('<?php getHeroImage(); ?>') no-repeat center center;
}
</style>
</head>
<?php include("asdkfasdf.php");?>
<head>
<style type="text/css">
.fullscreen{background: url('asdfasdf.jpg');}
</style>
</head>
<div class="fullscreen">asfdasdf</div>
</body>
<?php
if($imageCSS !== null || $imageCSS !== ''){
echo '<style type="text/css">
.fullscreen{background: url(\''.$imageCSS.'\');}
</style>';
}
?>
</html>
asadfasdf.php
<?php
function getHeroImage(){
$h = opendir('./Hero_Image/'); //Open the current directory
while (false !== ($heroImage = readdir($h))) {
if($heroImage != '.' && $heroImage != '..') {
$heroFileInfo = pathinfo($heroImage);
$heroImagePath = $heroFileInfo['dirname'];
$heroImageBase = $heroFileInfo['basename'];
// $heroImageFullPath = $heroImagePath.$heroImageBase;
$imageCSS = './Hero_Image/'.$heroImageBase.' ';
break;
}
}
}
?>
i don't recommend having php on the bottom, but this works. You shouldn't be echoing out a whole page that space. include the page, and echo only the link.
I just finished designing by website and now I am trying to layout the entire body in one whole piece rather than tiles continually repeating itself. May I ask how would I do this?
I am not sure if i make sense, but like a wall paper that is stretching out rather then 30 little tiles repeating itself
this is my code
HTML and the CSS
*{
padding: 0px;
margin: 0px;
}
body {
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS6TXzo5k9VRo8f0KY4P5UQECoegTmNsEcYpO2gNIuXxAN6CwBwEw')
}
and the html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
</body>
You need to set background-size. There are two options:
Option 1) cover will remain proportional -- Demo http://jsfiddle.net/jUcL9/4/ (drag the handles between panes to change the width/height of the preview pane)
body {
background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS6TXzo5k9VRo8f0KY4P5UQECoegTmNsEcYpO2gNIuXxAN6CwBwEw') no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you don't want the background to remain at the top, you would use center center instead of center top -- Demo http://jsfiddle.net/jUcL9/
Option 2) 100% 100%; will distort to fit -- Demo http://jsfiddle.net/jUcL9/1/
body {
background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS6TXzo5k9VRo8f0KY4P5UQECoegTmNsEcYpO2gNIuXxAN6CwBwEw') no-repeat center center fixed;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
You need to specify the Background Size and make it not repeat.
Here are some css properties to add to the body:
background-size:100px 100px;
background-repeat:no-repeat;
You will need to adjust to the proper size.
try inserting this on your css file:
html {
background: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS6TXzo5k9VRo8f0KY4P5UQECoegTmNsEcYpO2gNIuXxAN6CwBwEw") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
How can I have rotating background images that expand/contract if the browser window is expanded/contracted?
Does anyone know a script that does this? Or would there be a way with just CSS?
There's a jQuery plugin called SuperSized: http://buildinternet.com/project/supersized/ and the plugin handles all cross browser compatibility for you and will swap images at the time interval of your choosing if you want.
Or, the HTML5 way to do this (only supported in some browsers like Chrome): http://jsfiddle.net/jfriend00/vzYrf/
html {
background: url(http://photos.smugmug.com/photos/344291068_HdnTo-XL.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Or two more ways to do it yourself: Perfect Full Page Background Image.
it's simple :)
some css:
<style type="text/css">
html { height: 100%; overflow:hidden;}
body { background-color: transparent; margin: 0px; padding: 0px; height: 100%; border-top: 1px transparent solid; margin-top: -1px; z-index:0; position:relative; }
img#background { height: 100%; width: 100%; z-index: -1; position:absolute; color: black; }
</style>
you can play with these values ...
and body content:
<body bgcolor="#000300" style="margin:0px; width:100%">
<img id="background" src="background.jpg" alt="My Background" />
</body>
this is for 1 background, the rest you can do with javascript ...
<script type="text/javascript">
function changeBackground(){
var backgrounds = ['back1.jpg', 'back2.jpg', 'back3.jpg'];
var inRandom = Math.floor(Math.random() * backgrounds.length);
document.getElementById('background').src = backgrounds[inRandom];
setTimeout ( "changeBackground()", 10000 );
}
setTimeout ( "changeBackground()", 10000 );
</script>
I didn't test the script, but this is basically the idea ...