Your css is here: Project/Web/Support/Styles/file.css

1 time `../` means Project/Web/Support and 2 times ../ i.e. `../../` means Project/Web


Try:

    background-image: url(&#39;../../images/image.png&#39;);



There are two basic ways:

    url(../../images/image.png)

or

    url(/Web/images/image.png)

I prefer the latter, as it&#39;s easier to work with and works from all locations in the site (so useful for inline image paths too).

Mind you, I wouldn&#39;t do so much deep nesting of folders. It seems unnecessary and makes life a bit difficult, as you&#39;ve found.

Use the below.

    background-image: url(&quot;././images/image.png&quot;);

This shall work.

You need to get 2 folders back from your css file. 

**Try:**

    background-image: url(&quot;../../images/image.png&quot;);

you can also add inline css for adding image as a background as per below example

    &lt;div class=&quot;item active&quot; style=&quot;background-image: url(../../foo.png);&quot;&gt;

The solution (http://expressjs.com/en/starter/static-files.html).

once done this the image folder no longer shalt put it. only be

 background-image: url ( &quot;/ image.png&quot;);

carpera that the image is already in the static files

I&#39;ve read a lot of web-sites about printing page numbers, but still I couldn&#39;t make it display for my html page when I try to print it.&lt;br&gt;
So the CSS code is next:&lt;br&gt;

    @page {
      margin: 10%;
    
      @top-center {
        font-family: sans-serif;
        font-weight: bold;
        font-size: 2em;
        content: counter(page);
      }
    }
I&#39;ve tried to put this page rule inside 

    @media all {
        *CSS code*
    }
And outside of it, tried to put it in `@media print`, but nothing helped me to display the page numbers on my page. I&#39;ve tried to use FireFox and Chrome(based on WebKit as you know). I think the problem is in my html or css code.&lt;br&gt; Could somebody show me an example of implementing this `@page` rule in the big html page with several pages? I just need the code of html page and the code of css file, that works. &lt;br&gt;
P.S. I have the latest supported versions of browsers.

Print page numbers on pages when printing html

When calculating a simple moving average, `numpy.convolve` appears to do the job.

**Question:** How is the calculation done when you use `np.convolve(values, weights, &#39;valid&#39;)`? 

When the docs mentioned `convolution product is only given for points where the signals overlap completely`, what are the 2 signals referring to?

If any explanations can include examples and illustrations, it will be extremely useful.

    window = 10
    weights = np.repeat(1.0, window)/window
    smas = np.convolve(values, weights, &#39;valid&#39;)

Understanding NumPy&#39;s Convolve

My CSS file is in :

Project/Web/Support/Styles/file.css

My image is in :

Project/Web/images/image.png

I want this image in my CSS file.

I have tried :

    1) background-image: url(/images/image.png);
    2) background-image: url(&#39;/images/image.png&#39;);
    3) background-image: url(&quot;/images/image.png&quot;);
    4) background-image: url(../images/image.png);
    5) background-image: url(&#39;../images/image.png&#39;);
    6) background-image: url(&quot;../images/image.png&quot;);

But. i&#39;m not getting this image in my page.

What is the correct way to specify the path of image file in the css file ?

How to give the background-image path in CSS?

My CSS file is in :
Project/Web/Support/Styles/file.css
My image is in :
Project/Web/images/image.png
I want this image in my CSS file.
I have tried :
<pre><code class="hljs language-css">1) background-image: url(/images/image.png);
2) background-image: url('/images/image.png');
3) background-image: url("/images/image.png");
4) background-image: url(../images/image.png);
5) background-image: url('../images/image.png');
6) background-image: url("../images/image.png");
</code></pre>
But. i'm not getting this image in my page.
What is the correct way to specify the path of image file in the css file ?

Is there a way I could add in the source of my image codes that could rotate my image?

Something like this:

    &lt;img id=&quot;image_canv&quot; src=&quot;/image.png&quot; rotate=&quot;90&quot;&gt;

I&#39;m making my images dynamic, so I was wondering if I could append some extra code to rotate it if I want it to.

Rotate an image in image source in html

I have been trying to add background image to a div class using CSS, but I didn&#39;t have any success.

HTML code:

    &lt;header id=&quot;masthead&quot; class=&quot;site-header&quot; role=&quot;banner&quot;&gt;
        &lt;div class=&quot;header-shadow&quot;&gt;&lt;/div&gt;
            &lt;hgroup&gt;&lt;/hgroup&gt;
            &lt;nav role=&quot;navigation&quot; class=&quot;site-navigation main-navigation&quot;&gt;

            &lt;/nav&gt;&lt;!-- .site-navigation .main-navigation --&gt;
    &lt;/header&gt;&lt;!-- #masthead .site-header --&gt;

CSS:

    .header-shadow{
        background-image: url(&#39;../images/header-shade.jpg&#39;);
    }

Additional information:

This is an image with a shadow and I am using it at the top of the website, so it mustn&#39;t have a particular width.



Adding background image to div using CSS

Is there a way to set thumbnail image on HTML5 video?
I want to see some pictures before play.
My code looks like this:

    &lt;video width=&quot;470&quot; height=&quot;255&quot; controls&gt;
		&lt;source src=&quot;video.mp4&quot; type=&quot;video/mp4&quot;&gt;
		&lt;source src=&quot;video.ogg&quot; type=&quot;video/ogg&quot;&gt;
		&lt;source src=&quot;video.webm&quot; type=&quot;video/webm&quot;&gt;
		&lt;object data=&quot;video.mp4&quot; width=&quot;470&quot; height=&quot;255&quot;&gt;
		&lt;embed src=&quot;video.swf&quot; width=&quot;470&quot; height=&quot;255&quot;&gt;
		&lt;/object&gt;
	&lt;/video&gt;

Thanks!

How to set the thumbnail image on HTML5 video?

How can I create a larger space between each link on my navbar, so they are further apart?
Is it something I change the CSS or HTML?
Here&#39;s how I&#39;ve implemented my navbar in the html:

    &lt;div class=&quot;navbar-wrapper&quot;&gt;
	&lt;div class=&quot;container&quot;&gt;
		&lt;div class=&quot;navbar navbar-static-top&quot; role=&quot;navigation&quot;&gt;
        &lt;div class=&quot;container full-width&quot;&gt;
        &lt;div class=&quot;navbar-header&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;navbar-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse&quot;&gt;
                &lt;span class=&quot;sr-only&quot;&gt;Toggle navigation&lt;/span&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
              &lt;/button&gt;
        	&lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
         &lt;/div&gt;
         &lt;div class=&quot;navbar-collapse collapse&quot;&gt;
         	&lt;ul class=&quot;nav navbar-nav navbar-right&quot;&gt;
                &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#home_page&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#about_page&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#portfolio_page&quot;&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#contact_page&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/div&gt;
         &lt;/div&gt;
         &lt;/div&gt;
	&lt;/div&gt;
    &lt;/div&gt;

Changing the space between each item in Bootstrap navbar

I want background image fit with the height of the div, there&#39;s a way to do that? `background-size:cover;` fit only with the width and height autoscale (I need the opposite effect).
Thanks.


CSS background image to fit height, width should auto-scale in proportion

I have a video, and I want it to FILL 100% of the width, and 100% of the height. And keep the aspect ratio.

Is it possible that it at least fills 100% for both? And if a bit of the video has to be out of the screen to keep the aspect ratio, that doesn&#39;t matter.


HTML:

        &lt;video preload=&quot;auto&quot; class=&quot;videot&quot; id=&quot;videot&quot; height=&quot;100%&quot; preload&gt;
        &lt;source src=&quot;BESTANDEN/video/tible.mp4&quot; type=&quot;video/mp4&quot; &gt;
        &lt;object data=&quot;BESTANDEN/video/tible.mp4&quot; height=&quot;1080&quot;&gt;
            &lt;param name=&quot;wmode&quot; value=&quot;transparent&quot;&gt;
            &lt;param name=&quot;autoplay&quot; value=&quot;false&quot; &gt;
            &lt;param name=&quot;loop&quot; value=&quot;false&quot; &gt;
        &lt;/object&gt;
CSS:

     .videof, .videot {
	    width: 100%    !important;
        height: 100%   !important;
     }

Content Type	Original Author	Original Content on Stackoverflow
Question	Jobin	View Question on Stackoverflow
Solution 1 - Html	codingrose	View Answer on Stackoverflow
Solution 2 - Html	ralph.m	View Answer on Stackoverflow
Solution 3 - Html	Nitesh	View Answer on Stackoverflow
Solution 4 - Html	UnderTheSea	View Answer on Stackoverflow
Solution 5 - Html	Yogesh	View Answer on Stackoverflow
Solution 6 - Html	lypef	View Answer on Stackoverflow

How to give the background-image path in CSS?

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

Solution 5 - Html

Solution 6 - Html

Understanding NumPy's Convolve

Print page numbers on pages when printing html

Attributions