No announcement yet.

Maniplulate the header image

  • Filter
  • Time
  • Show
Clear All
new posts

  • Maniplulate the header image

    Hey all,

    I'm a new comer to Genesis and Dynamik, so still trying to get my head around it all.

    I'm trying to manipulate my header image so that it sits below the site header a little offset - similar to this

    I've tried adding margins the the .header-image element, but can't get it to work. Can anyone point me in the right direction?



  • #2
    Seeing you posted this in the Skin Section - which skin are you using? And can you give us a URL to look at, please? This is a CSS problem, and usually it´s hard to solve them only from pics, without being able to inspect the code.


    • #3
      Hi SIGa,

      Thanks for the fast response.

      I was using InspirePress, but have now reverted back to the standard DWB.

      I'm working on a local dev machine at the moment.

      I think that to achieve this, I'll need to insert the logo into the div rather than use a background image as I think that will give me the control over it that I need as I think I'll need to set the z-index of the div or the image so that it sits on top.




      • #4

        So, I'm working on the CSS something like this
        .header-image .site-header .wrap .title-area {
            background: none;
            margin: 0px 0 0px 0px;
            float: left;
            height: 88px;
            width: 187px;
            margin-top: 18px;
            position: absolute;


        • SiGa
          SiGa commented
          Editing a comment
          position:absolute and/or z-index is not enough. You need to identify parent elements (in this case, all parent elements up to .site-header, I´d say) and make sure they all do have position:relative to make the overlapping possible, else it will always just be cut off. But really - can´t tell you more when I can´t inspect your CSS, sorry. Yes, that´s the downside of working locally.