How to merge header and body background

Ra

Active member
and preserve background modification through the body settings in admin

three more things:
1 how to turn off repeat of the bg picture
2 how to make bg picture resizable in width 1920-to-iphone size
3 how to auto add fog below the bg picture if the forum stretches down farther than the size of the background pic.

:confused:

smth like that
 

Attachments

  • forum_bg.webp
    forum_bg.webp
    43.8 KB · Views: 63
uhu

i used the same color for logo area and background - it looks then the whole thing
but i want to make a picture as my background

and i made a reload rotation of the pics - but then "no repeat" doesn't work and make it tiled on a wide screen
 
Ra, after putting in your background, comment out this section:
ACP>Styles>Your Style>Style Properties>Header & Navigation>Header>Background. (Click on the color bar and when the color palette pops up, put a check mark in "clear value".
Also go to the Templates>Your Style>header.css and delete this:
Code:
{
	@property "header";
	background-color: @primaryMedium;
	@property "/header";
}
It's right at the top of the header.css
 
  • Like
Reactions: Ra
checking out..


yes, thank you! that's what i wanted.


still tiled with clones background.. went to find why
 
checking out..


yes, thank you! that's what i wanted.


still tiled with clones background.. went to find why
You're welcome....
For the clones background, make sure your photo is big enough or it will tile.
 
  • Like
Reactions: Ra
Ra, after putting in your background, comment out this section:
ACP>Styles>Your Style>Style Properties>Header & Navigation>Header>Background. (Click on the color bar and when the color palette pops up, put a check mark in "clear value".
Also go to the Templates>Your Style>header.css and delete this:
Code:
{
	@property "header";
	background-color: @primaryMedium;
	@property "/header";
}
It's right at the top of the header.css
Is the second step necessary? IIRC, all I had to do was make the header background transparent, so the underlying body background gradient would start at the top (i.e. behind the header). I never had to remove the code from the template.
 
(it worked without the deletion)

that's clear, but why then there's a "no-repeat" function for the bground?
btw how to use "position" field? (any faq link)
attached is my current setting
 

Attachments

  • 23186758473282.webp
    23186758473282.webp
    22 KB · Views: 36
  • 5555444333221211661.webp
    5555444333221211661.webp
    11.9 KB · Views: 33
(it worked without the deletion)

that's clear, but why then there's a "no-repeat" function for the bground?
btw how to use "position" field? (any faq link)
attached is my current setting
1 - How large is your image?
2 - For "position", try entering top.
 
Is the second step necessary? IIRC, all I had to do was make the header background transparent, so the underlying body background gradient would start at the top (i.e. behind the header). I never had to remove the code from the template.
No, but it works best that way. You can leave that step out but I prefer the way I mentioned. YMMV. (Your Mileage May Vary)
 
No, but it works best that way. You can leave that step out but I prefer the way I mentioned. YMMV. (Your Mileage May Vary)
Why? (I'm not questioning your preference; just curious so I can learn, as I've never been very fluent with CSS, so to speak)
 
1 - How large is your image?
2 - For "position", try entering top.
the question is "how to make all images in rotation resizable along with the forum resize" from 1920 to iphone - without left-right shift and tiling

i use different sizes while testing
 
the question is "how to make all images in rotation resizable along with the forum resize" from 1920 to iphone - without left-right shift and tiling

i use different sizes while testing
I don't think you can yet do a background image that scales to 100% height and 100 % width - a workaround is to create one "background" layer div with just an image that is 100% width 100% height and then create another layer "container" div on top that contains everything else.
 
hey hey I m not so sophisticated
count me as a noob :D
any samples?
(and no fogging ideas? in the sample above it's always new background with a hand-made fog and logo - that's not a good idea..)

stuck with this
 

Attachments

  • 343434321212.webp
    343434321212.webp
    13.2 KB · Views: 32
updated to beta 2
found, that styles folder had double slash and double rotation.php
cleared all
got to footer.css and cleared background line

fixed
 
Top Bottom