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.
Related
I have the following function that I'm trying to use to get an image in the same directory as the plugin but inside the images folder.
function my_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo dirname(__FILE__); ?>/images/logo3.png);
height:65px;
width:320px;
background-size: 320px 65px;
background-repeat: no-repeat;
padding-bottom: 30px;
}
</style>
its is taken from the following, which works fine. yes "/" works.
function my_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
height:65px;
width:320px;
background-size: 320px 65px;
background-repeat: no-repeat;
padding-bottom: 30px;
}
</style>
What am I doing wrong?
Is this what you are looking for?
https://developer.wordpress.org/reference/functions/plugin_dir_path/
https://codex.wordpress.org/Function_Reference/plugins_url
Maybe next time also point out whats the result of the 'not working' one
Why its not working?
Dirname will return abs path, which if you try to access from browser will not resolve. The path you want is relative to wp root.
I have a file eksternal css "style.css"
<link rel="stylesheet" type="text/css" id="theme" href="css/style.css"/>
this part code is
.x-navigation > li.xn-logo > a:first-child {
font-size: 0px;
text-indent: -9999px;
background: url("../img/logo.png") top center no-repeat #68A9CF;
padding: 0px;
border-bottom: 0px;
color: #FFF;
height: 60px;
background-size: 180px 50px;
}
i want to change logo, but how to add dynamic data php in eksternal css,
i try like this, but doesn't work :(
<?php
include "connection.php";
$dataweb = mysqli_query($con,"select logo from web");
$web = mysqli_feth_object($dataweb);
?>
.x-navigation > li.xn-logo > a:first-child {
font-size: 0px;
text-indent: -9999px;
background: url("../img/<?php echo $web->logo ?>") top center no-repeat #68A9CF;
padding: 0px;
border-bottom: 0px;
color: #FFF;
height: 60px;
background-size: 180px 50px;
}
Have a solution ??
Help me thank's
Php doesn't work in a .css file. It only works in .php file. So you have to do the following in the .php file within the head tag
<style>
background: url("../img/<?php echo $web->logo ?>") top center no-repeat #68A9CF;
</style>
and please use the code at the first of the file to initiate the webroot.
<?php
include "connection.php";
$dataweb = mysqli_query($con,"select logo from web");
$web = mysqli_feth_object($dataweb);
?>
It will replace the logo for you.
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;
}
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>
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 ...