Docs

[mcurrie360]

Hello,

First time poster here. I am trying to make the background image full width and responsive. Right now its chopped off.

URL: http://manupnutrition.com/
Stack: Integrity

I need to show the entire pic here https://s3.amazonaws.com/manupnutrition/Website+Picture/Man++UP+header.png at the top of my site.

Thanks!

[mcurrie360]

I want it to be positioned just like in this demo http://theme.co/x/demo/integrity/7/

[Rahul]

Hi there,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

div#x-section-1 {
    background-repeat: no-repeat;
    background-position: right top!important;
    background-size: contain!important;
    padding: 4.6%!important;
}

It’s a bit better but it’s still limited in some way as it’s harder to control an image that is half a solid color and half an image. If this doesn’t work for you I suggest using a PNG file and having the triangular cut image and leaving the green out. save the PNG image with a transparent background. Use the background color for the green and you image will just overlay on to of it. This way we can just control the position over the different responsive widths. That will result in a lot of media queries CSS, but it would just depend on what you want it to look like.

Hope this helps – thanks!

[Author]

Posts