Docs

[piexec]

I’m adding an image element to the bottom of my page to give it a non-straight edge.

Design Services

Problems:

1. The image gets blurry when it stretches.
2. There is a very thin line that separates my image from the footer background.

I’ve already increased the media settings upload to 3000px width. The image has plenty of resolution as well.

Can you help please. Thanks in advance.

[Lely]

Hi There,

1.) Please use wider image.
The url of the image is this:
http://i2.wp.com/piexec.com/wp-content/uploads/2016/04/bottom_line2.png?w=1170
This w=1170 restrict the image width.
Instead of adding the image as IMAGE element, please add it instead as background image for section. Note to use the original size of the image. Then on the section element STYLE field, please add this:
background-size: cover; background-repeat: no-repeat;

2.) Please add this CSS:

.x-colophon.top {
    border-top: none;
    box-shadow: none;
}

Hope this helps.

[piexec]

Close….

Design Services

As you can see here, the image is there, but way too large. I made the original image 3000px wide to compensate for the largest possible scenario.

http://piexec.com/wp-content/uploads/2016/04/bottom_line3.png

As you can see the bottom graphic is not “fitting” into the container.

[Lely]

Hi There,

On the section element style field, please try updating this:
background-size: cover; background-repeat: no-repeat;
To this:
background-size: contain; background-repeat: no-repeat;
You may check this:http://www.w3schools.com/cssref/css3_pr_background-size.asp
And since where using contain, please do decrease the value for GAP to 35 or just lower value.

Hope this helps.

[piexec]

This reply has been marked as private.

[Paul R]

Hi,

Sorry, not really sure how you would want it to look like.

Can you provide us an image showing how exactly do you want it to look like.

For the meantime you can try this code.

background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;

You may change background position to achieve your desired result.

Hope that helps.

[piexec]

that worked! Thanks!!!!

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts