Background image frame for site

[Oleg]

Hello!

I use an addon Backgrounds. I want to use a background image as a frame. I hope you understand the design idea.

But how to add margins at the top and bottom of the content? Available settings do not allow this.

• This topic was modified 7 years, 8 months ago by Oleg.

[Tom]

Give this CSS a try:

.site-header {
    margin-top: 30px;
}

.site-footer {
    margin-bottom: 30px;
}

[Oleg]

No it’s not that. This adds a space from the edge. I need padding while scrolling. The second screenshot shows. That is, I want to make the content inside the image box.

• This reply was modified 7 years, 8 months ago by Oleg.

[Tom]

You could try something like this:

body:before, body:after {
    content: "";
    position: fixed;
    background: #900;
    left: 0;
    right: 0;
    height: 10px;
}
body:before {
    top: 0;
}
body:after {
    bottom: 0;
}
body {
    border-left: 10px solid #900;
    border-right: 10px solid #900;  
}

[Oleg]

No, it’s not really something. I found the property of CSS: border-image. Can you recommend how best to use it to create a image frame for the entire site?

[Tom]

This might help: https://generatepress.com/forums/topic/can-generate-press-create-frames/#post-118821

[Author]

Posts