Tag: background
Nabin Nepal (Starx) background blur css image
April 15, 2012

Blured background image with css

Question by MSajjadi

MSajjadiMSajjadi

Is there anyway to blur an image with CSS, specially for backgrounds?

Answer by phpGeek

phpGeekphpGeek

Yes, there is.
You can use two different backgrounds, one with sharp color (the main picture) and another blurred picture: 

body  {
  background: url(images/bg-solid.jpg) no-repeat;
}

#page-wrap {
  background: url(images/bg-blurry.jpg) no-repeat fixed;
  width: 500px; margin: 40px auto;
}

To see the detailed tutorial click here

EDIT:
For an image you can use svg filters as below:
The <feGaussianBlur> element is used to create blur effects: 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>
  • The id attribute of the element defines a unique name for
    the filter
  • The blur effect is defined with the element
  • The in=”SourceGraphic” part defines that the effect is created for
    the entire element
  • The stdDeviation attribute defines the amount of the blur
  • The filter attribute of the element links the element to the
    “f1” filter
    See here for detailed explanation

Answer by Starx

StarxStarx

This is not possible through CSS.

You have to process the image using a server-side language and generate a blurry one and then use it in the CSS backgrounds.

Nabin Nepal (Starx) background css inline-block
April 9, 2012

Surrounding DIV background-color and inline-block

Question by JohnDoe

JohnDoeJohnDoe

If I set the background color for a div containing divs which have display:inline-block set, the background color is not used.

JSFiddle links below.

Consider this snippets:

CSS:

.divisionOutputArea {
  background-color: yellow;
}
.divisionColumn[data-division=true][data-boxed=true] {
  border: 1px solid black;
  display: inline-block;
  float: left;
}
.divisionColumn[data-division=true] {
  display: inline-block;
  float: left;
}
.divisionColumn[data-result=true] {
  display: inline-block;
  float: left;
}

And this HTML:

<div class="divisionOutputArea">
    <div class="divisionColumn" data-division="true" data-boxed="true">
        1<br /><br /><br /><br /><br />
    </div>
    <div class="divisionColumn" data-division="true" data-boxed="true">
        2<br />2<br /><br /><br /><br />
    </div>
    <div class="divisionColumn" data-division="true" data-boxed="true">
        3<br />3<br />3<br /><br /><br />
    </div>
    <div class="divisionColumn" data-division="true" data-boxed="true">
        1<br /><br />1<br />1<br /><br />
    </div>
    <div class="divisionColumn" data-division="true" data-boxed="true">
        2<br /><br /><br />2<br />2<br />
    </div>
    <div class="divisionColumn" data-result="true">
        :<br /><br /><br /><br /><br />
    </div>
    <div class="divisionColumn" data-result="true">
        5<br /><br /><br /><br /><br />
    </div>
    <div class="divisionColumn" data-result="true">
        =<br /><br /><br /><br /><br />
    </div>
    <div class="divisionColumn" data-result="true">
        2<br /><br /><br /><br /><br />
    </div>
    <div class="divisionColumn" data-result="true">
        4<br /><br /><br /><br /><br />
    </div>
    <div class="divisionColumn" data-result="true">
        6<br /><br /><br /><br /><br />
    </div>
    <div class="divisionColumn" data-result="true">
        2<br /><br /><br /><br /><br />
    </div>
</div>

I would like to render the background of the used area of <div class="divisionOutputArea">[Contained divs as of example]</div> e.g. yellow.

Tried it on FF11 and Webkit. Cross-browser is not of an issue.

Not working:
http://jsfiddle.net/8BVZB/

Somewhat working, but not what I want:
http://jsfiddle.net/d6bM6/

Answer by Starx

StarxStarx

The inner divs are float, so you need the clear the float.

A very easy way is to give overflow: hidden to the wrapping element. Demo

.divisionOutputArea {
  background-color: yellow;
  overflow: hidden;
}

However, a safe way is to give

<div style="clear: both;"></div>

at the end of wrapping element

Nabin Nepal (Starx) background css
March 8, 2012

Background image of a li under the background image of the ul

Question by Jarco

JarcoJarco

How can you do this in css?
I want the background image of the li’s to slide under the background image of the ul where they are in.
I tried to do it with z-index but it didn’t work.

li{
list-style:none;
background-image:url("2.png");
z-index:-10;
position:relative;
}
ul{
    background-image:url("1.png");
    background-repeat: no-repeat;
    z-index:100;
    position:relative;
}

Is this possible? And how is it done if it is.

update: Picture explaining what i mean
css menu picture

Answer by Starx

StarxStarx

I like the idea so much I just made it for you jarco. It seems it is not as exact as you want but, it is pretty similar.

Demo

A little div to show the bar, and script to bring it up and down

$("ul").mouseenter(function() {
    $("#bar").animate({
        height: $("ul").height()
    });
}).mouseleave( function() {
    $("#bar").animate({
        height: 20
    });
});

Update with the heights

...

Please fill the form - I will response as fast as I can!