9 Replies - 4603 Views - Last Post: 30 May 2013 - 04:49 PM

#1 black_yurizan   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 92
  • Joined: 18-June 11

How to resize background image

Posted 29 May 2013 - 07:20 PM

I've been having trouble with this issue for the last couple of months. I've always wanted to make a background image fit the size of the window when it is maximized or minimized. I looked up on the internet that in order fill the background image on the browser you have to put into css, background-size:cover; or 100%. But when I did it , it did fill the background when it was maximized, but when I minimized the window to my browser the image starts to repeat. So when I started seeing it repeat I decided to put , repeat:no-repeat, in css style. It got rid of the repeating image, but now the rest of the page is empty white space. So my question is, how do I stop this? My background image is 1024 x768 so I don't think it's a size problem. Will this still occur, when I finally upload it to a website?

Is This A Good Question/Topic? 0
  • +

Replies To: How to resize background image

#2 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: How to resize background image

Posted 30 May 2013 - 02:47 AM

Post the relevant css.

http://caniuse.com/background-img-opts
Was This Post Helpful? 1
  • +
  • -

#3 black_yurizan   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 92
  • Joined: 18-June 11

Re: How to resize background image

Posted 30 May 2013 - 04:18 AM

Here is the css code
@charset "utf-8";
html{background-image:url('purple.jpg'); background-repeat:no-repeat;  }
body{height:800px; }
header{  text-align:center; font-family: "Capriola"; font-size:36px; color:white; }
nav{ height:35px; background-color:#825DA7
; position:relative;  top:10px;}
#menu{list-style-type:none;text-align:center; }
#menu li {display :inline;}
.submenu{ display:none; width: 50px; border: 1px solid black; background-color:purple; 
margin:auto;
}
#menu li a{font-size:24px; color:white;padding: 4px; padding-top:1px; padding-bottom:6px; 
text-decoration:none;  display:inline-block; }
#menu li a:hover{ background-color:#3D0066;}
article{ height:95%;width:90%;  background-color:#F3EBF3; position:relative; 
box-shadow: 5px 5px 5px #3D003D; border-radius:8px;
 top:-8px;margin:auto; }
footer{width:90%; height:10%; margin:auto; background-color:white; position:relative;
bottom:7px;box-shadow: 5px 5px 5px #3D003D}

 
 .submenu li  a{background:purple;text-align:center;  }




Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: How to resize background image

Posted 30 May 2013 - 05:40 AM

Move the background-settings from the html tag to the body tag; that's where they belong.

Reinstate background-size: cover and test it in different browsers. I haven't checked, but I assume you can remove the repeat rule, as the cover option will account for this.

When you had no-repeat (without the cover option) it would show as white if your page's height were more than 800px.
Was This Post Helpful? 0
  • +
  • -

#5 black_yurizan   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 92
  • Joined: 18-June 11

Re: How to resize background image

Posted 30 May 2013 - 08:00 AM

I moved the background settings in the body tag. But I still get the repeating image and empty white space if I add in no-repeat. I tried this on chrome and explorer, and there both producing the same results.
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: How to resize background image

Posted 30 May 2013 - 08:20 AM

Did you re-instate background-size: cover ?

Try removing the height: 800px from the body (do you really need this?). What is your current screen resolution? That is, is hgt > 800px?

I haven't studied how :cover behaves. That is, does it attempt to keep the proportions of the image. Here's a Mozilla reference.
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: How to resize background image

Posted 30 May 2013 - 08:26 AM

Here is an excellent page at css3.info which describes and demonstrates background-size. Example L looks pertinent.

This post has been edited by andrewsw: 30 May 2013 - 08:27 AM

Was This Post Helpful? 0
  • +
  • -

#8 shezzy   User is offline

  • D.I.C Head

Reputation: 28
  • View blog
  • Posts: 194
  • Joined: 28-January 07

Re: How to resize background image

Posted 30 May 2013 - 08:30 AM

css-tricks

a 2 second google search - found a site with multiple methods with and without javascript.

This post has been edited by shezzy: 30 May 2013 - 08:32 AM

Was This Post Helpful? 1
  • +
  • -

#9 shezzy   User is offline

  • D.I.C Head

Reputation: 28
  • View blog
  • Posts: 194
  • Joined: 28-January 07

Re: How to resize background image

Posted 30 May 2013 - 09:14 AM

so after trying all the techniques I could find online..only one that I've found will work in IE8+ (maybe ie7, i don't have a way to test), chrome, firefox, AND android browsers(many mentioned do not work for mobile).

supersized jquery plugin

Yeah its using javascript but using css3 just wont work for most IE versions and some mobile browsers
Was This Post Helpful? 0
  • +
  • -

#10 black_yurizan   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 92
  • Joined: 18-June 11

Re: How to resize background image

Posted 30 May 2013 - 04:49 PM

@andrewsw yeah I did reinstate cover when I moved it to the body tag. But I don't get it, haven't you dealt with this problem as well? Wouldn't every programmer deal with this problem once before? What do you set for the dimensions of your background image?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1