background image size and positioning

I am struggling with creating a background image for full-width for this site:
http://sanasoma.com/about/ (a site on my multisite installation)

What is the ideal pixel dimension for the full-width background image?

What would be the CSS to manage its vertical positioning?
I tried to change positioning with this CSS (I did not manage to change position though):
#upfront-region-container-lahma .upfront-region-container-bg {
background-size: 100% 100%; background-repeat: no-repeat; background-position: 50% 50%;
}

I could not find any mentioning of best sizing on any tutorial….

  • harito

    thanks.

    I tried several criteria, but to no effect, I think that the CSS selector is not correct, since even when I enter for example an image size of just 10% it has no effect and nothing changes, cover also does not change anything:
    #upfront-region-container-lahma .upfront-region-container-bg {background-size: 10% 10%;}
    #upfront-region-container-lahma .upfront-region-container-bg {background-size: cover;}

    And I want to know how exactly I can control the exact positioning of the background image (background-position: 50% 50%; any value I place does not have any effect)

    And I want to know what the best size for the image would be, at what pixel dimensions to crop the image in photoshop.

  • Adam Czajczyk

    Hello harito,

    I hope you're well today and thank you for your question!

    I think Jaxom's tip on using "background-size:cover" property is really good. As for "physical" picture size - there's no "single" answer. I think the most important factor here is what devices would you like to address. It also depends a bit on the image. For example, the image that's currently on your site is mostly "mono - color" so it may be a bit smaller than other images full of details and a quality shouldn't be much worse.

    That said, usually the image should be the same size that the most common device screen width. Here's an interesting discussion on "media queries" (which is a CSS way to address different devices) and I hope it will help you:

    http://stackoverflow.com/questions/16443380/common-css-media-queries-break-points

    As for positioning background. I checked both your and mine site and I admit I'm a bit puzzled here so I'll ask our 2nd-line team for help here as it seems that this background is applied in a slightly different way than the pure CSS.

    Please keep an eye on this thread and I'll keep you informed as soon as I get a helping hand on this.

    Best regards,
    Adam

  • harito

    Thank you Adam

    I have checked the following again: I pulled the image in again, using the region editor. The image size is 1080 × 479 px, there is a tab 'Additional sizes' which is set to 'Full size' (I assume this means 'cover'?).

    And in 'Theme Settings'/ 'add custom CSS rules' I added this rule:
    Question, is this selector correct as it is, should this work?
    #upfront-region-container-lahma .upfront-region-container-bg {
    background-size: cover;
    background-position: 50% 50%;
    }

    Thank you for asking a specialized front-end designer :slight_smile:
    All the best

  • harito

    Hi Adam
    Thanks. I am not succeeding yet in positioning a bg img. Of course the image is there, covering the section but I cannot control positioning.
    Please, I need to understand how to exactly position the background image (and any section background image) otherwise I'll never be able to control the exact look.
    the link: http://sanasoma.com/about/

    1. question: is the selector I'm using in the css correct (since changes made do not have any impact): #upfront-region-container-lahma .upfront-region-container-Beste Grüsse

    2. question: when I click on the image in upfront on the edit region, then on the cog wheel to edit background, then on 'edit region css', the css editing field on bottom of the page comes up only with '.upfront-region-container-bg ' and misses the exact section definition (in this case I named this section 'lahma'), does Upfront add automatically and in the background the exact selector name or do I have to inspect the element in firebug and then change it to #upfront-region-container-lahma .upfront-region-container-bg ?
    Whatever values I enter here takes no effect! (.upfront-region-container-bg {background-size: cover; background-repeat: no-repeat; background-position: left bottom;}

    3. I try to edit the position by going to "Theme Settings", "add custom css", which has also no effect:
    .upfront #upfront-region-container-lahma > .upfront-region-container-bg {
    background-size: cover;
    background-position: left bottom;
    }
    Please help, since another use case is that I want the home page image cropped to half the size, (since the right part of the image is white only I can crop it away) and then I have to position the bg image 'left'. The link: http://sanasoma.com

    I think the problem of exact positioning is in relation to the 'parallax' setting. But still, how to control it?

    Thanks

  • Adam Czajczyk

    Hello harito!

    Let me go through your questions one by one :slight_smile:

    1. question: is the selector I'm using in the css correct (since changes made do not have any impact): #upfront-region-container-lahma .upfront-region-container-Beste Grüsse

    I'd advise not using ID selectors and instead trying to stick to classes only (chained if necessary) because using ID's may affect site layout in Upfront editor's view or even Upfront editor itself in an unexpected way. I'm not saying that this will happen for sure but there's a high chance of it as Upfront relies heavily on JavaScript that's using ID's to handle layout editing.

    2. question: when I click on the image in upfront on the edit region, then on the cog wheel to edit background, then on 'edit region css', the css editing field on bottom of the page comes up only with '.upfront-region-container-bg ' and misses the exact section definition (in this case I named this section 'lahma'), does Upfront add automatically and in the background the exact selector name or do I have to inspect the element in firebug and then change it to #upfront-region-container-lahma .upfront-region-container-bg ?
    Whatever values I enter here takes no effect! (.upfront-region-container-bg {background-size: cover; background-repeat: no-repeat; background-position: left bottom;}

    The way to add css to a region that you described is correct. As for finding the right selector I'd go with firebug or even (I personally prefer this) Chrome's or Firefox'es "Inspect element" tool. This is however a bit more complex issue here as this particular region is a parallax region using responsive image and the image is put there via a "data-src" attribute for ".upfront-bg-image" class.
    Other than JS this technique of addressing it may be helpful here:

    https://css-tricks.com/techniques-for-context-specific-images/

    3. I try to edit the position by going to "Theme Settings", "add custom css", which has also no effect:
    .upfront #upfront-region-container-lahma > .upfront-region-container-bg {
    background-size: cover;
    background-position: left bottom;
    }

    That seems to be related to the above issue. However, once the background is this should take effect. Though I think this would be a better "path" (according to question #1):

    .upfront-output-region-container.upfront-region-container-lahma .upfront-region-container-bg .upfront-output-bg-overlay .upfront-bg-image

    I think you may want to try this way. Let me know if it worked for you please!
    Best regards,
    Adam

  • harito

    Thank you Adam for the more detailed answer. I find it important to understand things… and your input helped. So the problem of exact positioning of a background section image comes in when choosing parallax, when I choose 'Image Full Width' I am able to position the image. Conclusion: either use 'parallax' without control over positioning or use 'full width' and position the background image with simple css.

  • Adam Czajczyk

    Hello harito!

    Conclusion: either use 'parallax' without control over positioning or use 'full width' and position the background image with simple css.

    I'd agree with that conclusion. Our developers are still adding more and more features to Upfront so over time I'm sure you'll be able to easily control every single tiniest aspect of it, however I think we'll get to that point gradually - getting closer with each update.

    Currently though, the "full width with simple css" or a "parallax as is" would be the only choice.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.