Add background image to about us page only

Retired Boards Appdev Store Design
1

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

2

Hello There,

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

3

Hello There,

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

4

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

5

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


you will see the picture at least as in the example below.

![tewe_0-1619771623841.png|925x793](upload://wSI52lg1gHYo5HpWRpPeGD6h2QR.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
6

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

Regards
Thomas

7

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

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

9

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

10

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.