0

( Blog URL: http://chainlinkandconcrete.blogspot.com/ )

Alright, so I have figured out how to edit my template to have a 300kb background image. This is real easy and is the basic way to do it. All was well until I accessed my blog from a desktop with a much higher resolution monitor than my own, where I discovered that it wasn't resizing to fit with that browser window. What I want is it to fill the browser window and just kind of stay there statically. Lots of blogs do something like this. No problem, I figure: Googled up the issue, found a bit of CSS to help with it.

Here's the code I started with: 

body{
background: url(<image URL goes here>) no-repeat center center fixed; 
background-size: cover; 
margin:0; 
}

Tossed it into the body { } section, as a few tutorials mention, as well as the CSS tool the platform has.

Seems like it should do it, right? Well, it appears to, except the background is only there for a brief moment. The background I want loads, then the blog content loads, and the default blog background just sort of obscures the image I want.

If I'm utilizing this code, how do I make the blog itself have no background so that the image URL I toss in stays visible while the blog posts lay over top? The "transparent" background color option within the template settings doesn't seem to do anything; same thing happens - there and gone again.

I have also found this bit of code:

background-color:rgba(255,255,255,0);

Much like the background color tool, it doesn't appear to actually help. Background is there briefly, and then it is gone.

I've tried a few other things, such as the content of this thread: Stretch and scale CSS background

The advice is all largely the same, though - just variations on the same background CSS option.

No idea what I'm doing, I guess, but this doesn't seem like something that should be...involved. It's just a picture!

Thanks,

M.

Community
  • 1
  • 1
The ITea Guy
  • 225
  • 1
  • 3
  • 8
  • In your css file check that these 3 classes don't already have a background image `.variant-classic` `.classic` `.notouch` If they do delete the background image code and replace with your own background image. – Hastig Zusammenstellen Apr 13 '15 at 03:49
  • I looked at your website but I don't see any background (it remains white all the time). I checked out the code, no background is assigned to `body`. Rather, for `body`, it's assigned with `background-color: transparent;`. Are you sure your code has been added? It doesn't seem so on my Firefox. – Billy Apr 13 '15 at 04:01
  • Billy, I re-added the code as I appear to have removed it during one of the attempts and not put it back. The background is now there - it keeps disappearing in the preview but when I loaded it up in a new icognito instance it appears properly. Now need to check with a higher res monitor when I get a moment today (still on a 1920x1200!) to see if it actually looks right. If it does, I'll answer this post as "I derped" I suppose! – The ITea Guy Apr 13 '15 at 11:31
  • Alright, so it appears the code in my original post actually works - sort of. From what I can tell, the main problem was the "Live Preview" built into the template editor. Instead of actually displaying what it would look like in reality, it fails and obscures the background of choice from view. When the code's applied and I access the blog URL, it's fine. However, when I open an individual post, the "page" does the little slide down animation and obscures it again. Compare this with above: http://chainlinkandconcrete.blogspot.com/2015/04/thats-fumble.html So, half way there. – The ITea Guy Apr 13 '15 at 18:11

0 Answers0