1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

how do I apply this layout?

Discussion in 'HTML & Website Design' started by dscurlock, Aug 21, 2017.

  1. #1
    dscurlock, Aug 21, 2017 IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,037
    Likes Received:
    1,149
    Best Answers:
    22
    Trophy Points:
    400
    #2
    One way would be adding a large image as a background. Add it to your existing body css (change /images/your_image.jpg to your own):

    
    body {
    top: 0;
    left: 0;
    right: 0;
    background: url(/images/your_image.jpg) no-repeat;
    background-attachment: fixed;
    z-index: -100;
    background-size: 100%;
    }
    
    Code (markup):
    By the way, the bg image will be responsive. The top: 0; left: 0; right: 0; may not be needed, it will depend on what else is in your body css. I have no idea how they make it move on hover like it's in your example above. But if you do not want it as a background then google text over image css there are many examples out there.

    Since it's a background image everything else will show over it:

    https://jsfiddle.net/4dvm9oz6/

    _
     
    qwikad.com, Aug 21, 2017 IP
    dscurlock likes this.
  3. dscurlock

    dscurlock Prominent Member

    Messages:
    4,566
    Likes Received:
    260
    Best Answers:
    0
    Trophy Points:
    300
    #3
    I need it to show over videos, but I see where you are coming from...
    in either case, will have to hire a coder to apply the needed css....
     
    dscurlock, Aug 21, 2017 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,037
    Likes Received:
    1,149
    Best Answers:
    22
    Trophy Points:
    400
    #4
    Your first post says image/video. If you want to show it over an HTML5 video it's a bit more complicated. I just googled and found this example:

    https://codepen.io/dudleystorey/pen/knqyK

    _
     
    qwikad.com, Aug 21, 2017 IP
    dscurlock likes this.
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,037
    Likes Received:
    1,149
    Best Answers:
    22
    Trophy Points:
    400
    #5
    qwikad.com, Aug 21, 2017 IP
  6. dscurlock

    dscurlock Prominent Member

    Messages:
    4,566
    Likes Received:
    260
    Best Answers:
    0
    Trophy Points:
    300
    #6
    yep, much better, dont think coder will have a problem if he knows his stuff..

    Thanks
     
    dscurlock, Aug 21, 2017 IP