Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2015-01-12
9
Medium Priority
?
355 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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
 
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 2000 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

972 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