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

XF 1.2 HTML Background and Page Width

Amaury

Well-known member
#1
So me and another person worked on a style for DOTATalk -- I did the styling via the style properties and color palette; he did the graphics. However, I just had to rebuild it to fix something I couldn't fix with it all customized. (Although it was accidental that I reverted all style properties, but I just went along with it.)

I don't know what our graphic artist did to get the forum to look like our homepage -- notice how the homepage has a fixed width, the HTML background shows more and covers the whole page and the HTML background doesn't move when scrolling.

I feel that because I reverted the style properties, I should be the one to fix this, not our graphic artists, so if anyone could help me out, that would be greatly appreciated.
 

Jake Bunce

XenForo moderator
Staff member
#2
For reference:
http://xenforo.com/community/threads/wallpaper-size.22055/

It's not necessarily exact instructions for you, but it hits on all of the relevant areas complete with code and screenshots.

In your case you may wish to apply the background image to the HTML property instead of Body. To make it so the image doesn't scroll you need to add background-attachment: fixed; to whichever property has the background image. The background-attachment: fixed; is normally added to the Miscellaneous area of the property.
 

Amaury

Well-known member
#3
For reference:
http://xenforo.com/community/threads/wallpaper-size.22055/

It's not necessarily exact instructions for you, but it hits on all of the relevant areas complete with code and screenshots.

In your case you may wish to apply the background image to the HTML property instead of Body. To make it so the image doesn't scroll you need to add background-attachment: fixed; to whichever property has the background image. The background-attachment: fixed; is normally added to the Miscellaneous area of the property.
It was actually already in HTML. :)

Okay, I got the background fixed; now, how do I get the width so I can show more of it? I tried adding a number to the width in Page Width Controller, but it just moved everything to the left.
 

Amaury

Well-known member
#5

Amaury

Well-known member
#8
@Jake Bunce: I just wanted to let you know this has been sorted. The background image was stored locally on the server, as well as the logo, I just didn't know the paths. Nights was able to fix it.

@Nights: I'm sorry I messed up.
 

BassMan

Well-known member
#9
That thread helped me a lot for my forum background. Thank you.

@Jake Bunce, how can I show background image only on desktop computer and not on mobile phones or tabs? So I don't want to show in responsive.
 
Last edited:

katsulynx

Well-known member
#10
If you know your Responsive Page Width for Desktop Display (you can look it up in the Style Properties/Responsive Design), you can add the following to your extra.css:
PHP:
@media (min-width: YOUR PAGE WIDTH) {
html { //Depending on where you have stored the picture, it may be "body" instead of "html"
  background: url(YOUR URL);
}
}
You may need to remove the background picture out of your style properties or extend the code snipped above by "!important"
PHP:
  background: url(YOUR URL) !important;
}
 

BassMan

Well-known member
#11
If you know your Responsive Page Width for Desktop Display (you can look it up in the Style Properties/Responsive Design), you can add the following to your extra.css:
PHP:
@media (min-width: YOUR PAGE WIDTH) {
html { //Depending on where you have stored the picture, it may be "body" instead of "html"
  background: url(YOUR URL);
}
}
You may need to remove the background picture out of your style properties or extend the code snipped above by "!important"
PHP:
  background: url(YOUR URL) !important;
}
Don't know if I'm doing it right. I got this code now:
PHP:
@media (min-width: 976px) {
html { //Depending on where you have stored the picture, it may be "body" instead of "html"
  background: url(styles/default/xenforo/background/green.jpg) !important;
}
}
Removed background picture from style properties, but no background for now.
 

katsulynx

Well-known member
#12
PHP:
@media (min-width: 976px) {
html {
  background: url(/@imagePath/xenforo/background/green.jpg) !important;
}
}
This should work for every page. But it only works if your page width exceeds 976 Pixel in width. If it is smaller, there is no background assigned.
 

BassMan

Well-known member
#13
PHP:
@media (min-width: 976px) {
html {
  background: url(/@imagePath/xenforo/background/green.jpg) !important;
}
}
This should work for every page. But it only works if your page width exceeds 976 Pixel in width. If it is smaller, there is no background assigned.
Works! Thank you very much!

So I guess on average desktop it should show the background image, on phones and tablets not. Am I right?
 

katsulynx

Well-known member
#14
Probably. You can lower your page width by making your browser window smaller. As soon as it is 975 Pixel or Smaller, the Background Image should dissappear and reappear, if you make it wider again.

The average widths however are:
Code:
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
So you may want to chose the 3 fitting you most.
 

BassMan

Well-known member
#15
No, I'm not right...
Probably. You can lower your page width by making your browser window smaller. As soon as it is 975 Pixel or Smaller, the Background Image should dissappear and reappear, if you make it wider again.

The average widths however are:
Code:
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
So you may want to chose the 3 fitting you most.
Yes, that is what I want now. Thank you again.

Btw, now I have no header background color because of the background image. How can I set the header background color to show only when background picture is not active?
 

BassMan

Well-known member
#17
setting it inside the opposite media-querry should do the magic

Code:
@media (max-width: 976px) {
#logo {
  background-color: YOUR COLOR !important;
}
}
Great, I just need to change #logo to #header to show right.

Now you really helped me a lot with this. Very interesting thing this coding :)