2 column with 2 fullscreen background CSS ONLY

**angelium** · 11-19-2016, 12:08 PM

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.

**styxlawyer** · 11-19-2016, 12:15 PM

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

**angelium** · 11-19-2016, 12:37 PM

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.

**angelium** · 11-20-2016, 12:04 AM

Originally Posted by styxlawyer

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.

**angelium** · 11-20-2016, 12:09 AM

Originally Posted by styxlawyer

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.

**coothead** · 11-20-2016, 03:05 AM

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

**angelium** · 11-21-2016, 10:48 AM

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!

**coothead** · 11-21-2016, 11:27 AM

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

**angelium** · 11-21-2016, 12:28 PM

Oups sorry, my bad.

IT works now

HUUUGE ThanK YOU

**coothead** · 11-21-2016, 02:16 PM

No problem, you're very welcome.

coothead

Thread: 2 column with 2 fullscreen background CSS ONLY

Thread Tools

Search Thread

2 column with 2 fullscreen background CSS ONLY

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

Similar Threads

Responsive Fullscreen Background Image - Please Help

fullscreen background with changeable links (need help with a fade effect)

Gradient Image as a Faux Column background

Column Background Problem

How to? Fluid layout with background on right column?

Bookmarks

Bookmarks

Posting Permissions