Question posted in
The full documentation can be found here.

Divi theme – Using CSS stop an image before it covers all modules

I am using the divi wordpress theme and I am trying to have a background image for just the center 4 columns in a row

enter image description here

So original it was covering all of the modules but using the background-position property I was able to move it over so it starts at the first module, Now I need to do the same thing with the other side making the image stop at the 4th module instead of continuing

I tried scaling the image down and I have also looked up various searches for “cut image off CSS”, “Change end point of background image CSS” , and a few others with no luck

The code I currently use that creates the image above is 

    background-image: url('https://technologyforthefuture.org/wp-content/uploads/2019/02/founder-statement-bg.jpg');
    background-position: 300px;

What I want it summary is(looking at the image above) how I set the image to begin at the 2nd module I want to in turn make the image end after the 5th module(which is where it says “Next Event”)

Tags:

2

Answers


  1. 0

    It looks like you are looking for clip-path or background-clip.

    Login or Signup to reply.
  2. 0

    You could add custom backgrounds to the first and last columns which would cover up the background image of the row.
    1. Set the row to fullwidth, gutters 0.
    2. Equalize column heights.
    3. Set background image of the row to the image you want to span multiple columns.
    4. Set the first and last columns backgrounds to something else (whatever it is that you wanted).

    OR depending on what it is that you are hoping to achieve with this row, you could simply set a custom width for this row (making it smaller) instead of using the first and last columns as spacers. Then set the column configuration to be 4 wide instead of 6.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search