XF 1.2 HTML Background and Page Width

Amaury

Amaury

Well-known member
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.
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
Jake Bunce said:
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.
Click to expand...

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.
 
Upvote 0 Downvote
Upvote 0 Downvote
@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.
 
Upvote 0 Downvote
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:
Upvote 0 Downvote
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;
}
 
Upvote 0 Downvote
katsulynx said:
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;
}
Click to expand...
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
katsulynx said:
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.
Click to expand...
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?
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
No, I'm not right...
katsulynx said:
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.
Click to expand...
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?
 
Upvote 0 Downvote
katsulynx said:
setting it inside the opposite media-querry should do the magic

Code: 
@media (max-width: 976px) {
#logo {
  background-color: YOUR COLOR !important;
}
}
Click to expand...
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 :)
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

V
  • Question Question
XF 2.2 Making Sub Nav Row same max width as the max page width
Replies
12
Views
971
vintage
V
O
Browser issue CSS issue when resizing page width in Style properties
Replies
9
Views
1K
Mike
Mike
O
  • Solved
XF 2.2 Trying to hide a HTML widget under a certain page width
Replies
4
Views
663
Old Nick
O
V
  • Question Question
XF 2.2 logo image jumping to a tiny size with narrowing page width
Replies
8
Views
733
vintage
V
L
  • Question Question
XF 2.1 Maximum page width
Replies
5
Views
1K
Mindzipper
Mindzipper
Back
Top Bottom