Background Image – having on the welcome page only. Is this doable?

widesargasso · Member · Dec 14, 2015 at 1:53 pm
Copy link

Add topic to favorites
Hi there, I’m working with the Obsidian theme. I’d like the background image to appear on the welcome page only, and not on any subsequent pages. I’m not great with css, so I don’t know how to edit it there without support. Can you help?
→Here is the website: http://helencalcutt.org/

The blog I need help with is: (visible only to logged in users)
stefmattana · Staff · Dec 14, 2015 at 7:34 pm
Copy link
Hi there,

Try to put this on your CSS editor:
```
body.home {
background: url("URL OF IMAGE")
no-repeat scroll 0 0 transparent;
}
```
Let me know if it works :)
widesargasso · Member · Dec 14, 2015 at 9:08 pm
Copy link
Hi there

thank you for this :)

It doesn’t seem to work unfortunately. I copied and pasted this into the css editor in customize, with the image url inserted. It seemed to do something to the transparency by the image remained the same on all pages.
thesacredpath · Member · Dec 15, 2015 at 7:31 am
Copy link
Hi @, since you are wanting it to appear only on the home page, then what we have to do is first remove it from everywhere and then bring it back to only the home page. Give the following a try.
```
body.custom-background {
    display: none;
}
body.home.custom-background {
    display: block;
}
```
widesargasso · Member · Dec 15, 2015 at 10:21 am
Copy link
Thank you!
Do I insert the image url anywhere in this code?

Do I copy and paste the code straight into the css editor in customize?

Sorry, I’m a real novice when it comes to these things.
Thanks again
widesargasso · Member · Dec 15, 2015 at 10:43 am
Copy link
I’ve tried both ways, with and without the url – it seems to freeze the image on every page and block all text content. I think we’re getting there though!
thesacredpath · Member · Dec 15, 2015 at 6:12 pm
Copy link
Hmmm, it worked for me in my web inspector. Let’s go about this a bit differently then with the following. I’ve used the !important keyword to force things. I tried this directly in your customizer and it seems to work fine.
```
body.custom-background {
    background-image: none !important;
}
body.home.custom-background {
    background-image: url("http://thiswinterpollen.files.wordpress.com/2015/12/helen-window-e1450175031176.jpg") !important;
}
```
widesargasso · Member · Dec 17, 2015 at 9:32 am
Copy link
Thank you, let’s try!
widesargasso · Member · Dec 17, 2015 at 9:34 am
Copy link
This worked – fantastic THANK YOU
thesacredpath · Member · Dec 17, 2015 at 7:48 pm
Copy link
Excellent and you are welcome.

No items found.