Add background image to about us page only

Add background image to about us page only

Opt1musPr1me
Visitor
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
5625 1025 1354

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 570 1425

Hello There,

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

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
244 46 102

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
244 46 102

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 570 1425

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

 

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 570 1425

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

 

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.