0

I'm trying to set something up where my background would scale depending on the user's browser width, but I'm tied to a background set in the external stylesheet under a certain element. I can change the background, I can modify its attributes, but I cannot replace it with a html background.

I've been researching solutions for this and most of them don't seem to work. I even tried linking (in the html) an external JS that detects screen resolution and chooses a bg file accordingly, which is exactly what I need, only the browser doesn't detect it at all, whether I nest the script within the html or just link it. So I'm looking for a way to link it under the bg setting in CSS. From what I read, this is "possible but risky", with no real instructions on how it's done.

I'm willing to try it despite the risk, but I'm also open to alternative suggestions. All I need is to be able to set two different image files (same image, just scaled differently) for small phones vs everything else. I've already looked at srcset but that requires embedding in html, so it's no go for me, although I was excited about it. I don't mind actually editing the images myself.

saintace2213
  • 3
  • 1
  • I am afraid of title, so didn't dare to read details, I think answer is no. – gevorg Jun 22 '16 at 19:24
  • If you're trying to replace a `background-image` based on screen size, I think what you're looking for is [media queries](http://stackoverflow.com/questions/21441938/media-queries-loading-different-image-depending-on-screen-size). – neilsimp1 Jun 22 '16 at 19:25
  • Welcome to StackOverflow. Please add the code you've tried. – YakovL Jun 22 '16 at 20:26
  • I tried media queries, as was suggested in the answers, but I can't seem to bring the formatting into the queries without breaking the entire background section. And formatting outside the queries is ignored. [screenshot](https://drive.google.com/open?id=0B2ulVSnB6jnFN0h5UkFPR082R1U) – saintace2213 Jun 22 '16 at 20:50

2 Answers2

2

I'm not sure what you mean by link javascript in bg settings in the css.

But you should be able to set different backgrounds using media queries within CSS. Take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

SpeedySan
  • 572
  • 4
  • 10
  • That's exactly what I was looking for, thank you. However it doesn't seem to allow formatting. Formatting outside the query is ignored, and adding it inside the query breaks the whole thing, making the browser skip the entire section when loading. [screenshot](https://drive.google.com/open?id=0B2ulVSnB6jnFN0h5UkFPR082R1U) – saintace2213 Jun 22 '16 at 20:46
  • When you say formatting, are you talking about formatting your css? It should be supported. check out this codepen and let me know if that is what you are trying to do: https://codepen.io/simiacode/pen/rLWZzz Feel free to edit and play around with it. – SpeedySan Jun 22 '16 at 23:55
  • This is odd. With your code, it works without issues, probably because it doesn't have too many parameters. With mine, no issues are noticeable till you see that all formatting is lost (on the text and logo, which are formatted using their own div class) when you go below 500. The images also start tiling, instead of taking the "cover" size. Actually, they seem to start tiling before the resolution gets low enough to ruin the formatting; I guess it depends on the width of the image. – saintace2213 Jun 23 '16 at 03:17
1

It sounds as though you're looking for media queries. You can set specific CSS based on media features.

See W3Schools for a description and examples on media queries.

Jordan Bird
  • 107
  • 1
  • 4
  • That's exactly what I was looking for, thank you. However it doesn't seem to allow formatting. Formatting outside the query is ignored, and adding it inside the query breaks the whole thing, making the browser skip the entire section when loading. [screenshot](https://drive.google.com/open?id=0B2ulVSnB6jnFN0h5UkFPR082R1U) – saintace2213 Jun 22 '16 at 20:48