I was wondering if anyone can help. I am trying to add PHP code, which is retrieving an image from a database, into CSS.
I have the small section of CSS code on my example.php page and need to have different images for backgrounds depending on what variables were posted to the example.php page.
The terrible code that I have come up with is as follows
<style>
.par-surround {
background-repeat: no-repeat;
background-image:<?php <img src=<?=$subject['picture']?>border="0" width="740px" height="auto"/> ?> ;
background-position: center top;
}
</style>
I don't know if this can be done or if I have to do it a completely other way. Any help would be appreciated, thank you.
It can be done but you need to output proper css to do this.
background-image does not take (invalid)html image tags:
<style>
.par-surround {
background-repeat: no-repeat;
background-image: url(<?=$subject['picture']?>);
background-position: center top;
}
</style>
The reasodin is correct. You just ned to have a valid PHP code:
<style>
.par-surround {
background-repeat: no-repeat;
background-image: url(<?php echo $subject['picture'] ?>);
background-position: center top;
}
</style>
Also make sure $subject is defined and has a value, BEFORE you output the CSS code.
Related
On my website, I want to cover a page (not the home page) completely with a picture. It should completely fill the screen on every device. I have specially created a childtheme to handle this problem.
On my website, I want to create a gallery facility that greets the visitor with a picture across the entire screen. I've created a childtheme for it as already mentioned. I first tried once in the functions.php folder to set the content width to 100%. Unfortunately, this did not work. Then I tried it with all over the custom css field on my wordpress theme. That too did not work.
`element.style {
background-image: url(https://philippfalkenhagen.de/wp-content/uploads/2019/10/Reh-im-Mohnfeld-Startseite-1.jpg);
max-width: 100%;
height: 801px;
width: 100%;
}
With this code, it should actually be funkitoinieren as I want. Unfortunately I can not integrate it into my data. He does not fit in functions.php and he does not work as a custom css either.
// set default content width
if ( ! isset( $content_width ) ) {
$content_width = 680;
}
This code in the functions.php folder was my second attempt. I could not set the width to 100% and on all other values she looked the same.
I expect that the picture under philippfalkenhagen.de/tiere-2`fills the entire screen. unfortunately it is not like that. When I used 100% of the second code, I could not even access my website until I reset the code.
Since you are dealing with a background and not a figure itself, try to use background-size: 100% 100% and background-repeat: no-repeat.
`element.style {
background-image: url(https://philippfalkenhagen.de/wp-content/uploads/2019/10/Reh-im-Mohnfeld-Startseite-1.jpg);
max-width: 100%;
height: 801px;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
background-size: cover;
will help you to solve this issue.
updated:
`element.style {
background-image: url(https://philippfalkenhagen.de/wp-content/uploads/2019/10/Reh-im-Mohnfeld-Startseite-1.jpg);
max-width: 100%;
height: 801px;
width: 100%;
background-size: cover;
}
This is my functions.php folder:
https://we.tl /t-g7Mvc2EbC6
I suspect that I have to put the code here, but I do not know where.
I have a php variable called MULTILANGUEwith a value define as true if the website has many languages and false if not.
The thing is I am using css files where I have some links like this
.fabricant .scroll:before {
content: "";
display: block;
width: 30px;
height: 18px;
background: url("../assets/img/picto/arrow-down.svg") no-repeat center center;
background-size: contain;
}
But the link is not the same depending if multilangue is true or false.
So I would like to make a condition for the url inside this css but I don't know how I can do that.
The obvious solution would be having a css file for both cases... but this would be redundant with a lot of duplicated code which is really bad.
The obvious solution is to have two CSS rules for the different backgrounds, and adding the appropriate class to elements dynamically in PHP. I repeat: you don't want dynamically generated CSS files.
.fabricant .scroll:before {
...
background: url("../assets/img/picto/arrow-down.svg") no-repeat center center;
}
.fabricant.multilang .scroll:before {
background-image: url("../assets/img/picto/arrow-up.svg");
}
<div class="fabricant <?php if ($isMultiLang) echo 'multilang'; ?>">
CSS doesn't has conditionals, you can use different classes so depending your variable you can call...
.fabricant.es .scroll:before {
...
}
or
.fabricant.en .scroll:before {
...
}
and use different content in each class..
You could embed different css files depending on your MULTILANGUE variable:
<link href="<?= MULTILANGUE?'multilangue.css':'non_multilangue.css' ?>" rel="stylesheet">
and in each css file you can put the url directive, changing it for multilanguage or not:
.fabricant .scroll:before {
background: url("../assets/img/picto/arrow-down.svg") no-repeat center center;
}
If I try to show an image after including my functions.php file into my style.php file, it will not show. When I delete the functions.php file, the image shows.
<?php
header("Content-type: text/css; charset: UTF-8");
include "inc/functions.php"; //when i delete this line, then the image will show up, but if i don't then the image won't show up.
?>
body {
color: #000;
background-image :url(http://127.0.0.1/niche/template/img/bg-image.jpg);
background-repeat: repeat-x;
background-size: cover;
font-family: 'Squada One', cursive;
}
If it is just the actual CSS you are after then why are you calling functions within it? Have you tried the inspector tool to see if the CSS is actually showing and whether something within the function file is outputting some data which is making the CSS file invalid therefore not working correctly
Surround your css with style tags
<style>
body {
color: #000;
background-image :url(http://127.0.0.1/niche/template/img/bg-image.jpg);
background-repeat: repeat-x;
background-size: cover;
font-family: 'Squada One', cursive;
}
</style>
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;
I'm trying to get the following wordpress-based site to have a single continuous background image:
Startup Roadmap | Idea Generation
I can change background of individual elements but have not found a way to have a single background stretching across entire screen like this.
Thanks for your help!
add this CSS to your body class
body.custom-background {
background: url('/wp/wp-content/themes/twentyfourteen/assets/BG.jpg');
background-size: auto 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
You need to look into the background property of CSS, and then apply it to the parent html element that contains everything. For the website you stated it would be the "body" element.
Look into the different properties of background here:
http://www.w3schools.com/cssref/css3_pr_background.asp
here's an example I use over and over again:
/* Global Container */
.globalContainer {
width: 100%;
background: url(../PATHTOYOURPHOTO) no-repeat center bottom fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can look up the background-size property yourself, but "cover" generally scales the photo to fill the entire screen and not stretch. However based on the screen size some parts of the image may be left out.