Solved

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

Posted on 2015-01-12
9
279 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
Comment Utility
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 4

Expert Comment

by:Morgan Finley
Comment Utility
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 4

Expert Comment

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

Author Comment

by:doug s
Comment Utility
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 4

Expert Comment

by:Morgan Finley
Comment Utility
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 4

Accepted Solution

by:
Morgan Finley earned 500 total points
Comment Utility
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
Comment Utility
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 4

Expert Comment

by:Morgan Finley
Comment Utility
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
Comment Utility
Yessss!! Stoked Morgan thanks again, see you around hopefully!
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

771 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

12 Experts available now in Live!

Get 1:1 Help Now