Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2015-01-12
9
Medium Priority
?
341 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn how to count occurrences of each item in an array.
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.

721 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