Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #181232

    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.

    #181239

    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

    #181268
    This reply has been marked as private.
    #181274

    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?

    #181372

    Hi!

    Use this for the logo:

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

    Best regards,
    Josue

    #181836

    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 1 year, 1 month ago by  musklick.
    #182355

    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

    #182700

    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

    #182750

    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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.