WordPress.org

Ready to get started?Download WordPress

Forums

Stretching images to edge of container (3 posts)

  1. Paul
    Member
    Posted 6 months ago #

    Hi,

    My site is built with a child theme of Superhero, and I'm trying to use some images as dividers between sections on my page, much like in this site. As you can see the thin images leave no space at the edge of the container, giving the impression of dividing the main container into segments - this is the effect I want to achieve, but don't know how.

    I could remove all padding from the container (and the subsequent images) but this will affect the design of the site drastically. If anyone has a cleaner way around this I'd love to know!

    Thanks in advance.

  2. batharoy
    Member
    Posted 6 months ago #

    They are using Before & After pseudo elements with a top & bottom border respectively. They are also adding a top & bottom border to the element itself.

    <h1>We are your doers</h1>

    h1:before {
    content: '';
    position: absolute;
    top: 9px;
    border-top: 1px solid #412b1d;
    }

    h1:after {
    content: '';
    position: absolute;
    bottom: 9px;
    border-top: 1px solid #412b1d;
    }

    h1 {
    border-top: 2px solid #412b1d;
    border-bottom: 2px solid #412b1d;
    }

  3. Paul
    Member
    Posted 6 months ago #

    Thanks for getting back. I actually meant the images (the ones above each subheading) not the subheadings themselves. Sorry I wasn't clearer!

Reply

You must log in to post.

About this Topic