I can't find anything that works for me, and since I'm a cut and paste html editor (I know only the main basic stuff), I don't understand most of the other posts. This is the webpage I'm working with: http://goo.gl/MgsoX4 (I'm hosting it on dropbox because I haven't finished it yet). I had the idea of having a background change every time some refreshed/reloaded the page. I can't seem to find anything that works for me. The CSS for the background is the following:
#banner {
background-attachment: scroll, fixed;
background-color: #666;
background-image: url("images/overlay.png"), url("../images/1.jpg");
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
color: #fff;
padding: 12em 0 20em 0;
text-align: center;
}
Whenever I change "../images/1.jpg" to "../images/2.jpg", the background will change to the second jpg, but I've tried a php image rotator and it won't work!
The issue you're having is that you're trying to define the image inside of the stylesheet. In order to create a random background image, it will have to be attached as an inline style.
Keep the css how you currently have it for a fallback. You would then have the div look something like this:
<div id="banner" style="background-image:url("images/newImage.jpg");"></div>
#Steve-Sanders comment is also correct in that you will need an actual server to run PHP.
Inside of your PHP page, inside of the head tag, you could alter the #banner style. Because CSS is cascading, doing this will override anything inside of your external style sheet
my_style_sheet.css
#banner {
background-attachment: scroll, fixed;
background-color: #666;
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
color: #fff;
padding: 12em 0 20em 0;
text-align: center;
}
my_page.php
<head>
<link rel="stylesheet" type="text/css" href="my_style_sheet.css" />
<style type="text/css">
#banner {
background-image: url('images/<?php echo rand(0, 5); ?>.jpg');
}
</style>
Javascript example
...
<div id="banner"></div>
<script type="text/javascript">
document.getElementById('banner').style.backgroundImage = "url('images/'" + Math.ceil(Math.random() * 5) + ".jpg')";
</script>
If you want to use JQuery you can paste this code in the head section of your html page or just before the closing tag of your page.
I dowloaded your files and changed the file path for the img and it worked fine for me. everytime I hit f5 you will get a new background image
<!-- place in head element or before closing--> <!-- </body> tag of html page -->
<!--load JQuery first-->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
//the highest number of the image you want to load
var upperLimit = 10;
//get random number between 1 and 10
//change upperlimit above to increase or
//decrease range
var randomNum = Math.floor((Math.random() * upperLimit) + 1);
//change the background image to a random jpg
//edit add closing ) to prevent syntax error
$("body").css("background-image","url('images/" + randomNum + ".jpg')");//<--changed path
});
</script>
It won't work, unless your page is in PHP. You need to use javascript/ajax instead to rotate the images.
PHP requires a server that can execute the code. Dropbox doesn't execute the code because it isn't supposed to. Instead it just serves the html the way it was uploaded, if you check the DOM you will see the php tags. When served by a proper server that executes php the tags are removed.
Edit: change the html file's extension to "php" so that it looks like "index.php"
A simple solution to this could be,
before doctype
<?php
$bgimage = array('originals/background-01.png', 'originals/background-02.png', 'originals/background-03.png', 'originals/background-04.png', 'originals/background-05.png', 'originals/background-06.png');
$i = rand(0, count($bgimage)-1);
$mybgimage = "$bgimage[$i]";
?>
and inside style call
background: url(images/<?php echo $mybgimage; ?>) no-repeat;
Related
I downloaded a free css/html template for a work, but I have a massive problem... I tried to change the background, but even if I saved and I deleted (yes, I did erase the previous image from my PC!) it still didn't change.. I tried to define the background directly in the html, but then it hasn't shown any photo as a background. What is the problem?
I searched for methods, but none of them worked.. I tried to analyze with the Inspect function on the page, after it had loaded, and if I changed the code in the console, the background changed. Even though, if I replaced the css file with the one I made in the browser, the first image came back, I think I can't get rid of it ever...
What I want:
.main-home {
background: url('../images/background.jpg') no-repeat;
height: 100vh;
}
<section id="home" class="main-home parallax-section">
<div class="overlay"></div>
<div id="particles-js"></div>
</section>
And the code my browser shows:
.main-home {
background: url('../images/home-bg.jpg') no-repeat;
height: 100vh;
}
I expect to see the background.jpg as the actual background of the site, not this... And yes, I saved the css, I refreshed, tried other browsers, other stylings etc
Use property !important it's allows you to increase the priority of style.
.main-home {
background: url('../images/background.jpg') no-repeat !important;
height: 100vh;
}
try add background-size and background-position
.main-home {
background-image: url('../images/background.jpg');
height: 100vh;
width: auto;
background-repeat: no-repeat;
background-size: center;
background-position: center;
}
maybe your section id which is #home have another CSS. or please try using !important. like as below
background: url('../images/home-bg.jpg') !important;
Look every css rules in the css file containing the image path
'images/background.jpg'(eg:).
Sometimes the image may be called from different css rules, like from
media query part.
Open Chrome inspector Network tab and check the Initiator column
against the 'images/background.jpg' image request. Hover on it and
it will show the code that triggered the image request.
Example, if the image was triggered from a JS file the particular line
that caused the action will be shown in the Initiator section.
Also just as like every time, Clear Cache.
I kindly ask you for your ideas: I would like to generate a div depending on the size of the window height.
I have created the following script to extract the height via a javascript. I then transform the value to a PHP variable, which I try to insert into the corresponding CSS sheet. When I enter a fixed number (e.g. 800px) the div displays correctly. When I try to use the PHP variable, I don't see anything.
Would you please help me?
Thank you.
<script type="text/javascript">
<!--var w = screen.width;-->
var w = window,
x = w.innerWidth,
y = w.innerHeight;
<?php $screen_height = "<script>document.write(y)</script>";?>
</script>
<style type="text/css">
#map { width: auto; height: 800px; border: 0px; padding: 10px; padding-top: 10px; padding-right: 10px; margin-right: 10px;}
My solution was:
#map { width: auto; height: <?php echo $screen_height;?>px; border: 0px; padding: 10px; padding-top: 10px; padding-right: 10px; margin-right: 10px;}
Thank you for your help.
Best regards.
Try to use:
<?php echo $screen_height; ?>
instead of:
<?php $screen_height = "<script>document.write(y)</script>";?>
you cannot use JS in CSS!
Your javascript is executed in the browser, while the PHP is executed on the server. The page is already rendered in the browser by the time the javascript figures out what size the screen is. If you need to change the size of a div based on display screen size, just modify the size of the div with your javascript function.
javascript executes on the client, whereas php code is executed on the server side. store the required width and height in a javascript variable
<script type="text/javascript">
function myfun()
{
var w=100;
var h=200;
document.body.innerHTML = '<div style="position:absolute;width:'+w+'px;height:'+h+'px;opacity:0.3;z-index:100;background:#000;"></div>';
}
</script>
<body>
<div id="d1">hello this is div 1</div>
<button id="b1" onclick="myfun();">click</button>
</body>
you can use the javascript itself to load the div and assign the css properties.
create a file like style.css.php
Start the file with
and then treat it like a normal CSS file, but you will be able to use php values in it.
You will not be able to use javascript in it however, but you will be able to pass values to it by request so you can request style.css.php?windowSize=800.
Ideally though it would be better to simply use javascript to alter a class, or use media queries.
what exactly you want to do? if you just need the div size to be related to the window size you could simply use a percentage (example css, height:90%). if you want to change the div size after the DOM has loaded you'll need some javascript.
My scenery: I have Drupal 7 with a Omega theme installed.
My issue: I have to set a random background for a specific zone of my css (section-header).
I have 4 separated css files because of the responsive design, and the file name is the same but the only difference is the _mobile _narrow _normal _wide postfix.
I have set the background in the css file with some simple lines:
#section-header {
background: url(../images/sf_header_wide.jpg) no-repeat top center;
height: 390px;
margin: 0;
padding: 0;
}
I need to add more than one image for the background, and I would like to know if there was possible to import the file name from an external source (my template php file for example) and obtain something like this without adding the background lines to the template.php file, because i have separated css files for the responsive design
#section-header {
background: url("../images/<?php echo $fileimage; ?>_wide") no-repeat;
height: 390px;
margin: 0;
padding: 0;
}
Is it possible to obtain what i need?
I don't recommend doing it this way as web browsers are going to be caching your CSS files so if you want it to change each time, it will not. Besides that, this is not a normal practice,
There are a few things you could do instead, though. One would be within the page header itself, just generate that style sheet like so
<head>
<link rel="stylesheet" type="text/css" href="primaryStyleSheet.css" media="screen" />
[...]All other head stuff, imports, responsive style sheet stuff here
<style>
/* Define this style AFTER the other CSS files are imported to be sure it loads */
#section-header {
background: url("../images/<?php echo $fileimage; ?>_wide") no-repeat;
height: 390px;
margin: 0;
padding: 0;
}
</style>
</head>
Additionally, you could add !important to each of CSS definitions (ie. height: 390px !important;)
This code creates a pdf from html. Here is an example. How to make the background image on the second page like on the first page?
$mpdf = new mPDF('utf-8','A4','8','',10,10,22,22,10,20);
$html = '<div id="for_pdf">
<h3>some text</h3>
...
<h3>some text</h3>
</div>';
$stylesheet = file_get_contents('./static/css/print.css');
$mpdf->WriteHTML($stylesheet,1);
$mpdf->list_indent_first_level = 0;
$mpdf->WriteHTML($html,2);
$mpdf->Output("$doc_name.pdf",'D');
Part of print.css file:
#for_pdf{
background-image: url("/static/image/pdf_img/big_logo.gif");
background-repeat: no-repeat;
background-position: center;
}
I know this is an old question but the solution is to use the #page selector in CSS.
#page {
background: url("/static/image/pdf_img/big_logo.gif") 50% 0 no-repeat;
}
*I turned your CSS into shorthand but does the same thing.
The above code should be added to your css file or inside tags in your html file.
#page should also be the first call in the css otherwise mPDF will ignore it.
Using #page will make changes to every page no matter how many you have. You can also do some more cool stuff by doing "#page :first {}" which allows you to put custom settings for just the first page and then use regular #page to affect the rest differently from the first.
I am using this code:
<?php
header("Content-type:image/gif");
And some PHP gd code below to generate the image
?>
The problem is that the page title is set to an image of width x height. Is there a way to change the page title, without using the following?
<img src='link'/>
NOTICE: I don't need to use any JavaScript code or external file.
Wrap the image's new window in html. I'm assuming from the question's poor wording that you are opening a new window with "just the image" as its content?
If so, just wrap it via HTML. Unless a browser is not consuming the result, in which case you need to be more specific to the process / purpose.
The text you see in the title of a page like this is determined by the browser. You can't change it via PHP. When rendering an HTML page, the browser looks for the title element, however, in everything else, it chooses the title based on attributes of the page you're viewing. As you guessed it, the only alternative is to create an HTML page and reference the image through an img tag and changing the title through the title tag.
You can create an html page, with an iframe (size = 100%), that embeds the image. Then you can then set the title in the HTML page.
Example:
<html>
<head>
<title>YOUR TITLE</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
iframe {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
border: none; padding-top: 32px;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
</style>
</head>
<body>
<iframe src="http://www.nbc.com/"></iframe>
<body>
</html>