Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Adding a blogger background


  • Please log in to reply
7 replies to this topic

#1 sn0zb0z

sn0zb0z

  • Members
  • 253 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:UK
  • Local time:08:23 PM

Posted 25 May 2013 - 06:34 AM

Hi. Not sure if anyone here uses blogger, but I'm hoping someone can help me.

 

I created a design for the background of my blog. I have it set to don't tile and no scrolling with page and it looks fine on my computer screen. However, looking at it on my laptop, which is a smaller screen, the bottom of the background is cut off which looks stupid.

 

What can I do to make it resize the background/display the background correctly for various screen sizes?

 

There is a section that says Add CSS and it says it'll overwrite other settings and after searching a while all I can find is one code for this problem.

 

So I've tried adding this code to the Add CSS (obviously using the correct url):

 

body {
 background: url(mybackgroundurl) no-repeat center center fixed !important;
 -webkit-background-size: cover !important;
 -moz-background-size: cover !important;
 -o-background-size: cover !important;
 background-size: cover !important;
}

However, it still doesn't show up correctly on my laptop screen, it still looks the same. All it has done really is put the previous settings into a code I can see. I've looked through the help topics, but that code is all I can find and it doesn't work.

 

Does anyone know of any other CSS that may work or any other settings I can try?

 

Thanks.



BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:02:23 PM

Posted 25 May 2013 - 09:35 AM

You need to programmatically get the screen size, and then resize the background image.

http://stackoverflow.com/questions/170624/javascript-image-resize

 

The only difference is that you set the width of the image to the width of the screen. As noted in the lined thread, this tends to make images look terrible. In the real world, the app would load a background image that was already correctly scaled to fit the device.



#3 sn0zb0z

sn0zb0z
  • Topic Starter

  • Members
  • 253 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:UK
  • Local time:08:23 PM

Posted 25 May 2013 - 10:16 AM

You need to programmatically get the screen size, and then resize the background image.

http://stackoverflow.com/questions/170624/javascript-image-resize

 

The only difference is that you set the width of the image to the width of the screen. As noted in the lined thread, this tends to make images look terrible. In the real world, the app would load a background image that was already correctly scaled to fit the device.

 

Thanks. Not sure exactly what the code should look like though, there's different codes on that page. Tried a couple, but it hasn't done anything. Not sure if javascript works though on blogger or whether I'm missing something in the coding.



#4 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:02:23 PM

Posted 25 May 2013 - 02:49 PM

Do you know how to use CSS and Javascript to dynamically set the style?



#5 sn0zb0z

sn0zb0z
  • Topic Starter

  • Members
  • 253 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:UK
  • Local time:08:23 PM

Posted 26 May 2013 - 05:37 AM

Not really.

 

I made the background smaller and now it right on the smaller screen. However, on the larger screen it does resize it and the height of the image is fine, but the width is totally wrong.

 

The code I'm using now is;

 

body {
 background: url(imageurl) no-repeat center center fixed !important;
 -webkit-background-size: cover !important;
 -moz-background-size: cover !important;
 -o-background-size: cover !important;
 background-size: cover !important;
myimg = document.getElementById('imageurl');
image.style.width = 'auto';
image.style.height = 'auto';
]

 

The image.style.width was at 50%, but it doesn't seem to matter what that value is at, the width doesn't change. It seems to work fine for the height though.


Edited by sn0zb0z, 26 May 2013 - 05:55 AM.


#6 josearyan

josearyan

  • Members
  • 1 posts
  • OFFLINE
  •  
  • Local time:01:53 AM

Posted 28 May 2013 - 02:21 AM

This is really a very informative post. Thanks for sharing.



#7 sn0zb0z

sn0zb0z
  • Topic Starter

  • Members
  • 253 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:UK
  • Local time:08:23 PM

Posted 28 May 2013 - 09:45 AM

I gave up with trying to get the background right. No matter what I did it refused to go right and you can't contact blogger about anything. Ended up having a plain coloured background. I then redesigned the background design and make it a banner and then took part of the design and added an image to the sidebar instead of having it in the background.

 

Doesn't look exactly how I wanted, but it looks better than it did and it'll look fine on all browsers.

 

For anyone else having the same problems, if you are doing a background which has images at the side then go to template, customise, and change the layout so there is a sidebar or two and add an image using the gadget feature. Much easier.

 

Thanks for replying groovicus.



#8 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:02:23 PM

Posted 28 May 2013 - 12:20 PM

The correct way to fix it is to create a background for multiple resolutions, based on common screen resolutions. The web page loads, the javascript on the page detects the screen size, the javascript retrieves the correct image, and then sets the background with that image.

 

Here is how to get screen size using jQuery:

http://stackoverflow.com/questions/3437786/how-to-get-web-page-size-browser-window-size-screen-size-in-a-cross-browser-wa

Here is standard javascript:

http://www.pageresource.com/jscript/jscreen.htm






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users