The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS 2 column with 2 differents fullscreen background?

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #248023


    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 :

    I am using wordpress ( divi theme).

    Thank you for you help.


    Looks OK to me. What’s your question?


    Thank you for your reply.

    I have created a copy of what I have now :

    1. What I want :
      when you go to column CAT, the background image “CAT” fill the whole page…same for The DOG.
    2. “blablabla” and the button “DISCOVER” should not be displayed. Only when you hover IT.

    Result – exemple : http://

    Thank you for you help.


    Here’s the beginning of an idea:



    Thank you so much Shikkediel for your help, it works !
    Look at here :

    just one thing, How do I resize the fullscreen images please ?

    Thank you thank you thank you!!!


    Glad to help. Maybe you could explain what the issue is? Getting background images correct for all screen size ratios is usually troublesome. Using cover is as easy and close as it gets. But from what I suspect might be the trouble, background-position could possibly help – to center the fullscreen images:

    .et_pb_row.et_pb_row_0.et_pb_equal_columns.et_pb_gutters1.et_pb_row_fullwidth {
      background-position: 50% 50%;

    That’s a horrible selector by the way (corresponding with .parent() in the script) but I thought I’d be as specific as possible with it.


    I have an idea that it could also be done with CSS alone by the way. But it’s just so very convenient with jQuery. And a bit of script won’t hurt the page.


    hello, may be you could help me? i m coming back for a question and you helped me once.
    here is my question:
    I’d like to have a transition effect between the white color background and the pink background of this page
    The color must smoothly fade when you scroll the page
    a bit like this exemple:

    Please I am using wordpress and i only know how to use CSS code. If it is Jquery please let me know where I should put the code, I am using DIVI theme.

    Thanks a lot!


    I am not familiar with the Divi them (or WP) so I couldn’t tell you how to add a custom script…

    But this ought to work, as far as I can tell:

    Edit – see next post.


    Code apparently gets messed up when I insert it.

    Pasted into a pen

    This is the only CSS you’d need to add:

    #layer {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      background: rgba(204,28,107,0.91);
      opacity: 0;
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.