3 Replies - 1352 Views - Last Post: 15 June 2014 - 08:53 AM

#1 black_yurizan   User is offline

  • D.I.C Head

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

My Background image does not cover my web page

Posted 14 June 2014 - 07:08 AM

Hello, I'm trying create a website where my website has a textured background. People say that the recommended dimension for you web page should be 1024px by 768px. My background texture is bigger that that, it is 1152px by 864px. Nevertheless when I add my background on to the page it doesn't fit the whole page. I tried to make the html and body similar dimension, but the background still does not fit the page. I also tried to make the dimensions of the html and body tags 100%. Yet, the tag with the background does not cover the page. Can someone please give assistance.

Here is the CSS Code
html
{
width:1152px; height:864px; 
}

body
{
background-color:#2e3b68; margin:0px;
height:100%; width:100%;
}

#container
{
background-image:url('images/texture.png');	margin:auto;
height:100%; width:100%;
 



Is This A Good Question/Topic? 0
  • +

Replies To: My Background image does not cover my web page

#2 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4241
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: My Background image does not cover my web page

Posted 14 June 2014 - 10:07 AM

View Postblack_yurizan, on 14 June 2014 - 03:08 PM, said:

People say that the recommended dimension for you web page should be 1024px by 768px.

That's completely subjective, and probably only true in a few very specific cases. It's true that a width of around 1000px has been a popular choice for sites aimed at desktops in the last decade, but pre-determining the height is rarely done. These days - with so many different device types in common use, like tablets and smart-phones - assuming that your user is on a desktop/laptop computer is a dangerous thing to do. You need to be flexible, or you might lose a great deal of traffic over it.

Read up on Responsive Design to learn more about this.

View Postblack_yurizan, on 14 June 2014 - 03:08 PM, said:

Can someone please give assistance.

Historically, images added through the background-image style haven't been very flexible when it comes to size. They wouldn't really fit the element they are in, only cut off if they overflow it and repeat if they are to small. You could only really position them and control the way the repeat.

However, in CSS3 that was improved. So if you can do without support for IE8 and earlier, you might want to look into the background-size style. This article explains how to use it pretty well: Scaling background images (MDN).

If you need to do this on legacy browsers, you might want to try putting an actual image element on the page with the background image, and using absolute positioning and z-index values to place it behind the rest of the content.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw   User is offline

  • palpable absurdity
  • member icon

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

Re: My Background image does not cover my web page

Posted 14 June 2014 - 02:03 PM

You might also find this link useful:

Perfect Full Page Background Image

I am curious though, that you mention a "textured background". Typically this refers to a smaller image that is repeated..
Was This Post Helpful? 0
  • +
  • -

#4 black_yurizan   User is offline

  • D.I.C Head

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

Re: My Background image does not cover my web page

Posted 15 June 2014 - 08:53 AM

View Postandrewsw, on 14 June 2014 - 02:03 PM, said:

You might also find this link useful:

Perfect Full Page Background Image

I am curious though, that you mention a "textured background". Typically this refers to a smaller image that is repeated..


Yeah, the textured background that I'm using is not a small textured tile. It is a big paper texture that I combined with a blue color to create the blue textured background. Maybe it will be a lot easier to get a small texture tile, do you know a place where I can find something like that?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1