How to get background image from internal css using xpath?


Tags: php,html,css,xpath,domxpath

Problem :

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>


Solution :

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.


    CSS Howto..

    How do you create a webpage with a floating image, top left, bottom right, and with wrapping text in the middle

    How to get same cursor(hand) on links in all browser?

    How to center divs on page

    CSS: how to have child1 the same height as child2?

    How do I get content to overflow into another div if there is room, using css?

    How to create automatic image gallery slideshow by using HTML,CSS and JavaScript

    How to emulate iOS style dropdown menus with html, css, javascript/jquery?

    How to set element in css at fixed position

    How to tell the browser to ignore previous css edits?

    Dynamic HTML 3 layers nested quotes - how to do?

    How do I change gradient color of text inside the Jumbotron?

    Show different text based on OS

    How do I style a circular vertically-loading progress bar?

    How to design “overflowing” border lines of css
    ?

    JQuery/CSS - How i can set imagem full size of div

    HTML & CSS - Table attribute in CSS is behaving usual. Don't know how to fix it

    How can I have % of width of an img wrapped in a specific div width?

    How do you create a scrollbar that recognizes scrolling only for the current topmost container using css?

    How should I add some space between the text and the border using CSS

    How do I set the width of inputs within a column in Twitter Bootstrap's grid system?

    How to stop jitter of relatively placed items on scrolling with mouse?

    How can I use :hover with multiple classes

    How to implement ::ms-clear in CSS?

    How to resize the width of a div based on another div on it's right, only with CSS(no JS)

    How to create a div in the same size as the contained image. Both should be responsive

    How to implement css classes in form using laravel collective 5.2 . *

    Div is laying ontop of absolute-positioned element. How to put element above the div?

    How to embed Javascript in CSS?

    Can't get table to show up using HTML and CSS

    How can I format outer table but not inner table