• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

How to merge header and body background

Ra

Active member
#1
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

Ra

Active member
#2
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
 

Elizabeth

Well-known member
#3
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
 
Likes: Ra

Ra

Active member
#4
checking out..


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


still tiled with clones background.. went to find why
 

Nick

Well-known member
#6
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.
 

Nick

Well-known member
#8
(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.
 

Elizabeth

Well-known member
#9
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)
 

Nick

Well-known member
#10
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)
 

Ra

Active member
#11
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
 

island

Active member
#12
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.
 

Ra

Active member
#13
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

Ra

Active member
#14
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