CSS: How to bring background image to the front?


Tags: css

Problem :

I was already looking at CSS: How to make background-image above background-color in a list and tried the !important attribute but without success.

I have this example page where I would like to bring the yellow book cover which I use as a background image in front of the navigation bar below.

enter image description here

The code I am using is the following:

.home-link {
  background: url(http://www.mensch-jinn-dajjal.net/wp-content/uploads/2013/12/Buchtitel.gif) no-repeat !important;
  background-size: 180px 200px !important;
  background-position: 400px 80px !important;
  z-index: 99999 !important;
}

Any idea why it is not coming to the front?

I also tried to assign the navbar a negative z-index without success.



Solution :

z-index won't work in this case; z-index is meant for those elements which are stacked one over another i.e. they have overlapping top and left, which is not in your case. Html is working the way it should i.e. flow layout,

this is your markup outhere on your site :

<header id="masthead" class="site-header" role="banner">
     <a class="home-link" href="...</a> <-- Link containing the image-->
     <div id="navbar" class="navbar"> <!-- navigation bar -->
    </div><!-- #navbar -->
</header>

clearly, your anchor and navigation bar are placed one after another, they are rendered exactly like that.

So, if you want to overlap your image, you need to make your image position:absolute. I would recommend, create a independent img tag and make it position absolute and place it exactly where you want, with relative top and left, so that it adjusts itself according to the resolution.

see this simple illustration of z-index :jfiddle

in this, we have four float:left, position:absolute divisions, by-default, when no z-index is given to any of them, the one that was present in the last in the flow, was the visible color, but as you give higher z-index to anyone of them(first one in example), it becomes the visible color


    CSS Howto..

    How to select col id using jquery to hide via css

    How can I use the HTML data attribute in CSS as a property? [duplicate]

    How can I prevent a form-control from taking a new line in Bootstrap

    Unable to show progress bar

    How to properly position a Bootstrap carousel-caption?

    How to make ComboBox caption bold in Vaadin?

    How to style menu in CSS to look like a button

    How to avoid wrapping in CSS float

    How do you change the appearance of a button in javascript?

    How to stop one layer going over another

    How to animate an icon for with CSS?

    how to custmize font awasome icons using cheat sheet in css?

    How do I validate day and month?

    How to make rotating shape look thick?

    How to change default theme color teal to blue without using custom CSS in materilaize

    How to apply background color to buttons using css in asp.net?

    How to align two text boxes on same line with CSS

    How can I define styles for individual cells in a SharePoint 2007 topnav?

    How to have a different “placeholder style” and at the same time a different “text-input style” in Rails with CSS?

    how to use jquery closest function

    How do I change linked stylesheets?

    css hover image and show icon not show

    How to display just part of image on hover?

    How can align these elements?CSS

    How does a document reference an SCSS file?

    How can I make an svg scale with its parent container?

    CSS: how to “plot” invisible text over an image?

    How to implement a drag and swap effect in CSS and JS [closed]

    How to link external CSS stylesheets on a Chromebook

    How to use Custom Fonts using CSS?