[FIXED] How can i bring a before pseudo element in front of a Background but behind of an other background?

Issue

I use mutiple Background. I use a before Element in the back of an multibackground with Css3 code and a background-image. and i have also an other Background called (apc-container)behind this Background.

My problem is that the before Element is also behind the #acp-container. in the pseudo element before i use the z-index. i try to use this also in the #acp-container but it does not work.

So how i bring the before pseudo Element in front of the #apc-container and in the back of the #subfilter a BG?

you can check it out with this code and you see the problem easy.

#streams-container,
#acp-container {
  border-radius: 10px;
  background-color: #f8f8f8;
  min-height: 500px;
}
.subfilter {
  margin-top: 160px;
}
.subfilter a {
  margin-right: 130px;
  margin-left: 130px;
  width: 145px;
  height: 145px;
  display: inline-block;
  position: relative;
  line-height: 145px;
  background-size: auto auto, auto auto;
  background-color: #eaeaea;
  background-image: url(images/Eye.png), -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eaeaea));
  background-image: url(images/Eye.png), -webkit-linear-gradient(top, #f6f6f6, #eaeaea);
  background-image: url(images/Eye.png), -moz-linear-gradient(top, #f6f6f6, #eaeaea);
  background-image: url(images/Eye.png), -ms-linear-gradient(top, #f6f6f6, #eaeaea);
  background-image: url(images/Eye.png), -o-linear-gradient(top, #f6f6f6, #eaeaea);
  background-image: url(images/Eye.png), linear-gradient(top, #f6f6f6, #eaeaea);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
}
.subfilter a.finiwatch {
  background-position: 0px -172px, 0 0;
}
.subfilter a:active {
  top: 1px;
}
.subfilter a::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  background-color: #eaeaea;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  opacity: 0.5;
}
.subfilter a:active::before {
  top: -9px;
}
.subfilter a:hover::before {
  opacity: 1;
}
.subfilter a.finiwatch:hover::before {
  background-color: #B3F390;
}
.subfilter a:hover {
  top: 0px, 1px;
}
.subfilter a.finiwatch:hover {
  background-position: -160px -158px, 0 0;
}
.subfilter a:active {
  background: url(images/Eye.png), -moz-linear-gradient(top, #eaeaea, #f6f6f6);
  background-image: url(images/Eye.png), -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#f6f6f6));
  background-image: url(images/Eye.png), -webkit-linear-gradient(top, #eaeaea, #f6f6f6);
  background-image: url(images/Eye.png), -moz-linear-gradient(top, #eaeaea, #f6f6f6);
  background-image: url(images/Eye.png), -ms-linear-gradient(top, #eaeaea, #f6f6f6);
  background-image: url(images/Eye.png), -o-linear-gradient(top, #eaeaea, #f6f6f6);
  background-image: url(images/Eye.png), linear-gradient(top, #eaeaea, #f6f6f6);
}
.subfilter a.finiwatch:active {
  background-position: -318px -158px, 0 0;
}
.subfilter a.finiwatch:selected {
  background-position: -318px -158px, 0 0;
}

<div id="streams-container">
  <div class="subfilter">
    <a class="finiwatch" href=""></a>
  </div>

Solution

Found a way

give apc-container a relative position and a z-index of 1 and teh before element a z-index of -10.

#streams-container,
#acp-container {
  border-radius: 10px;
  background-color: #f8f8f8;
  min-height: 500px;
  position: relative;
  z-index: 1;
}

.subfilter a::before {
  content: '';
  position: absolute;
  z-index: -10;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  background-color: #eaeaea;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  opacity: 0.5;
}

Answered By - user3480996

Answer Checked By - David Goodson (PHPFixing Volunteer)

Read More

[FIXED] how to remove the background image using jquery with class name

Issue

I'm trying to remove the background image using jquery.But its not happening, But using the same format i can change the background color

<html>
<head>
<style>
h1 
{
background-image:url('paper.gif');
background-color:#cccccc;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

     $("h1").each(function( index ) {
    $("."+$(this).attr("class")).css('background-image' , 'none');

    });

});
</script>
</head>


<h1 class="RED">This is a heading</h1>
<h1 class="YELLOW">This is a heading</h1>
<h1 class="RED">This is a heading</h1>
</html>

Solution

<script>
$(document).ready(function(){



     $("h1").each(function( index ) {
     $("."+$(this).attr("class")).css({"background":"none"});



    });

});
</script>

Answered By - Shanmugam

Answer Checked By - Robin (PHPFixing Admin)

Read More

[FIXED] How can I force browsers to print background images in CSS?

Issue

This question was asked before but the solution is not applicable in my case. I want to make sure certain background images are printed because they are integral to the page. (They are not images directly in the page because there are several of them being used as CSS sprites.)

Another solution on that same question suggests using list-style-image, which only works if you have a different image for every icon, no CSS sprites possible.

Aside from creating a separate page with the icons inline, is there another solution?

Solution

You have very little control over a browser's printing methods. At most you can SUGGEST, but if the browser's print settings have "don't print background images", there's nothing you can do without rewriting your page to turn the background images into floating "foreground" images that happen to be behind other content.

Answered By - Marc B

Answer Checked By - Cary Denson (PHPFixing Admin)

Read More

[FIXED] How to completely remove borders from HTML table

Issue

My goal is to make an HTML page that is similar to a "photo frame". In other words, I want to make a blank page that is surrounded by 4 pictures.

This is my code:

<table>
    <tr>
        <td class="bTop" colspan="3">
        </td>
    </tr>
    <tr>
        <td class="bLeft">
        </td>
        <td class="middle">
        </td>
        <td class="bRight">
        </td>
    </tr>
    <tr>
        <td class="bBottom" colspan="3">
        </td>
    </tr>                                                    
</table>

And the CSS classes are the following:

.bTop
{
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackLeft.jpg');    

}

.middle
{
    width: 536px;
    height: 280px;
}

.bRight
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackRight.jpg');    
}

.bBottom
{        
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackBottom.jpg');       
}

My problem is that I am getting thin white lines between the cells of the table, I mean that the border of pictures is not continuous. How can I avoid these white spaces?

Solution

<table cellspacing="0" cellpadding="0">

And in css:

table {border: none;}

EDIT: As iGEL noted, this solution is officially deprecated (still works though), so if you are starting from scratch, you should go with the jnpcl's border-collapse solution.

I actually quite dislike this change so far (don't work with tables that often). It makes some tasks bit more complicated. E.g. when you want to include two different borders in same place (visually), while one being TOP for one row, and second being BOTTOM for other row. They will collapse (= only one of them will be shown). Then you have to study how is border's "priority" calculated and what border styles are "stronger" (double vs. solid etc.).

I did like this:

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

Now, with border collapse, this won't work as there is always one border removed. I have to do it in some other way (there are more solutions ofc). One possibility is using CSS3 with box-shadow:

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​

<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​
</style>

You could also use something like "groove|ridge|inset|outset" border style with just a single border. But for me, this is not optimal, because I can't control both colors.

Maybe there is some simple and nice solution for collapsing borders, but I haven't seen it yet and I honestly haven't spent much time on it. Maybe someone here will be able to show me/us ;)

Answered By - Damb

Answer Checked By - Clifford M. (PHPFixing Volunteer)

Read More

[FIXED] How to make a text disapper under an image, after scrolling it up?

Issue

Is it possible to gradually hide the text from the website, after scrolling it up, under an image? Only by using HTML and CSS?

This is my body example:

<img src="./image.gif">
<p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p>

Solution

img{
  position:fixed;
  top:0;
  left:0;
}
/* or like this */
#grad{
  position:fixed;
  left:300px;
  top:0px;
  height:150px;
  width:300px;
  z-index:10;
  background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

body{
margin-top:170px;
}

<img src="https://29comwzoq712ml5vj5gf479x-wpengine.netdna-ssl.com/wp-content/uploads/2020/01/default.svg">
<div id="grad"></div>

<p> some text to scroll up... some text to scroll up... some text to scroll up... some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p>

Answered By - Rmaxx

Answer Checked By - Mary Flores (PHPFixing Volunteer)

Read More

[FIXED] How can I force an image to display in its entirety with CSS?

Issue

I have a small icon (17 X 17) that links to a page which I'm trying to display like so:

<a class="finaff-small-pdf-form-icon" href="/Financial_Affairs_Forms/Payee_Setup_204.pdf">Payee Setup 204</a>

The CSS class referenced is defined thus:

.finaff-small-pdf-form-icon {
    position: relative;
    line-height: 20px;
    padding-left: 20px;
    border: none;
    background-image: url("/_layouts/images/pdficon.gif");
    background-repeat: no-repeat;
}

The icon:

../gets truncated at the bottom, though:

I tried the following with background-size in the CSS class:

background-size: 100% 100%;
background-size: 80px 60px;
background-size: contain;

...but none of them made any difference.

How can I get the icon to show all of itself, even its feet?

Solution

The code you have provided works fine. I have created a fiddle using your existing styling and HTML:

JSFiddle

HTML

<a class="finaff-small-pdf-form-icon" href="/Financial_Affairs_Forms/Payee_Setup_204.pdf">Payee Setup 204</a>

CSS

.finaff-small-pdf-form-icon {
    position: relative;
    line-height: 20px;
    padding-left: 20px;
    border: none;
    background-image: url("http://i.stack.imgur.com/vIXOF.gif");
    background-repeat: no-repeat;
}

I presume your issue is coming from parent styles that are being applied to containing elements on your page. You should look at the browser's developer console for more clarification on what is causing that styling issue (F12)

Answered By - leigero

Answer Checked By - Senaida (PHPFixing Volunteer)

Read More

[FIXED] How to display a portion of an image with CSS?

Issue

I have an image to be used as a banner that is 1400x350 and I would like do display maybe 80% of it's height. I'm not looking to scale the image, I need to display only a portion of it. Imagine a picture of car and I want to display from the just above the tires up.

Everything I've found shows how to scale or resize the image but that still shows 100% of the original image. I'm only looking to display a portion of the original image. I can manually crop the image in an image editor but I'm hoping to be able to do this with CSS.

I'm using this as background in an div at the moment.

div.banner {
    content: url('../Images/banner.jpg');
    background-color: #A5B7C7;
}​

<div class="banner"></div>

Solution

This can simply be achieved by setting background-position: center bottom;. If your container is now smaller than your background image, it just gets hidden on the top because it's aligned to the bottom.

In this example the background images height is 400px, but the containers height is only 300px:

.banner {
  background: url('https://place-hold.it/300x400');
  background-position: center bottom;
  height: 300px;
  width: 300px;
}

<div class="banner"></div>

Answered By - andreas

Answer Checked By - Gilberto Lyons (PHPFixing Admin)

Read More

[FIXED] How can i have a cover background-image without any deformation?

Issue

(Sorry if my english isn't that good) I have a problem with my code, i'm trying to create a background-image fullsize screen but my image just distords itself in height or in lenght when it doesn't correspond to the size image. What I want to do is cropping it instead of deformint it... My code :

HTML

<div class="container-fluid px-0">
    <main>
        <!-- Accueil -->
        <section>
            <div class="container justify-content-start">
                <img class="img-fluid" src="ressources/images/picto_appareil_photo.jpg" alt="" title="" width="200" height="200">
                <h2>Matheo TUMBARELLO</h2>
                <h1>Etudiant BUT informatique<br><br>Aspire à devenir développeur web & mobile fullstack</h1>
            </div>
        </section>
        
        <!-- Formations -->
        <section class=""> 

        </section>
        <div class="transition"></div>

        <!-- Compétences -->
        <section class=""> 

        </section>
        <div class="transition"></div>

        <!-- Portfolio -->
        <section class=""> 

        </section>
        <div class="transition"></div>

        <!-- Experiences -->
        <section class=""> 

        </section>
        <div class="transition"></div>

        <!-- Contact -->
        <section class=""> 
            <form>

            </form>
        </section>
    </main>
</div>

CSS

@keyframes zoomloop {
    0% {
      background-size: 100% 100%;
    }
    100% {
      background-size: 105% 105%;
    }
  }
section:first-child{
    height: 100vh;
    background: url("ressources/images/background_laptop.jpg") top right;
    background-position: cover;
    animation: zoomloop 5s infinite alternate;
}

image

Solution

The main error here is that cover is a value for background-size and not background-position

This should fix it:

background: url("ressources/images/background_laptop.jpg"); /*Remove initial top right instruction*/
background-size: cover;
background-position: 50% 50%;

If you want your image to keep ratio while making the zoom effect, you need the auto property. Depending on the image ratio, the zoom would apply either on the height, or width of your image

.image {
    background-size: 100% auto;
}
.image:hover {
    background-size: 105% auto;
}

Answered By - savageGoat

Answer Checked By - Marilyn (PHPFixing Volunteer)

Read More