Background Image blurred

[Marcgu]

Hello, I am trying to make a one page navigated image slide as the Bryant Demo with the notebook.
However no matter what resolution or size I make the background image, on the screen it is blurred once uploaded into the background asset.

I attempted making the background image 1170×780 px in both 72 and 300 dpi. I tried making it 1600×780 in both 72 and 300 dpi and yet when uploaded as background its blurred. Can you please advice me on how to solve this? How did you make the notebook image so clear and sharp? What size/resolution should the background image be?

[Kyle – SUPPORT]

Hi

Our images on the demo are 1920 x 1280

– Kyle

[Marcgu]

Thanks,

Could you also provide me with answers for the rest of the question? What resolution is the image etc? As it takes a while to get an answer, can you please provide full complete answers so that I do not have to re-write parts of the question back and forth with you several rounds that takes a few days?

Thanks

[Rui Guerreiro – SUPPORT]

Hi,

Kyle already replied you the resolution is 1920px of width and 1280px of height. In Photoshop you should use the option save for web.

DPI only matter for printing not for browsers.

-Rui

[David Martin – Support]

Hi,

The image DPI is 72.

To help you further and quicker, please show us the page URL where this is happening?

To you have any WordPress image processing plugins installed like Smush.it ?

– David.

[Marcgu]

Hi,

No plugins installed at all.
Here is the link:

http://www.unsdsn-ne.se/thematic-groups/

Thanks,
Best regards, Darko

[David Martin – Support]

Hi Darko,

If you add a class to each of those Rows that have the background asset, example bg-size-change

Then use this within your theme options CSS:

.bg-size-change { background-size: inherit!important; }

– David.

[Marcgu]

Hi,

I did this and unfortunately it doesn’t make a difference, image is still blurred on the third row, i.e. the black rings in the image. Not sure what to do now… ?

Another additional question that arose is whether its possible to have a google map on the contact page if the contact page is a slide out in the main menu? I have a contact page that has a google map, but then the contact page is placed in the slide out via the mail icon in the main menu, everything appears but the map. Any clues?

Thanks a lot,

Best regards, Darko

[Marcgu]

Ok, I have done it now so that the images are sharp and work perfect! Thanks for all your help.

If you could point me in the right direction for the question on the Google Map in the Slideout contact page, as described in my previous post I would be grateful

Best, DArko

[David Martin – Support]

Hi Darko,

This looks to be working for me. It looks much more crisp.

Looks like you got the slide out map working?

– David.

[Marcgu]

I did indeed, thanks for all your help!

Best, Darko

[Marcgu]

One final question about the Thematic Groups section on my website, i.e. where the scrolling effect with the images is.

1. I would like to have the text on the first row a bit higher up, i.e. lined up with the image on the right.
2. Is it possible to decorate the scrolling distance between the rows, i.e. so that there is not that much white space when I scroll down to get to the other rows/images?

Best,
Darko

[David Martin – Support]

Hi,

This could be tricky with the parallax.

1)

If you can add a custom class top-pull to the text column, try this:

.top-pull {
    margin-top: -10px;
}

2) Looks like the Rows are set to Window Height? I think if you change it to content height you will loose the image effect.

– David.