Centre an image horisontally

SOLVE
Highlighted
Occasional Contributor

Hi,

 

I need your help with understanding how and where I make the needed change in order to make an image:

 

1. adjust to the width of the webbrowser

2. centre itself horisontally

 

Example:

 

origum.se/honeywell

 

The page on the link above works like all other pages on the website and my issue is that I only see the top of the banner image. I want it to adjust/scale automatically and adapt to the browser window and at the same time also focus on the horizontial centre part of the image - not the top, like now.

 

Hopefully there's an easy solution for this.

 

All the best,
Sean

0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Regular Advisor

And this, is the final solution which answers the question:

 

<style>
.parallax-banner {
background: url('{{ widget_data.banner_background_image.src }}');
background-size: 100% auto;
background-attachment: initial;
background-repeat: no-repeat;
background-position: center center;
}

@media(max-width:767px){
.parallax-banner {
background: url('{{ widget_data.banner_background_image.src }}');
background-size: auto 100%!important;
background-position: center center;
}

</style>

🙂

View solution in original post

8 Replies 8
Highlighted
Occasional Contributor

I received some excellent help from a HubSpot employee and it turns out I needed to change some code in the Hubl source for that particular module. On a desktop, everything is working out perfectly:

 

.parallax-banner {
    background: url('{{ widget_data.banner_background_image.src }}'); 
    background-size: contain;
    background-position: relative;
    background-repeat: no-repeat;
    background-attachment: fixed;

Now, for mobile and an iPhone SE though, I can't get the combination of above code to do the same thing.


Suggestions?

 

  @media all (max-width: 767px){
parallax-banner {
  background: url('{{ widget_data.banner_background_image.src }}');
    background-size: ?;
    background-position: ?;
    background-repeat: no-repeat;
    background-attachment: ?;

In an iPhone (and perhaps iPad) i'd like the image to behave as below (cover?), which would make me perhaps only see the middle barcode scanner in the image:

 

Example.png

0 Upvotes
Highlighted
Regular Advisor

Hi @SeanWiklund 

 

I send one option of alteration in your CSS and 3 prints to you see if you like how will it be, before you apply new css for class above. 

 

 

.parallax-banner {
    background: url(https://www.origum.se/hubfs/Origum%20website%20images/Background%20images/posbank-background.jpg);
    background-repeat: no-repeat;
    background-attachment: initial;
    background-position: center center;
    background-size: 100% auto;
}

banner-print.PNG

print-2.PNG

print-3.PNG

 

Please, if this content is what you are looking for, mark it as a solution.

Best regards!

 

Highlighted
Occasional Contributor

Hi Daniel,

 

Thanks for answering so fast!

 

I have replaced my code with yours and it works great on desktop.

 

<style>
.parallax-banner {
    background: url('{{ widget_data.banner_background_image.src }}'); 
    background-repeat: no-repeat;
    background-attachment: initial;
    background-position: center center;
    background-size: 100% auto;
      }

    @media all (max-width: 767px){
parallax-banner {
  background: url('{{ widget_data.banner_background_image.src }}');
     -webkit-background-size: cover;
     -moz-background-size: cover;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: cover;
  
    }
      
</style>

 

On mobile though, I'd like the image to be stretched vertically and centered.

 

Based on your third image (of the page viewed in a mobile), I've added an image that I hope explains it. This should be the case for mobiles as well as tablets. In my coded example above, I'm still only focusing on the desktop part (which works as it should), and the mobile (not working yet).

 

In the image below, it's not the one your using, but I think you get the idea. Stretch vertically and center. 🙂

 

example2.png

0 Upvotes
Highlighted
Regular Advisor

Hi @SeanWiklund 

 

To adjust on mobile, you will edit the .parallax-banner class that is inside @media.

 

@media all (max-width: 767px){

.parallax-banner { background-size: auto 100%;
....

 

 

See below the two options:

 

In this case use: "background-size: 100% auto".

background-100-auto.PNG

 

In this case use: "background-size: auto 100%".

auto-100.PNG

 

The first value is width control, and second value ir height control. Then when we use "background-size 100% auto", we are define to image background fill 100% width, and auto is to relative height. Is normal in mobile version we reverse this code for class, to "background-size: auto 100%", for fill 100% height and width relative.

 

Please, if this content is what you are looking for, mark it as a solution.

Best regards!

 

Highlighted
Occasional Contributor

Hi,

 

I really appreciate your help in understanding this better and you've given me the first solution for desktop. The second though, isn't working.

 

I would like the desktop to be "100% auto" and mobile "auto 100%", but it doesn't work.

 

Doing as below, all is good on desktop, but not on mobile:

 

<style>
.parallax-banner {
    background: url('{{ widget_data.banner_background_image.src }}');
    background-size: 100% auto;
    background-attachment: initial;
    background-repeat: no-repeat;
    background-position: center center;
}

    @media all (max-width: 767px){
parallax-banner {
  background: url('{{ widget_data.banner_background_image.src }}');
    background-size: auto 100%;
}
      
</style>  

But, if I change the desktop background-size to the same as mobile, mobile works as it should - but not desktop for some reason.

 

<style>
.parallax-banner {
    background: url('{{ widget_data.banner_background_image.src }}');
    background-size: auto 100%;
    background-attachment: initial;
    background-repeat: no-repeat;
    background-position: center center;
}

    @media all (max-width: 767px){
parallax-banner {
  background: url('{{ widget_data.banner_background_image.src }}');
    background-size: auto 100%;
}
      
</style>  

What am I doing wrong? 😞

0 Upvotes
Highlighted
Regular Advisor

Hi @SeanWiklund 

 

That may not be it, but it seems to me that the code you pasted is missing the class point in mobile.

 

Your code: parallax-banner { ...

Correct code: .parallax-banner { ...

 

I increased the dot in red color to look.

 

i'm waiting. 🙂

 

0 Upvotes
Occasional Contributor

So, I have a solution thanks to @DanielSanchez. 🙂

 

I will implement the code on almost all webpages on the site, because I think this would be the "normal" way of displaying banners. It bugs me that there's no easy way of changing this thing when working in the CMS - with specific images. Sometimes I want images in a blog post or on a page to behave like this and being able not to code things, it would be handy to not only just choose alignment of an image - but also other features, like center it or in this case strech it vertically.

 

Nevertheless - @DanielSanchez - you're the saviour of the month. Thank you! This thing has bugged me for years. 🙂

Highlighted
Solution
Regular Advisor

And this, is the final solution which answers the question:

 

<style>
.parallax-banner {
background: url('{{ widget_data.banner_background_image.src }}');
background-size: 100% auto;
background-attachment: initial;
background-repeat: no-repeat;
background-position: center center;
}

@media(max-width:767px){
.parallax-banner {
background: url('{{ widget_data.banner_background_image.src }}');
background-size: auto 100%!important;
background-position: center center;
}

</style>

🙂

View solution in original post