Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Use image as banner

  • mcovents
  • mcovents's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 years 3 months ago #222670 by mcovents
Use image as banner was created by mcovents
I added a background image to my survey in the Theme options
But the image stretches over the complete width and height of the screen.
I want the image to keep its original height and stretch over the complete width of the screen so I get a banner at the top of the screen.
Is this possible?

Limesurvey version 3.15
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 3 months ago #222709 by tpartner
Replied by tpartner on topic Use image as banner
Can you activate a test survey and give a link so we can see the style rules affecting the image?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • mcovents
  • mcovents's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 years 3 months ago #222710 by mcovents
Replied by mcovents on topic Use image as banner
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 3 months ago #222713 by tpartner
Replied by tpartner on topic Use image as banner
You can set the background size something like this:

Code:
body {
    background-size: 100% 572px;
    background-repeat: no-repeat;
}


But I think you will also want to add some media queries to adjust the size for mobile devices.

- www.w3schools.com/cssref/css3_pr_background-size.asp

- www.w3schools.com/css/css_rwd_mediaqueries.asp

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: mcovents
The topic has been locked.
  • mcovents
  • mcovents's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 years 3 months ago #222720 by mcovents
Replied by mcovents on topic Use image as banner
It didn't immediately work for me.
But after I added the url to the background image directly in the css, it worked.
Thank you for the tip for mobile devices.

body {
background-image: url( tpsurvey.ugent.be/limesurvey315/upload/s...mages/headerGent.jpg );
background-size: 100% 572px;
background-repeat: no-repeat;
}

Best regards,
Marc.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose