Background texture on web pages

charking · 2016-07-09 23:21:05

all of the section ids are in XML files

No, just css files.

I made that comment because when I searched the code on my web site for the key words "section id", only 4 out of 38 were in HTML files; the rest were in XML. I had wanted to use the IDs as selectors in my custom code, but that didn't work. I'm still learning how to code html and css stuff. Your code appears to be using class and type as the selectors.

Your code worked like a charm. There appears to be a very faint difference in the image intensity in the navigation bar and the footer, but they do contain the background texture.

This also enables me to easily switch backgrounds by simply adding another background jpeg to my web site and switching to it in the css code.

Thanks for all your help, Rod.

charking · 2016-07-09 23:51:41

rod barbee wrote:

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.

Your code did work. Thank you very much. I am now digesting what you just said. The main column colour is set to transparent in my Backlight; but from what you said earlier and above, it doesn't really affect the actual code on my web site. I haven't checked my other settings yet, but I did change them all to transparent yesterday.

Correct me if I am wrong; but it appears to me that I should simply set my background colour back to #fafafa as I had it before in Backlight and put your code above and mine referencing the background jpeg in the media query. That way your transparency code and the background will apply only to the desktop, while a mobile device will have an off-white background.

charking · 2016-07-10 00:21:32

Implemented the following code. Appears to be working.

@media (min-width: 500px) {

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

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

rod barbee · 2016-07-10 01:07:56

You'll probably need to set the min-width to 1025px

charking · 2016-07-10 01:43:02

Thanks for the suggestion, Rod. One last thing, my selectors are now set up as follows:

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

html, body, main, .masthead, .footer {
    . . . etc.

Once I used Backlight to change my background colours to what I had before, #fafafa, I noticed the masthead and footer were now a solid colour. I added ".masthead" as a selector and that worked; but "footer" would not. Nor would ".footer" or "#footer". I had to set the footer background colour to transparent, and that seems to work now.

I just removed the period before "footer".

Last edited by charking (2016-07-10 01:46:08)

rod barbee · 2016-07-10 02:29:14

you might need to dig into the inspector a bit to find the exact selector for the footer area. It might be something like:
footer .copyright

Matthew · 2016-07-10 16:50:58

Hi guys,

I've been messing around with this a little bit today. Here's the basic setup for what you want to do.

In the designer:

Page Layout => Background-color: desired solid
Page Layout => Negative Space: On

Main Column => Background-color: desired solid

Tray Columns => Background-color: desired solid

Masthead => Background-color: desired solid

Footer => Background-color: desired solid

Then in your custom CSS file:

html, 
body, 
main {
	background: black;
	/* do your custom background things here */
}

nav ul,
nav li,
.page__tray ul.menu li {
	background-color: transparent;
}

@media screen and ( min-width: 1025px ) {

	.masthead,
	nav,
	.main, .page__main,
	.page__tray[data-position="T1"],
	.page__tray[data-position="T2"],
	.copyright {
		background-color: rgba( 255, 255, 255, 0.5 );
	}

}

So on large displays, you will have your transparency and whatever you setup for your custom background. On smaller displays (i.e. mobile), the layout will fall back on it's solid colors, as defined in the designer. So make sure your design works in the designer first, then apply your custom CSS. With how Backlight's framework is built for small displays, it's important to use solid colors in that context.

charking · 2016-07-11 01:40:12

Thank you, Matthew. I implemented your code and it worked. One difference: I had to set the opacity value in your rgba statement to 0 so that my background texture would match that in my slide show.

One question: What are the effects of the Negative Space on/off settings overall? I had mine set to "Off" to avoid the default demarcation lines on the left- and right-hand sides of my web site. Following your instructions above, I set the value to "On" and the border lines widths to 0px to get the same effect as with the off setting.

rod barbee · 2016-07-11 02:15:26

did you try turning shadows off?

charking · 2016-07-11 02:40:37

I have always set shadows to "Off". What do you mean by your question?

rod barbee · 2016-07-11 04:49:26

Just that. There's a shadows control in the Negative Space controls group

charking · 2016-07-11 05:41:09

I tried Shadows on and off, but it didn't seem to make any difference.

rod barbee · 2016-07-11 05:46:26

can you direct us to a page where this is happening?

What are the effects of the Negative Space on/off settings overall?

From the Designer> Page Layout:

Negative Space Options
Only apparent when the browser's viewport is larger than the layout's max-width.

So try enabling Negative Space options and then change the size of the browser to see the results.

charking · 2016-07-11 07:45:14

rod barbee wrote:

can you direct us to a page where this is happening?

Not sure what you mean by this.

Changing the Negative Space from "On" to "Off" has no apparent effect on the appearance of my web pages, regardless of size (within the limits of my screen). It did at one point, but that seems to have disappeared, probably because of other changes I made.

Added: I can get black left and right borders if I want, but I have turned that off.

Last edited by charking (2016-07-11 07:47:21)

rod barbee · 2016-07-11 08:04:37

sorry, I should have quoted what you'd mentioned previously. what I meant is can you post a link to a page that has the problems you mentioned when using the Negative Space option (the "demarcation lines")

Changing the Negative Space from "On" to "Off" has no apparent effect on the appearance of my web pages, regardless of size

This will be determined by the page width you set. If you have a monitor that is, say 1600px wide but you set the page width (Page Layout > Max-width) to 1600px, you won't be able to make the browser wider than the layout's max-width and will therefore not see the effects of the Negative Space settings.
But if you set the page's max-width to, say 1140px, you will see the affects of Negative Space settings.

charking · 2016-07-11 08:30:02

I can easily get the black lines (the current default colour) by setting their width to >0px. Right now they are set to 0px and do not appear which is what I want. I find them unnecessary and distracting. At one point early in this thread, as I was developing the css code, I was getting white space left and right of these lines; but that has now disappeared. It may have had something to do with that original background colour line of code we kept talking about in the custom css file. It contained a gradient, and at one point I noticed white space appearing on the left-hand side of my screen and gray on the right-hand side. That line has long been gone. The appearance of my web page is now the same regardless of the setting of the Negative Space switch.

Matthew · 2016-07-11 15:16:03

When Negative Space is Off, the masthead and footer will span the full width of the browser. When On, the width of all elements will be restricted to the max-width setting of your website.

charking · 2016-07-11 21:16:57

Matthew wrote:

When Negative Space is Off, the masthead and footer will span the full width of the browser. When On, the width of all elements will be restricted to the max-width setting of your website.

Thanks, Matthew. I guess with my setup it doesn't appear any differently, one way or the other, so long as I suppress the margin lines on the left and right sides.

charking · 2016-07-15 08:13:46

Everything is looking good except for one small item. This is a mobile issue, but you can see it on the desktop. If you move the left or right border towards the other, at some point the site will switch to the mobile view. The problem happens only on the Galleries page. Above the text will be a small strip of the texture which should have disappeared. This appears to tie in with the margin above the text because if I lessen the margin, the strip of texture lessens.

www.charking.com/galleries

I implemented Matthew's code form his response above and have been modifying it in various ways to see if I can fix my problem, but no luck.

Matthew · 2016-07-15 16:55:52

You have 36-pixels of margin on .page__main. So maybe try something like:

.page__main { margin-top: 0; padding-top: 36px; }

charking · 2016-07-15 22:43:39

Problem fixed. Thank you, Matthew.

Ken · 2016-07-21 22:03:23

I have read through this thread, but I can not get my background texture to be visible behind the masthead, navigation header, tray columns, main column, footer. The correct texture shows up outside these areas, on the left and right on a large display. I want to see the texture every where. What is odd is that the solid colors I set for these areas, shows up in a small display, which I understand is how the code should work, but in the large display I see the specified texture outside of the above areas, but then what appears to be some transparent version of it in the masthead, navigator, main column etc. Below is the link to my test site and below that is the entire CSS code I used, including the navigator borders, in case this has some influence. Any help is greatly appreciated.

http://sweetlightgallery.com/test/home/

nav {
border-top: 1px solid green;
border-bottom: 1px solid green;
}
html,
body,
main {
background-image: url(/test/photos/bkgrd3.jpg);
/* do your custom background things here */
}

nav ul,
nav li,
.page__tray ul.menu li {
background-color: transparent;
}

@media screen and ( min-width: 1025px ) {

.masthead,
nav,
.main, .page__main,
.page__tray[data-position="T1"],
.page__tray[data-position="T2"],
.copyright {
background-color: rgba( 255, 255, 255, 0.5 );
}

}

Last edited by Ken (2016-07-21 22:05:28)

rod barbee · 2016-07-21 22:27:37

In your media query, try changing this:

background-color: rgba( 255, 255, 255, 0.5 );

to this:

background-color: rgba( 255, 255, 255, 0 );

or this:

background-color: transparent;

Ken · 2016-07-21 23:17:25

setting it to zero worked,

Thanks

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

that other setting is for a white background at 50% opacity, so you'll sort of see the background texture show through.
If you want to slightly contrast the content area of the page (masthead, nav, content, footer) from the rest, you could set the alpha setting to something like 0.1 or 0.2 and see if you like that effect.

Community @ The Turning Gate

#26 2016-07-09 23:21:05

Re: Background texture on web pages

#27 2016-07-09 23:51:41

Re: Background texture on web pages

#28 2016-07-10 00:21:32

Re: Background texture on web pages

#29 2016-07-10 01:07:56

Re: Background texture on web pages

#30 2016-07-10 01:43:02

Re: Background texture on web pages

#31 2016-07-10 02:29:14

Re: Background texture on web pages

#32 2016-07-10 16:50:58

Re: Background texture on web pages

#33 2016-07-11 01:40:12

Re: Background texture on web pages

#34 2016-07-11 02:15:26

Re: Background texture on web pages

#35 2016-07-11 02:40:37

Re: Background texture on web pages

#36 2016-07-11 04:49:26

Re: Background texture on web pages

#37 2016-07-11 05:41:09

Re: Background texture on web pages

#38 2016-07-11 05:46:26

Re: Background texture on web pages

#39 2016-07-11 07:45:14

Re: Background texture on web pages

#40 2016-07-11 08:04:37

Re: Background texture on web pages

#41 2016-07-11 08:30:02

Re: Background texture on web pages

#42 2016-07-11 15:16:03

Re: Background texture on web pages

#43 2016-07-11 21:16:57

Re: Background texture on web pages

#44 2016-07-15 08:13:46

Re: Background texture on web pages

#45 2016-07-15 16:55:52

Re: Background texture on web pages

#46 2016-07-15 22:43:39

Re: Background texture on web pages

#47 2016-07-21 22:03:23

Re: Background texture on web pages

#48 2016-07-21 22:27:37

Re: Background texture on web pages

#49 2016-07-21 23:17:25

Re: Background texture on web pages

#50 2016-07-21 23:20:54

Re: Background texture on web pages

Board footer