Solved

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

Posted on 2015-01-12
9
308 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
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

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

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

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

Suggested Solutions

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

749 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