This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Image Bleed out – PageBuilder and might be Visual Editor

11 years ago · Last reply by Andrew Misplon 11 years ago

hello,
on my homepage i want to achieve a style similar to the image i attach here ( i added some watermarks, cause those ICONS i purchase and dont want someone use them):

http://s17.postimg.org/qjni5lc5b/All_Badges.jpg

im using Vantage theme, with pagebuilder for my red and beige background i put each one in a different layer.
i want the my transparent image of the badges will bleed out from the red BG to the beige BG is it possible? of course doing it to affect only at this particular place (not effect the entire website) .

as well, i can i remove the image FRAME, the thin outline of images, again only for this image.
thanks so much!!
Eran

URL: http://www.972kravmaga.com/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Andrew Misplon Staff 11 years, 2 months ago

    Hi do0rway

    To create the effect you want you’ll need to create a background image, it must be as high as you require but can be 1px wide. Add it to the Media Library, copy the url from the right column metabox and add it via the Row Style button background image field. That’s the second button on the right of that Page Builder row. Then insert the below under Appearance > Custom CSS to ensure the image repeats:

    /* Home */
    
    .home .panel-row-style {
    background-repeat: repeat-x !important;
    }
    

    To remove the image outline and shadow head to Appearance > Customize > Page and un-check the Image Shadow and Border checkbox there. That’ll be sitewide. To remove the border only for this page you’d need to insert the following under Appearance > Custom CSS:

    /* Vantage Remove Image Shadow and Rounding */
    
    .home .entry-content img { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important }
    
  2. do0rway 11 years, 2 months ago

    works like charm!!!
    i just added the next code to your first one you provide, to position the BG to TOP:

    background-position: top; 

    thank u so much for your help!

  3. Andrew Misplon Staff 11 years, 2 months ago

    Super, glad to hear you made progress there.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread