Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 27, 2013 at 5:53 pm #181232
    musklick

    Hi, I’m trying to create an effect where an image of a bottle, placed to left side starts in the header, covers a portion of the main content and ends in the footer. So the effect is that the bottle “pops” out of the web page. The main content should contain a layer slider and the footer should have widgets as usual. Is this possible? The height can be static. When I place the bottle in the background it breaks on smaller screens. Could you put it as a transparent image on top of everything? Or use different CSS for different viewports.
    I can provide an image of the desired effect if that would help. Really hope you can help with this, I’m getting close to dead line and can’t get it to work. And my client really want this effect.

    October 27, 2013 at 6:57 pm #181239
    Josue

    Hey musklick!

    You can add the img in the header.php, after the body starts:

    <img src="your_img" class="bottle" ?>`

    Then apply this CSS:

    .bottle{
width: 350px;
height: 650px;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
}

    Try it out and see if it works, if it doesn’t provide us with a link to your website and the image of the bottle you want to use.

    Best regards,
    Josue

    October 27, 2013 at 8:23 pm #181268
    musklick
    This reply has been marked as private.
    October 27, 2013 at 10:30 pm #181274
    musklick

    Hi again, I’ve experimented with having the bottle in a fixed position, which I think works and a smaller sized bottle for the mobile screen. Getting there. However the logo doesn’t quite work, it needs to be centered, can I use “display: block” with margins set to auto to have the logo centered? But when I try that the logo gets centered but also pushes the menu below and breaks the page hat way. Or is there a smarter way?

    October 28, 2013 at 4:13 am #181372
    Josue

    Hi!

    Use this for the logo:

    .bos-logo {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
}

    Best regards,
    Josue

    October 28, 2013 at 10:34 pm #181836
    musklick

    Hi Josue, thanks again for your input. This works well for centering the logo. Both the bottle and the logo scales well up and down when resizing the window, and I included a third and fourth CSS, for tablet and mobile portrait view in the custom CSS. Now my next problem is I only want the bottle on the start page, how do I do that?

    Thanks again for your help, hope you can sort this one out as well.
    /Michael

    • This reply was modified 10 years, 5 months ago by musklick.
    October 30, 2013 at 8:52 am #182355
    Dude

    Hi!

    You can use the .home class. I.e. instead of

    
.bottle{
width: 350px;
height: 650px;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
}

    use

    
.home .bottle{
width: 350px;
height: 650px;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
}

    and the bottle will only be displayed on the front page.

    Best regards,
    Peter

    October 31, 2013 at 12:37 am #182700
    musklick

    Hi Peter, thanks for your reply. It works, but since the image is added in header.php the image appears in all the rest of the pages, just without the css class. I tried adding a display: none to an extra class without .home in front but then the bottle disappeared everywhere. I’m missing something here. Hope you can help. This is what I tried:

    .home .bottle{
    width: 153px;
    height: 737px;
    position: absolute;
    left: 75px;
    top: 54px;
    z-index: 1000;
    }
    .bottle{
    display: none;
    width: 153px;
    height: 737px;
    position: absolute;
    left: 75px;
    top: 54px;
    z-index: 1000;
    }

    Best regards
    /Michael

    October 31, 2013 at 2:35 am #182750
    Ismael

    Hey!

    Please try this:

    .bottle{
display: none;
width: 153px;
height: 737px;
position: absolute;
left: 75px;
top: 54px;
z-index: 1000;
}

.home .bottle{
display: block !important;
width: 153px;
height: 737px;
position: absolute;
left: 75px;
top: 54px;
z-index: 1000;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Image spanning from header to footer’ is closed to new replies.