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

0 Likes
Pallavi
Shopify Expert
2239 370 486

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
0 Likes
Natztech
Shopify Partner
1455 407 973

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
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
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

 

0 Likes

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

• War meine Antwort hilfreich? Hinterlasse bitte ein Like.
• Hat meine Antwort Dein Problem gelöst? Bitte akzeptiere sie als Lösung.
0 Likes

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

• War meine Antwort hilfreich? Hinterlasse bitte ein Like.
• Hat meine Antwort Dein Problem gelöst? Bitte akzeptiere sie als Lösung.
0 Likes
Natztech
Shopify Partner
1455 407 973

@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
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Patrycja
New Member
4 0 0

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

0 Likes
Natztech
Shopify Partner
1455 407 973

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

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
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.

0 Likes