Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: [chrisB] on January 09, 2023, 04:10:53 PM

Title: Responsive Background
Post by: [chrisB] on January 09, 2023, 04:10:53 PM
I'm trying to add a responsive background which will go better with my logo, however, I have tried and I can't get it to be static

/* PHONES */
@media screen and (max-width: 767px) {
body {
   background: #00aedb url(https://poetryartonline.com/Themes/PA%20Online/images/mobilebg.png) fixed !important;
background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

Doesn't seem to work, the background still scrolls as you slide down.
Title: Re: Responsive Background
Post by: Diego Andrés on January 09, 2023, 04:18:33 PM
Where are you adding it?
It should be at the end of the file, or in the responsive file. You shouldn't need to use !important also.

Additionally, if you have enabled the option to minify files, it might take a bit to update. You can disable and then re-enabling it to refresh it manually too.
Title: Re: Responsive Background
Post by: [chrisB] on January 09, 2023, 04:43:19 PM
I added it to the bottom of the responsive.css

It loads, it just scrolls and I would prefer it not to move at all.
Title: Re: Responsive Background
Post by: TwitchisMental on January 09, 2023, 04:54:47 PM
Quote from: joey_matthews on January 09, 2023, 04:43:19 PMI added it to the bottom of the responsive.css

It loads, it just scrolls and I would prefer it not to move at all.
You may be wanting -

background-size: 100% 100%;
Title: Re: Responsive Background
Post by: [chrisB] on January 09, 2023, 05:36:34 PM
For some reason the 100% 100% stretched the image, but I fixed it by using the same CSS as my index.css and slightlhy increasing the smaller background.

I appreciate the help guys.