Background resize

Hello,

It may be useful for wide-screen monitors.

File: gk_restaurant/css/typography/typography.style2.css

Line: 1874

Text: background: transparent url('../../images/style2/typography/bg_demo.jpg') no-repeat left bottom / 100%;

Thanks for sharing that information.
In my opinion it would be a little better to use override.css instead of editing core template files. The change You have showed would then look this way:

Code: Select all

.gkHeader {background: transparent url('../../images/style2/typography/bg_demo.jpg') no-repeat left bottom / 100%;}


Hi there!

Talking about the background I have made a bg image in photoshop 1366*2500px but it appears differently in different screen resolutions. It is moving. How can I fix it? Apart from code I should add would I also change the image width?


thanks in advance

www.mumsbitar.se

Please edit: /templates/gk_restaurant/css/override.css and add at its end:

Code: Select all

body {background-position: 50% 0;}


this will make background image always centered when browser width is wider than page main column.

Remember to enable "CSS override" in template settings - advanced section.

Thanks for sharing that information.
In my opinion it would be a little better to use override.css instead of editing core template files. The change You have showed would then look this way:

Code: Select all

.gkHeader {background: transparent url('../../images/style2/typography/bg_demo.jpg') no-repeat left bottom / 100%;}


.gkHeader {background: transparent url('../../images/style2/typography/bg_demo.jpg') no-repeat left bottom / 100%;}

correctly:
for override.css

Code: Select all

.gkHeader {

   background: transparent url('../images/style2/typography/bg_demo.jpg') no-repeat left bottom / 100%;

}

and set this: Template Manager - %Our template% - Options - Advanced settings - CSS override = Enable