Text color

Support
#1

Hello

i have a am building a site for a car audio dealer. we have some collegues in holland and i want to sort of replicate their page. now i am having difficulties with the background picture. i want a big picture that is shown full screen. like here: https://www.concept4cars.nl/audio-upgrades/bmw/1-serie/ .
Now on my site, i don’t know how to set the picture that it is always fully shown (the full picture, so that it is not getting cut). Can you explain me how to do that? the site of my collegues is also using x-theme, maybe look at the code to solve the problem but i don’t know much about code.

Thanks in advance

#2

Hi Kris,

Thanks for writing in! Add a new section in Cornerstone and then click on the inspect icon.

Then under Setup, click on the advanced checkbox. Then under background layer, you can upload a background image.

Once you upload a background image, you can use the following settings.

Hope that helps.

#3

hello.
i did that, however, i want it to be shown fully. now i haven’t added any elements so it is much too small, i will add text and a button in the future but i want to be sure my picture is fully shown.
http://vhwp.vhcarsystems.be/audio-upgrades/alfa-romeo-2/

#4

Hi Thibaud,

Thanks for updating in!

The image background were small or cropped because it covers the whole section. Before you can make the image to be fully shown, I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

You use the background-size: cover which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes you can use background-size: 100% 100% which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes you can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or you can also use background-size: contain but then this is not a good choice because you will see white spaces around your image.

Hope this explains the background image property briefly. Thank you for your understanding.

#5

Thanks for your reply, but i don’t really get the wanted result.
this is my site: http://vhwp.vhcarsystems.be/audio-upgrades/alfa-romeo-2/
This is the site from my friends: https://www.concept4cars.nl/audio-upgrades/bmw/1-serie/

If you enter responsive design mode in mozilla firefox, you can see that the height of the picture is never changing! the car is always been shown from top to bottom, only the width of the picture changes. now, when i open my page: in responsive mode: it does change! so i think their section has a fixed height or so. how do i achieve this? maybe you can take a look at the source code of my friends page?

Greetings and thanks in advance :wink:

#6

Hi,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your email. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

#7

Hello
It’s ok, i’ll try to get i good result wit gaps and stuff. i’m going to fix it :wink:
thanks for your help

#8

You’re welcome, Thibaud. The only trick there is to set the section’s top and bottom padding to get as close to your image background’s aspect ratio.

Your friend’s only using 10% top and bottom padding which is close to the aspect ratio of his background image when viewed in desktop. His section’s height changes as you reduce the screen width by the way but it’s just subtle because of the small percentage padding mixed with fixed height headline and image.

#9

Thank you for your answer. i have tried it and it worked :wink: thanks.

#10

You’re most welcome!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.