Results 1 to 10 of 10

Thread: 2 column with 2 fullscreen background CSS ONLY

  1. #1
    Join Date
    Nov 2016
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default 2 column with 2 fullscreen background CSS ONLY

    Hello,

    It has been 4 hours since i am trying to have 2 fullscreen column on my homepage, where each column has a background image and when you hover it ( the column) its background image covers all the page. With CSS only. Here is an exemple : http://bartabas.fr/

    I am using wordpress ( divi theme).

    Thank you for you help.

  2. #2
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    432
    Thanks
    0
    Thanked 54 Times in 50 Posts

    Default

    Nice example, but we need a link to the page you have worked on for four hours before we can help.

  3. #3
    Join Date
    Nov 2016
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hello styxlawyer, thanks! My website is under construction, if i give you the page you will reach the underconstruction page unfortunatly.
    I have two column on my page, like in the exemple, static ( not moving yet, when you hover it), but this is not the most important.
    also, i have 2 background images: Left Half and Right Half. I can put a 100%background image over the 2 columns if necessary.

  4. #4
    Join Date
    Nov 2016
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by styxlawyer View Post
    Nice example, but we need a link to the page you have worked on for four hours before we can help.
    I have created a copy of what I have now : http://petsafety.info/ so that I can show you.

    What I want :
    when you go to column CAT, the background image “CAT” fill the whole page…same for The DOG.

    “blablabla” and the button “DISCOVER” should not be displayed. Only when you hover IT.

    Result – exemple : http://http://bartabas.fr/

    Thank you for you help.

  5. #5
    Join Date
    Nov 2016
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by styxlawyer View Post
    Nice example, but we need a link to the page you have worked on for four hours before we can help.
    I have created a copy of what I have now : http://petsafety.info/ so that I can show you.

    What I want :
    when you go to column CAT, the background image “CAT” fill the whole page…same for The DOG.

    “blablabla” and the button “DISCOVER” should not be displayed. Only when you hover IT.

    Result – exemple : http://http://bartabas.fr/

    Thank you for you help.

  6. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,094
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there angelium,

    and a warm welcome to these forums.

    Here is a possible solution - ( not tested to destruction )...

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    html,body {
        height: 100%;
        margin: 0;
     }
    
    #container {
        position: relative;
        display: flex;
        z-index: 2;
        min-height: 100%;
     }
    
    #cnt-left,#cnt-right { 
        width: 50%;
        padding: 6em 2em 2em;
        box-sizing: border-box;
        color: #fff;
        text-align: center;
        text-shadow: 0 0  0.07em #000, 0 0  0.15em #000; 
     }
    
    #cnt-left p,#cnt-right p {
        display: none;
     }
    
    #cnt-left:hover p, #cnt-left:active p,
    #cnt-right:hover p, #cnt-right:active p {
        display: block;
     }
    
    #cnt-left a, #cnt-right a {
        display: none;
        width: 10.5em;
        line-height: 4em;
        border: 0.06em solid #fff;
        border-radius: 0.5em;
        margin: 2em auto 0; 
        background-color: rgba(0,0,0,0.1);
        box-shadow: inset 0 0 1.5em #fff;
        color: #fff;
        text-decoration: none;
     }
    
    #cnt-left:hover a, #cnt-left:active a,
    #cnt-right:hover a, #cnt-right:active a {
        display: block;
     }
    
    #cnt-left a::after, #cnt-right a::after {
        content: '\003e';
        margin-left: -0.5em;
        opacity: 0; 
        transition: all 0.25s ease-in-out;
     }
    
    #cnt-left a:hover::after, #cnt-left a:active::after, 
    #cnt-right a:hover::after, #cnt-right a:active::after {
        margin-left: 0.5em;
        opacity: 1; 
     }
    
    #bg-img {
        position: absolute;
        width: 100%;
        min-height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
        background-image: url(http://petsafety.info/wp-content/uploads/2016/11/CAT.jpg),
                          url(http://petsafety.info/wp-content/uploads/2016/11/DOG.jpg);
        background-size: 50% 100%, 50% 100%;
        background-position: 0 0,100% 0;
        background-repeat: no-repeat,no-repeat;
    
     }
    #cnt-left:hover ~ #bg-img,
    #cnt-left:active ~ #bg-img {
        background-size: 100% 100%, 0 0;
     }
    
    #cnt-right:hover ~ #bg-img,
    #cnt-right:active ~ #bg-img {
        background-size: 0 0, 100% 100%;
     }
    
    @media screen and (max-width: 30em) {
    
    #container {
        display: block;
        height: 100%;
      }
    
    #cnt-left, #cnt-right { 
        width: 100%;
        min-height: 50%;
        padding: 1em;
      }
    
    #bg-img {
        background-size: 100% 50%, 100% 50%;
        background-position: 0 0,0 100%;
      }
     }
    </style>
    
    </head>
    <body> 
    
    <div id="container">
    
     <div id="cnt-left">
      <h2>CAT</h2>
       <p>
        Lorem ipsum dolor sit amet. 
       </p>
        <a href="#">miaou</a>
     </div>
    
     <div id="cnt-right">
      <h2>DOG</h2>
       <p>
        Lorem ipsum dolor sit amet. 
       </p>
        <a href="#">wouf</a>
     </div>
    
     <div id="bg-img"></div>
    
    </div>
    
    </body>
    </html>

    coothead
    Last edited by coothead; 11-20-2016 at 04:42 PM. Reason: minor code modifications
    ~ the original bald headed old fart ~

  7. The Following User Says Thank You to coothead For This Useful Post:

    angelium (11-21-2016)

  8. #7
    Join Date
    Nov 2016
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Talking

    Thank you so much coothead !!
    I've tried it and it works !

    Here's the result :
    http://petsafety.info/dog-page/

    Do you know how i can remove the white space on top of it please? (i can see a arrow" –> " in the screen on the top).

    I will adjust the position of the text ( center ) and it will be perfect.

    THANK YOU AGAIN YOU'RE THE BEST!

  9. #8
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,094
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there angelium,

    it appears that you C&P'd the entire code that I gave you into your document.

    You should have just C&P'd this...

    Code:
    
    <div id="container">
    
     <div id="cnt-left">
      <h2>CAT</h2>
       <p>
        Lorem ipsum dolor sit amet. 
       </p>
        <a href="#">miaou</a>
     </div>
    
     <div id="cnt-right">
      <h2>DOG</h2>
       <p>
        Lorem ipsum dolor sit amet. 
       </p>
        <a href="#">wouf</a>
     </div>
    
     <div id="bg-img"></div>
    
    </div>
    ...into that location.

    You should then have C&P'd this...

    Code:
    
    <style media="screen">
    html,body {
        height: 100%;
        margin: 0;
     }
    
    #container {
        position: relative;
        display: flex;
        z-index: 2;
        min-height: 100%;
     }
    
    #cnt-left,#cnt-right { 
        width: 50%;
        padding: 6em 2em 2em;
        box-sizing: border-box;
        color: #fff;
        text-align: center;
        text-shadow: 0 0  0.07em #000, 0 0  0.15em #000; 
     }
    
    #cnt-left p,#cnt-right p {
        display: none;
     }
    
    #cnt-left:hover p, #cnt-left:active p,
    #cnt-right:hover p, #cnt-right:active p {
        display: block;
     }
    
    #cnt-left a, #cnt-right a {
        display: none;
        width: 10.5em;
        line-height: 4em;
        border: 0.06em solid #fff;
        border-radius: 0.5em;
        margin: 2em auto 0; 
        background-color: rgba(0,0,0,0.1);
        box-shadow: inset 0 0 1.5em #fff;
        color: #fff;
        text-decoration: none;
     }
    
    #cnt-left:hover a, #cnt-left:active a,
    #cnt-right:hover a, #cnt-right:active a {
        display: block;
     }
    
    #cnt-left a::after, #cnt-right a::after {
        content: '\003e';
        margin-left: -0.5em;
        opacity: 0; 
        transition: all 0.25s ease-in-out;
     }
    
    #cnt-left a:hover::after, #cnt-left a:active::after, 
    #cnt-right a:hover::after, #cnt-right a:active::after {
        margin-left: 0.5em;
        opacity: 1; 
     }
    
    #bg-img {
        position: absolute;
        width: 100%;
        min-height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
        background-image: url(http://petsafety.info/wp-content/uploads/2016/11/CAT.jpg),
                          url(http://petsafety.info/wp-content/uploads/2016/11/DOG.jpg);
        background-size: 50% 100%, 50% 100%;
        background-position: 0 0,100% 0;
        background-repeat: no-repeat,no-repeat;
    
     }
    #cnt-left:hover ~ #bg-img,
    #cnt-left:active ~ #bg-img {
        background-size: 100% 100%, 0 0;
     }
    
    #cnt-right:hover ~ #bg-img,
    #cnt-right:active ~ #bg-img {
        background-size: 0 0, 100% 100%;
     }
    
    @media screen and (max-width: 30em) {
    
    #container {
        display: block;
        height: 100%;
      }
    
    #cnt-left, #cnt-right { 
        width: 100%;
        min-height: 50%;
        padding: 1em;
      }
    
    #bg-img {
        background-size: 100% 50%, 100% 50%;
        background-position: 0 0,0 100%;
      }
     }
    </style>
    
    ...into the head section of the document.

    I hope that this helps.

    coothead
    ~ the original bald headed old fart ~

  10. #9
    Join Date
    Nov 2016
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Oups sorry, my bad.

    IT works now

    HUUUGE ThanK YOU

  11. #10
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,094
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default


    No problem, you're very welcome.

    coothead
    ~ the original bald headed old fart ~

Similar Threads

  1. Replies: 5
    Last Post: 01-14-2015, 10:26 AM
  2. Replies: 14
    Last Post: 08-15-2012, 07:44 PM
  3. Gradient Image as a Faux Column background
    By codeexploiter in forum CSS
    Replies: 0
    Last Post: 12-28-2009, 06:30 AM
  4. Column Background Problem
    By chrisfromboji in forum CSS
    Replies: 1
    Last Post: 05-18-2008, 04:03 AM
  5. Replies: 1
    Last Post: 02-15-2008, 04:34 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •