I want to get background-image URL that is in internal css. I'm using xpath in php
Here is the html structure
<div id="plugin-title" class="with-banner">
<div class="vignette"></div>
<style type="text/css">
#plugin-title { width:772px; height:250px; background-size:772px 250px; background-image: url(//ps.w.org/jetpack/assets/banner-772x250.png?rev=1279667); }
</style>
<h2 itemprop="name">Jetpack by WordPress.com</h2>
</div>
If you want the links for background-image, then you can use this RegExp.
background-image.*?url\((.*?)\)
Example implementation:
$html = <<<EOT
<div id="plugin-title" class="with-banner">
<div class="vignette"></div>
<style type="text/css">
#plugin-title { width:772px; height:250px; background-size:772px 250px; background-image: url(//ps.w.org/jetpack/assets/banner-772x250.png?rev=1279667); }
</style>
<h2 itemprop="name">Jetpack by WordPress.com</h2>
</div>
EOT;
preg_match_all('/background-image.*?url\((.*?)\)/mi', $html, $matches);
$matches contains all the background-image urls.
Related
Is there a way of using a php variable to manipulate css?
I'd like to add an image chosen by a user in a wordpress post (featured image) to the background of a specific div. I know how to mix php and html but, is there a way of doing the same with css?
I'm getting the image with:
$img = get_the_post_thumbnail_url($post_id, 'mySize');
Well, you already know how to mix PHP and HTML, right? Then you just do the same, but creating a <style> element in <head>. You put your CSS in this element. Something like this:
<head>
<style>
div#myDivId { background-image: url("<%= $img %>"); }
</style>
</head>
What you could do is something like this:
<head>
<style>
.user img { background-position: center center; background-repeat: no-repeat; background-size: cover; }
</style>
</head>
...
<div class="user">
<img src="images/trans.png" width="50" height="50" style="background-image:url(<?php echo $img; ?>);" />
</div>
Where trans.png is a small transparent png image.
I have this CSS for FULL Background image. Now i want to pass PHP variable to this URL to change the background image dynamically. Plz let me know . my codes are..
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/6.jpg");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
You can use Inline or internal css as follow:
Internal
<style>
div { background-image: url(<?php echo $imageURL;?>); }
</style>
Inline
<div style="background-image:url(<?php echo $imageUrl?>) no-repeat center center fixed">
</div>
Reference from Change css background-image with php
you can use php variable in your style code but must need to write css code after php variable . something like this
<?php
$bg_image = '../img/picmax/6.jpg'; // this is static value for test
?>
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
and add style after define php value then you can use this code
<style>
.imgback {
padding-top: 140px;
height: 100vh;
min-height: 400px;
background-size: cover;
background-image: url("<?=$bg_image?>");
}
</style>
of you can use this php value in your html code
<?php
$bg_image = '../img/picmax/6.jpg';
?>
<section class="imgback" style="background-image: url('<?php echo $bg_image ?>')">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
hope it will help you.
You can simply load a data from database and place it inside everywhere you like.
`<?php
$a = "6.jpg";
?>`
then insert it into your css
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
But that won't be good enough because php only runs once on every refresh or load. (you can use jQuery) or you better use JavaScript for these type of works as because they are triggered by events so you can change images without refreshing the page
i would to create a pdf file from html with mpdf library. i would to set a background image just to 2'nd page of rendered pdf(not all pages). i use the following code:
$mpdf=new mPDF('');
$html = '
<body>
<style>
#page {
background: url("../mpdf60/bg1.jpg") 50% 0 no-repeat;
}
</style>
<div style="margin-bottom:50px"> </div>
<div align="center" style=" margin-bottom:350px"><img src="../mpdf60/pdffirst1.jpg" height="100" width="190" alt=""></div>
<pagebreak />
<div>
</div>
</body>';
in this code the background image set on all pages of rendered pdf(with #page selector).
how can i set the background image just for one page(2'nd page)? thanks...
According to the documentation, mPDF supports named #page selectors, so you could do this:
<style>
#page second {
background: url("../mpdf60/bg1.jpg") 50% 0 no-repeat;
}
</style>
and then:
div.second {
page: second;
}
and then your second page should be within a div with a second class. Look at the example given at the link with Chapter.
I am trying a really easy thing, hiding / showing an info div my mouse-hovering another element. My code structure is similar to:
<div class="divRow">
<div class="divColumn">
<div class="divInfo">Info</div><img src="" /></div>
<div class="divInfo">Info</div><img src="" /></div>
<div class="divInfo">Info</div><img src="" /></div>
</div>
</div>
Image is shown, and there should be a blank space in which I want divInfo to appear.
I am using the following jQuery code to show / hide:
$(function() {
$('.divInfo').hide();
$('.divColumn').hover( function() { $('.divInfo').toggle(); } );
});
Of course, this works, but shows / hides all 3 divs in the row at a time. I want to be able to show hide each one separately...
Is this possible using classes? Or do I have to use a different unique ID for each??
Functionality I want is shown here, but I don't know how to do that. :)
http://www.therice-co.com
Regards and thanks
Actually you want the divs to always be there but somehow "not visible" when you are not hovering them. This is as simple as:
.divInfo:not(:hover){
opacity: 0;
}
Fiddle
This is what are you trying to achieve
see http://jsfiddle.net/j0aoy47L/
Javascript
<script>
$(function() {
$('.divInfo').hover( function() {
$(this).find('.info').toggle();
} );
});
</script>
CSS
<style>
.info{
display: none;
text-align: left;
}
.divInfo{
background: #fcfcfc;
border:1px solid #e5e5e5;
width:360px;
height:200px;
position: relative;
margin-bottom: 10px;
text-align: center;
padding:10px;
}
.divInfo img{
position: absolute;
bottom: 9px;
left: 19px;
}
</style>
HTML
<div class="divRow">
<div class="divColumn">
<div class="divInfo">
<div class="info"><h4>Image Caption</h4> <p>Some image information</p></div>
<img src="http://placehold.it/350x100/addd" />
</div>
<div class="divInfo">
<div class="info"><h4>Image Caption</h4> <p>Some image information</p></div>
<img src="http://placehold.it/350x100/addd" />
</div>
<div class="divInfo">
<div class="info"><h4>Image Caption</h4> <p>Some image information</p></div>
<img src="http://placehold.it/350x100/addd" />
</div>
</div>
$('.divColumn').children('a').hover(function () { // bind it to exact image
$(this).prev('.divInfo').toggle(); // show previous div
});
will work
jQuery DEMO
but you definetely have too much closing </div>s
also you can do it with pure CSS if you wrap each info and image in separate div and use :hover on it
PURE CSS DEMO
Ok, ive spent a few days trying to figure out why this isnt working, and so far Google has gave me nothing of use. Maybe there is a built in rule that I just am not aware of. I hate posting on sites like this with questions that could be trivial but ive exhausted my own efforts.
So I have placed a background in my CSS and it works on the alotted tag, but it is adding some padding that is not specified. Trying to change it does nothing. The background for the body stretches the duration of the screen but not this one.
Here is where the header is being included.
<?php
require_once 'classes/Membership.php';
$membership = new Membership();
$loggedin = $membership->confirm_loggedin();
if(!$loggedin){
ob_start();
header("Location: http://lolteamrecruiter.com/login.php");
ob_end_flush();
}
?>
<!DOCTYPE html>
<?php
include # 'header.php';
?>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<div id="Login">
<!--LOGOUT BUTTON -->
<p>
Results Page
</p>
</div>
</body>
</html>
Here is the php file being included.
<link href="css/header.css" rel="stylesheet" type="text/css" />
<div id="header">
<img src="css/images/angel.png" height="40px" width="20px">
<?php
require_once 'classes/Membership.php';
$membership = new Membership();
$loggedin = $membership->confirm_loggedin();
if($loggedin){
echo ' <div id="header-right-account">
<ul id="nav">
<li>My Account
<ul>
<li>Edit</li>
<li>Tacos</li>
<li>Burritos</li>
<li>Log Out</li>
</ul>
</li>
</ul>
</div>';
}else{
echo '<div id="header-right">Log In</div>';
}
?>
</div>
This is the css file thats applying the background
#header{
background-image : url(images/black.png);
background-repeat : no-repeat;
background-size: 100% 100%;
background-attachment : fixed;
background-origin:border-box;
margin: 0 auto;
padding: 0;
top:0;
}
The site to see this is at http://lolteamrecruiter.com/
Do you mean the spacing around the logo? Just add display:block to the image.
Edit
Okay, add margin:0 to the body.
Your image is aligned to the baseline by default, which means that gap below it is space for the lower part of letters like p, g, j, etc.
Try this:
#header a img { vertical-align: middle; }
body {
background-image : url(images/login-box-backg2.png) no-repeat;
background-size: 100% 100%;
background-attachment : fixed;
margin: 0;
padding: 0;
}