How to: Static background image?

Eddie GatesAdvanced

184 posts

Hi all

D7.3.4

Is it possible without too much tech knowledge to upload a background image and for that image to remain static while you scroll through? I''ve seen it on many sites and quite like the idea for my own site.

TIA

It ain't easy being this stupid all of the time

Quote · 3 Nov 2017

geek_girlPremium

11493 posts

What template are you using?

Geeks, making the world a better place

Quote · 4 Nov 2017

Eddie GatesAdvanced

184 posts

Hi geek_girl, I'm currently using UNI

It ain't easy being this stupid all of the time

Quote · 4 Nov 2017

remotefindaAdvanced

57 posts

Step 1. Create a directory/folder preferably, inside the templates directory e.g /public_html/templates/my-custom-things . my-custom-things is the directory you are creating and you can give it any name you want.

Step 2. Upload the image into that directory or folder. That is the image you want to use as background-image. You must take note of the name of the image and its extension e.g .jpg, png etc

Step 3: Open Notepad on your computer and Paste the following CSS code in it

body {
background-image: url(background.jpg) !important; /*Note: background.jpg is the name of the image you uploaded into the directory. Replace it with the actual name of your image.*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

Step 4: Save the Notepad file with .css extension. You can give this css file any name e.g my-design.css

Step 5: Upload this css file into the directory you created. In this example, upload it into "my-custom-things" directory or folder.

At this point, the CSS file and the background image are in the same directory or folder

Step: 6. Go to the admin side of your site. Click on "Settings", then click on "Basic Settings" at the bottom left or use this link http://yoursitedomain/administration/basic_settings.php . Replace "yoursitedomain" with actual domain name of your site.

Step 7: Finally, scroll to the bottom and paste this link

<link rel="stylesheet" type="text/css" href="http://yoursitedomain/templates/my-custom-things/my-design.css">

in the <HEAD> Injections . (There is a space there where you will see <HEAD> injections.

Again remember to replace yoursitedomain with actual domain name of your site. Also replace my-custom-things with the actual name of the directory you create (In case you gave it a different name)

Step 8. Click on SAVE and you are done.

To see the changes, please clear your browser cache and also clear cache from your site admin.

Hope it works for you.

Quote · 5 Nov 2017

geek_girlPremium

11493 posts

Hi geek_girl, I'm currently using UNI

It appears that UNI uses the CSS from the base files; so that means if you add a css directory and inside of that directory create a common.css file; it won't get changed by any Dolphin upgrade. In that file place:

@import url(../../base/css/common.css);

body {
    width: 100%;
    min-height: 100vh;
    margin: 0px;
    padding: 0px;

    background-image: url(../images/sys-bg-main.png);

background-attachment: fixed;
}

Geeks, making the world a better place

Quote · 5 Nov 2017

Eddie GatesAdvanced

184 posts

thanks both, i'll take a large slug of coffee and give it a go.

It ain't easy being this stupid all of the time

Quote · 5 Nov 2017

geek_girlPremium

11493 posts