Solved

CSS - Elevate image over div area (z-index?)

Posted on 2015-01-12
9
287 Views
Last Modified: 2015-01-13
Hi I'm trying to render an image in my footer to look like this:

Need right image to sit above the footer div and into page's content.
I've tried setting different z-index values for the various divs and decreasing margin-top for the image with no success. Any help appreciated.

URL: http://7pwc.moshpitdigital.com/
0
Comment
Question by:doug s
  • 5
  • 3
9 Comments
 
LVL 9

Expert Comment

by:Trenton Knew
ID: 40545566
I wonder if your problem is that you placed the image inside the div that contains the footer.  You should try positioning placing it so that it's not inside the footer container.  Trying to see if I can get more time to play with it myself, but about to leave the office.
0
 
LVL 3

Expert Comment

by:Morgan Finley
ID: 40545691
Trenton is right that you would avoid a lot of headaches if you put it outside of the footer div, but I'd like to find a way to do it without reorganizing your HTML. I'll take a closer look after work.
0
 
LVL 3

Expert Comment

by:Morgan Finley
ID: 40545697
I'm assuming you want the footer to be full width, correct?
0
 
LVL 4

Author Comment

by:doug s
ID: 40545701
Thanks everyone. Yes that's my next issue I'm having trouble figuring out -  how to make my footer and menu full browser width while keeping the page content boxed at 1200px wide.
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 3

Expert Comment

by:Morgan Finley
ID: 40545717
I'll consider that in my answer. I can see right off the bat that you need to set the max-width on divs inside of the wrapper, instead of the other way around.

If you inspect the #wrapper div and turn off the max-width property you will see that everything (except pieces of the header and menu) gets 100% width. You would then set the internal divs like #main to have the max-width and give it a margin: 0 auto; to center it.
0
 
LVL 3

Accepted Solution

by:
Morgan Finley earned 500 total points
ID: 40545936
To start, I've got the page full width with the following code:

#wrapper {
  max-width: none !important;
  width: 100%;
}
.header-wrapper {
  width: 100%;
}
#header {
  padding-left: 0;
  padding-right: 0;
  /* Background image needs to extend to where the edge converges with the nav */
  background: transparent url(http://7pwc.moshpitdigital.com/wp-content/uploads/2015/01/header-bg-3.jpg) top center no-repeat;
}
.header-v5 #small-nav {
  padding: 0 0;
}
#small-nav .avada-row {
  /* max-width: 1100px; */
  max-width: none;
}

Open in new window


It's not quite there yet, but that at least formats your header and wrapper to be full width, and your footer inherits the full width too. However, I couldn't get your tile pattern to show through the header background. Try applying the background image to different containers, or perhaps a container in the header is displaying with a white background and inheriting some padding/margin.

I left a note about the header background image in there for you too. Working on the position of the Doc's image now. Would you like it positioned to the absolute bottom of the window, or limit it to a maximum width?
0
 
LVL 4

Author Comment

by:doug s
ID: 40545953
Thanks a ton Morgan, can't thank you enough!! For now I think positioned absolute to the bottom is what my designer is looking for.
0
 
LVL 3

Expert Comment

by:Morgan Finley
ID: 40545965
Thanks Doug! However, I feel I must answer the original question, so here goes:

.footer-area {
  padding-top: 0;
  padding-bottom: 0;
  overflow: visible;
}
.footer-4 > img {
  position: absolute;
  bottom: -200px;
  right: 0;
  z-index: 9999;
}

Open in new window


You might have to adjust some of the numbers, but I've got it working with the stylish plugin.


Cheers from Pismo Beach!
0
 
LVL 4

Author Comment

by:doug s
ID: 40547105
Yessss!! Stoked Morgan thanks again, see you around hopefully!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now