A space to discuss online store customization, theme development, and Liquid templating.
Hi, I have not figured out how to add a background image to my about us page. If someone has a link that I can follow that would be greatly appreciated.
I am using Venture theme.
Thank you
Hello There,
Please share your store URL and password.
So that I will check and let you know the exact solution here
Hello There,
Please share your store URL and password.
So that I will check and let you know the exact solution here
Site: https://www.microgreendeer.de/
Pass: klarna
Hi,
I was wondering if you could help me with this. I have Narrative Theme, and would like to add a background image to my about us page.
I added it to: theme.scss.liquid
many different codes like:
body.background-class { background-image: url({{'MY URL' | asset_url }}); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
and to Theme.liquid :
<body class="template {% if page.handle == ’about-us' %}background-class{% endif %}">
or
{% if template contains 'page' and page.url == '/pages/about-us' %}
or
<body class="template {% if page.handle == ’uber-uns%}background-class body { background-image: url({{ 'https://cdn.shopify.com/s/files/1/0553/8204/8942/files/Uberunswiekszenapisy-kopia.png?v=1619531283' | asset_url }}); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; } {% endif %}">
im sitting here about 30h and nothings happens!
Can you maybe fix the code so I can just copy and paste it?
Thank you in advance!
Patrycja
Hi @Patrycja ,
looks like as if you have done everything correctly but other style classes overwrote your solution.
If you add your class "background-class" to the main tag in the file theme.liquid
<main class="background-class content-for-layout" id="MainContent" role="main">
you will see the picture at least as in the example below.
As hinted above if you want to have the picture to fill the whole background you have to make much more adjustments in the Narrative theme (header, footer, ...)
Regards
Thomas
Hi @Patrycja ,
in addtion to my reply above: You can also add a template page.about copy the content of the page.template into it and modify the first div element such that it reads
<div class="page-width background-class">
Regards
Thomas
@tewe please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
and if you want to change images then changes images url it changes
#uber-uns .content-for-layout {
background-image: url(https://cdn.shopify.com/s/files/1/0553/8204/8942/files/Uberunswiekszenapisy-kopia.png?v=1619531283);
}
Hey, thank you very much!! But its only work on PC and not on mobile Phone ;(
Hey,
not really, when I set it up so that it fills the entire page on the desktop PC, you could see practically nothing on the phone and when I equalized on the phone on the pc it was much too small.