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 ...
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');
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 have a searchbar in my header, which I need centered horizontally and just a little bit above the bottom of the header. I was able to achieve this by using
display: flex;
justify-content: center;
align-items: center;
The problem I am having now is that although it is responsive when you make the window smaller horizontally, It is a total mess when you resize the window vertically. I am pretty sure it's because I used margin-top: 350px; to set the vertical position. I also would much rather not use flex display because it isn't supported by much yet. Below is a screenshot of how it looks normaly, and one of how it looks when the view is altered vertically. Also the code pertaining to it. If anyone could help me figure out how to get the searchbar to be responsive vertically, that would be great!
How it is normally:
How it looks when you change the screen size vertically (the searchbar is behind the images):
HTML:
<div class="outcont">
<div id="top" class="header">
<div class="wrap">
<div class="col1"><img class="logoi" src="<?php bloginfo('stylesheet_directory'); ?>/images/main-logo.png" alt="<?php bloginfo('name'); ?> Logo" /></div>
<div class="col2"><?php wp_nav_menu(array('menu' => 'global-nav', 'container' => '')); ?></div>
</div>
<?php get_search_form(); ?>
</div>
CSS:
#searchform div {
shadow: 4px 7px 4px #000000;
margin-top: 350px;
display: flex;
justify-content: center;
align-items: center;
}
#searchform .text {
font-family: 'Merriweather';
padding-left: 35px;
height: 75px;
width: 600px;
font-size: 220%;
color: #B7B7B7;
border-radius: 50px;
background: white url('images/search-img.png') no-repeat;
background-position: 96% center;
}
#searchform .text:focus {
background-image: none;
}
#searchform .text img {
margin-right: 25px;
}
Check out this Fiddle I have made for you.
I have my main div with a background-image and the input inside of that div with the css like so:
#hero {
background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
width: 100%;
height: 100vh;
margin-bottom: 0px;
right: 0;
}
#hero input {
position: absolute;
width: 200px;
height: 34px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding: 5px 10px;
border-radius: 50px;
outline: none;
}
This way the textbox will always stay in the center of the image no matter how the browser is scaled. In order for this to work the textbox must have a defined width and height.
So in your case replace your css for the searchbox with the css I have for #hero input and set the parent divs position to relative with position: relative;.
Please let me know how this works out for you.
Hope this helps!
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>
I have the header structure of my page as
<header>
<div class="clouds"></div>
</header>
The clouds do not change by the change in width of the screen. I want to make them responsive. How can I do with CSS.
I currently use the following CSS Code.
header{
width:100%;
height:100%;
}
.clouds{
z-index: -98;
position: absolute;
top:0px;
left: 0px;
width:100%;
background: url('../images/clouds.png') repeat-x;
-webkit-background-size: 100%;
-o-background-size: 100%;
background-size: 100% !important;
height: 30%;
min-width: 960px;
}
You should not add the height and width, this should do it at a bare minimum
background: url('../images/clouds.png')
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Use CSS media queries to do this.
http://css-tricks.com/css-media-queries/
Here is sample code for responsiveness:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100%;
border: 1px solid #555;
font: 14px Arial;
background-color:red;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: left;
display: box;
box-orient: horizontal;
}
.box > div:nth-child(1){ background : #FCC; -webkit-box-flex: 10;
}
.box > div:nth-child(2){ background : #CFC; -webkit-box-flex: 20;
}
.box > div:nth-child(3){ background : #CCF; -webkit-box-flex: 30;
}
.box > div:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<div>HTML5</div>
<div>CSS3</div>
<div>Javascript API for HTML5</div>
</div>
</body>
</html>
Demo: http://jsfiddle.net/TLnC3/
Your code is working fine for me.
Although you have some bad codes.
You dont have to
header{
width:100%;
height:100%;
}
if your going to make your .cloud 100% width, and the height is not necessary.
Maybe you thought it's not working because of the min-width. Which limits your .clouds minimum width. So if you are re-sizing it below your min-width. Your .clouds width doesn't change to your screen size.
And don't listen to the others who uses media query, for this basic responsiveness you don't have to use media query.
header{
width:100%;
height:100%;
}
.clouds{
z-index: 98;
position: absolute;
top:0px;
left: 0px;
width:100%;
background: url('../images/clouds.png') repeat-x;
-webkit-background-size: 100%;
-o-background-size: 100%;
background-size: 100% !important;
height: 30%;
}