Add background image to about us page only

Opt1musPr1me
New Member
3 0 0

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

Replies 9 (9)
ZestardTech
Shopify Expert
3502 579 805

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Kinjaldavra
Shopify Partner
2302 569 1404

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
Patrycja
New Member
4 0 0

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; 
}
Copy

and to Theme.liquid :

<body class="template {% if page.handle == ’about-us' %}background-class{% endif %}">
Copy

 

or

{% if template contains 'page' and page.url == '/pages/about-us' %}
Copy

 

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 %}">
Copy

 

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

 

tewe
Shopify Partner
234 44 100

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.

tewe_0-1619771623841.png

 

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

• Was my reply helpful? Click Like to let me know!
• Was your question answered? Mark it as an Accepted Solution
• Check out our Price Updater App
tewe
Shopify Partner
234 44 100

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

• Was my reply helpful? Click Like to let me know!
• Was your question answered? Mark it as an Accepted Solution
• Check out our Price Updater App
Kinjaldavra
Shopify Partner
2302 569 1404

@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);
    
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
Patrycja
New Member
4 0 0

Hey, thank you very much!! But its only work on PC and not on mobile Phone ;(

Kinjaldavra
Shopify Partner
2302 569 1404

@Patrycja  it work both pc amd mobile see screenshot http://prnt.sc/12i7ghe

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
Patrycja
New Member
4 0 0

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.