Background texture on web pages

charking · 2016-07-02 13:51:55

I have followed the advice in the topic http://community.theturninggate.net/vie … hp?id=6622 successfully so I know that my custon.css setup is working. What I had under CE4 and want in Backlight is the ability to add a texture to all of my web pages. This is the custom.css code I was uisng in CE4 and copied over to Backlight with a path modification which I hope is correct:

/* If your page background-color is red after enabling the PHPlugins function, then you know it's working.
* Delete this after confirmation, because it's hideous :
*/
body {
background-attachment: scroll;
background-image: url(/backlight/custom/phplugins/images/background.jpg);
background-position: center top;
background-repeat: repeat;

/* background-color: #f00 !important; */
}

Is this code correct and should it not override any colour setup in the Backlight template definition?

rod barbee · 2016-07-02 14:32:38

Did you try
html, body, main
As the selector?

If that's not it, be sure to post a link

charking · 2016-07-02 21:12:39

I'm not sure what you mean by "the selector". And the link is www.charking.com.

I just started working on this yesterday evening and it is still very much a work in progress. No galleries as yet. I'm trying to set up the site's "shell" before adding galleries.

Last edited by charking (2016-07-02 21:13:07)

rod barbee · 2016-07-02 23:54:21

I'm not sure what you mean by "the selector".

Instead of starting the css rule with:

body {

start it with this:

html, body, main {

html, body, main are the selectors that tell the browser which elements to apply the css to.

another problem is that the page can't access your background image, I get a 403 Forbidden error when trying to reach background.jpg

http://www.charking.com/backlight/custo … ground.jpg

You could try changing permissions on the folder containing your image.

charking · 2016-07-03 00:31:55

The permission code on all folders down to the background image is 755. I can't see any problem here.

Added after further testing:
I can call up the custom.css code in a browser with http://charking.com/backlight/custom/css/custom.css, but it fails with the phplugins folder.

Last edited by charking (2016-07-03 00:41:36)

rod barbee · 2016-07-03 00:38:43

Well, the picture can't be reached. Not sure why. I'd try moving the images/ folder to the root of the site and changing the url to the image in your custom css.

charking · 2016-07-03 01:21:55

Hi, Rod.

I've followed through on your suggestion, but it still doesn't want to work. Would you please take another look.

The image is now at http://www.charking.com/phplugins/images/background.jpg and is accessible and the custom.css file reads

html, body, main {
background-attachment: scroll;
background-image: url(/phplugins/images/background.jpg);
background-position: center top;
background-repeat: repeat;
}

rod barbee · 2016-07-03 01:24:37

Seems to be working fine. I can see the background texture on your home page.
http://www.charking.com/

charking · 2016-07-03 01:39:45

I can't see it at all. The look that I am after is what I had under CE4. An example can be seen in my original opening screen at www.charking.com/opening. The texture is showing only in the slideshow and not in the overall background because the other CE4 modules are not available. Under Backlight my masthead and menu links have a black background and I don't see the texture at all, possibly because it is too light.

charking · 2016-07-03 01:45:56

Also, if I type in www.charking.com, the masthead and menu items are off-centre; whereas if I type in charking.com, I get them centered the way I want them.

This may be a browser problem. It happens to me in Opera but not Chrome or IE.

Last edited by charking (2016-07-03 01:49:40)

rod barbee · 2016-07-03 01:48:08

Also, if I type in www.charking.com, the masthead and menu items are off-centre; whereas if I type in charking.com, I get them centered the way I want them.

I see no difference between charking.com and www.charking.com

rod barbee · 2016-07-03 01:53:49

I can't see it at all. The look that I am after is what I had under CE4.

Then you'll need to find the right css selector to apply the background texture where you wish it to go. Use your browser's inspector to find that:
http://ttg-tips-and-tricks.barbeephoto. … selectors/

Looks like it could be .page__main and .page__column. But those might not be specific enough.

charking · 2016-07-03 01:55:47

Hi, Rod. You keep beating me when I add additional comments. The difference between with and without www. is definitely a browser problem. It happens only in Opera which I use most of the time.

rod barbee · 2016-07-03 01:59:34

charking wrote:

Hi, Rod. You keep beating me when I add additional comments. The difference between with and without www. is definitely a browser problem. It happens only in Opera which I use most of the time.

They both look the same to me in Opera as well.

charking · 2016-07-03 02:01:11

Thanks for your further suggestion on finding the right css selector. I'll follow through on that. I'm finding that Backlight is making some things very much easier and a few things a bit harder.

charking · 2016-07-03 02:40:07

rod barbee wrote:

charking wrote:
Hi, Rod. You keep beating me when I add additional comments. The difference between with and without www. is definitely a browser problem. It happens only in Opera which I use most of the time.
They both look the same to me in Opera as well.

That's interesting. It's the initial appearance of the home page which differs when I enter the web site in Opera. After that they appear exactly the same, even when I return to the home page. Could be my implementation of the software. I don't intend to lose any sleep over it.

rod barbee · 2016-07-03 06:43:20

Or it could be a quirk of the browser.

charking · 2016-07-09 04:40:13

My web site is up and running the way I want it, opening video and all. I can now get back to my photography and create more galleries. The only remaining item is my background texture. If my review of HTML and CSS as well as the Backlight framework is correct, all of the section ids are in XML files so that selectors such as "html, body, main" do not work. What does work is the following code:

* {
    background-attachment: scroll;
    background-image: url(../images/background.jpg);
    background-position: center top;
    background-repeat: repeat;
    }

However, this puts my background texture everywhere, and I do mean everywhere. The one issue I have with this is that it puts the texture into the space in the thumbnail frames. These I want to be white. Any suggestions?

Pleas take a look at www.charking.com.

Last edited by charking (2016-07-09 04:43:15)

rod barbee · 2016-07-09 05:20:08

using * is the universal selector. As you've discovered, you don't what to use that.

all of the section ids are in XML files

No, just css files.

Where exactly do you want the background texture?

if you use this:

 html, body, main {
    
    background-attachment: scroll;
    background-image: url(../images/background.jpg);
    background-position: center top;
    background-repeat: repeat;
}

And then set other sections to be transparent, you'll get the texture for the whole page background. Right now your header background is white, the content background area is white, your footer background area is white, etc.

But I may have found a bug. In the page template > Main Column > Background-color, I tried setting mine to transparent. The color code shows: rgba(0, 0, 0, 0) which should be transparent. But in the inspector it's showing #ffffff. But I'm not positive if this page section is set up to take alpha channels.
This is happening in other areas too, like Navigation-Header.

With custom css I can add this:

.page__main {
    background-color: transparent;
}

and the copy area goes transparent.

rod barbee · 2016-07-09 05:47:09

It's looking to me that Main Column, Navigation-Header, and Tray Columns cannot currently be set to transparent in the Backlight interface but instead need custom css to do it.

charking · 2016-07-09 06:34:23

Thanks, Rod. As soon as you mentioned "transparent" I knew that was the answer to my problems. However, you are right; I am having a problem with the navigation header and maybe the footer (its pattern lacks consistency with the other elements). I added the .page_main code; what should the selector be for the navigation header and the footer?

By the way, this is a good example of the need for a global setting in Backlight; I must have made over 20 settings of background color to transparent.

charking · 2016-07-09 07:11:51

Actually the masthead doesn't always seem to come out how I want it.

Actually, I should probably take this back. One thing though, I have lost the background texture in Photoswipe, given the * selector, which I thought was nice to have.

Last edited by charking (2016-07-09 07:28:00)

rod barbee · 2016-07-09 07:38:45

This looks like it should cover everything other than the masthead and footer. Those can be set to transparent in the Backlight interface. (I doubt this will put your texture behind large Photoswipe images. You'll probably have to do that seperately)

main, .page__main, nav, #primary-menu li, .page__column.page__tray, ul#primary-menu {
    background-color: transparent;
}

I didnt' have the time to really dig into this, so there may be simpler selectors to use.

I think the selector for footer is just "footer". It's an element rather than a class or ID.

charking · 2016-07-09 08:00:21

Thanks, Rod. You've been a great help. I'll try this tomorrow morning (my time).

rod barbee · 2016-07-09 22:25:33

I discussed this with Matt. There are very good reasons why transparency can't be set in the Backlight interface for the main content area, column trays, and navigation: Madness ensues upon the site going responsive for mobile devices.
So if you use the above CSS, place it in a media query that applies it only to desktop sizes.

Community @ The Turning Gate

#1 2016-07-02 13:51:55

Background texture on web pages

#2 2016-07-02 14:32:38

Re: Background texture on web pages

#3 2016-07-02 21:12:39

Re: Background texture on web pages

#4 2016-07-02 23:54:21

Re: Background texture on web pages

#5 2016-07-03 00:31:55

Re: Background texture on web pages

#6 2016-07-03 00:38:43

Re: Background texture on web pages

#7 2016-07-03 01:21:55

Re: Background texture on web pages

#8 2016-07-03 01:24:37

Re: Background texture on web pages

#9 2016-07-03 01:39:45

Re: Background texture on web pages

#10 2016-07-03 01:45:56

Re: Background texture on web pages

#11 2016-07-03 01:48:08

Re: Background texture on web pages

#12 2016-07-03 01:53:49

Re: Background texture on web pages

#13 2016-07-03 01:55:47

Re: Background texture on web pages

#14 2016-07-03 01:59:34

Re: Background texture on web pages

#15 2016-07-03 02:01:11

Re: Background texture on web pages

#16 2016-07-03 02:40:07

Re: Background texture on web pages

#17 2016-07-03 06:43:20

Re: Background texture on web pages

#18 2016-07-09 04:40:13

Re: Background texture on web pages

#19 2016-07-09 05:20:08

Re: Background texture on web pages

#20 2016-07-09 05:47:09

Re: Background texture on web pages

#21 2016-07-09 06:34:23

Re: Background texture on web pages

#22 2016-07-09 07:11:51

Re: Background texture on web pages

#23 2016-07-09 07:38:45

Re: Background texture on web pages

#24 2016-07-09 08:00:21

Re: Background texture on web pages

#25 2016-07-09 22:25:33

Re: Background texture on web pages

Board footer