vedi0boy vedi0boy - 1 month ago 5
CSS Question

Html/css: Put elements behind a repeating background

I am trying to find a way to put a nav bar behind some background images that repeat. Here it is:
enter image description here

Basically, I want to have a navigation bar behind the repeating plants image, but in front of the sun image. I am going to make the nav elements popup when they are hovered over. Here is my css for the header:

header {
height: 250px;
width: 100%;
background-image: url("top.png"), url("banner.png");
background-repeat: repeat-x, no-repeat;
background-size: auto 40px, cover;
background-position: bottom;
}

Answer

Part of the solution was to use z-index as Howzieky mentioned but did not provide an example for. Here is how I did it:

css:

header {
    height: 250px;
    width: 100%;
    position: relative;
}

#background-far {
    height: 250px;
    width: 100%;
    background-image: url("banner.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

#header-body {
    height: 250px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#background-close {
    height: 250px;
    width: 100%;
    background-image: url("top.png");
    background-repeat: repeat-x;
    background-size: auto 40px;
    background-position: bottom;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

html:

<header>
    <div id="background-far"></div>
    <div id="header-body">
        <img src="logo.png"/>
    </div>
    <div id="background-close"></div>
</header>

I also needed split the header into 3 sections (background-far, header-body and background-close). Header body will store everything I will have in the header such as my nav bar. The important part was to make the header use position: relative and each section to use position: absolute; top: 0; left: 0;

Thanks for all your help everyone!

Comments