CSS & Background Images

  • (2 Pages)
  • +
  • 1
  • 2

17 Replies - 1418 Views - Last Post: 10 October 2010 - 07:46 PM

#1 ninechances  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 188
  • Joined: 08-February 10

CSS & Background Images

Posted 27 September 2010 - 12:55 PM

What is the easiest way to have a background of say Dim x Dim to stretch the entire area of the page (100% height and width). I know there is a way to do it in css 3.0 with the size attribute. Should I do it that way or does someone have another suggestion? thanks.
Is This A Good Question/Topic? 0
  • +

Replies To: CSS & Background Images

#2 Dannyboy997  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 64
  • View blog
  • Posts: 258
  • Joined: 17-April 09

Re: CSS & Background Images

Posted 27 September 2010 - 12:57 PM

You can use the following css rule:
#divElement{
width:100%;
height:100%;
margin:0 auto;
}



Hope this Helps,

-Daniel
Was This Post Helpful? 0
  • +
  • -

#3 ninechances  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 188
  • Joined: 08-February 10

Re: CSS & Background Images

Posted 27 September 2010 - 01:23 PM

would that work if it was part of a container that had a fixed width though?
Was This Post Helpful? 0
  • +
  • -

#4 Dannyboy997  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 64
  • View blog
  • Posts: 258
  • Joined: 17-April 09

Re: CSS & Background Images

Posted 27 September 2010 - 01:25 PM

View Postninechances, on 27 September 2010 - 12:23 PM, said:

would that work if it was part of a container that had a fixed width though?


Yes it would!

-Daniel
Was This Post Helpful? 0
  • +
  • -

#5 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: CSS & Background Images

Posted 27 September 2010 - 02:35 PM

View Postninechances, on 27 September 2010 - 06:55 PM, said:

What is the easiest way to have a background of say Dim x Dim to stretch the entire area of the page (100% height and width). I know there is a way to do it in css 3.0 with the size attribute. Should I do it that way or does someone have another suggestion? thanks.


What are you trying to use it for? Like a lightbox overlay?

Standard background would use background-repeat:repeat; but i can only assume its not this.
Was This Post Helpful? 0
  • +
  • -

#6 ninechances  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 188
  • Joined: 08-February 10

Re: CSS & Background Images

Posted 27 September 2010 - 09:00 PM

well i thought it was working but it isn't. Should I upload the file to my server so you guys can see what's going on?
Was This Post Helpful? 0
  • +
  • -

#7 husseycoding  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 52
  • View blog
  • Posts: 174
  • Joined: 23-June 10

Re: CSS & Background Images

Posted 27 September 2010 - 10:43 PM

Hi ninechances,

It sounds like you are trying to create a background for your site? What Dannyboy997 put should work in essence but in my mind he missed out a few important things. Firstly, make sure you are applying the css to the <img> tag itself, not a div that may contain the image otherwise the image will not stretch. Secondly, set the position of the image to absolute so it is no longer contained within the confines of its parent element - if you do not define the position of the element then it will default to relative. Thirdly you will need to set the top and left properties so it sits in the corner of the page, and set margin and padding to 0 so there are no spaces between the image and the page edge. Finally, the image must be placed above the other content in the code so that it sits behind it and acts as a background. Alternatively you could use z-index if this was not possible. You would end up with an <img> tag with properties as follows.

#someimage
{
top:0;
left:0;
position:absolute;
margin:0;
padding:0;
z-index:-1;
}
Was This Post Helpful? 1
  • +
  • -

#8 ninechances  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 188
  • Joined: 08-February 10

Re: CSS & Background Images

Posted 27 September 2010 - 10:51 PM

i just tried what you said and it does not work.

this is essentially what i tried just now to test:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#someimage
{
top:0;
left:0;
position:absolute;
margin:0;
padding:0;
z-index:-1;
}
</style>
</head>

<body>
<img src="images/bg.jpg" id="someImage" />
</body>
</html>



maybe i'm missing something...then again it is 1 in the morning
Was This Post Helpful? 0
  • +
  • -

#9 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: CSS & Background Images

Posted 28 September 2010 - 01:01 AM

Ninechances, please upload it if possible, firebug makes this much easiyer to show examples :)

Looking at your example your just trying to make the image itself strech the whole page rahter than a background image.

Images need a pixel width and height as far as I know, does your image have enough size/quality to be streched like this?
Was This Post Helpful? 1
  • +
  • -

#10 husseycoding  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 52
  • View blog
  • Posts: 174
  • Joined: 23-June 10

Re: CSS & Background Images

Posted 28 September 2010 - 02:17 AM

Hi ninechances,

The css refers to someimage, but id of the image is someImage (uppercase I). Change them to be the same and see if that works.
Was This Post Helpful? 1
  • +
  • -

#11 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: CSS & Background Images

Posted 28 September 2010 - 02:30 AM

View Posthusseycoding, on 28 September 2010 - 08:17 AM, said:

Hi ninechances,

The css refers to someimage, but id of the image is someImage (uppercase I). Change them to be the same and see if that works.


Well caught.
Was This Post Helpful? 0
  • +
  • -

#12 ninechances  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 188
  • Joined: 08-February 10

Re: CSS & Background Images

Posted 28 September 2010 - 11:03 AM

View Posthusseycoding, on 28 September 2010 - 02:17 AM, said:

Hi ninechances,

The css refers to someimage, but id of the image is someImage (uppercase I). Change them to be the same and see if that works.


even with the change it does not work.
Was This Post Helpful? 0
  • +
  • -

#13 drhowarddrfine  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: CSS & Background Images

Posted 28 September 2010 - 06:55 PM

Just add 'height:100%;width:100%' to the css and you're done.
Was This Post Helpful? 0
  • +
  • -

#14 husseycoding  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 52
  • View blog
  • Posts: 174
  • Joined: 23-June 10

Re: CSS & Background Images

Posted 29 September 2010 - 12:25 AM

Indeed, I just noticed that you have not put the width and height declarations in your CSS, this is kind of important! Might be my bad, I didn't include them in my code either.

If that still doesn't work then you will need to get something live for us to view as there will probably be something else going on in the page.
Was This Post Helpful? 2
  • +
  • -

#15 ninechances  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 188
  • Joined: 08-February 10

Re: CSS & Background Images

Posted 29 September 2010 - 05:19 PM

View Posthusseycoding, on 29 September 2010 - 12:25 AM, said:

Indeed, I just noticed that you have not put the width and height declarations in your CSS, this is kind of important! Might be my bad, I didn't include them in my code either.

If that still doesn't work then you will need to get something live for us to view as there will probably be something else going on in the page.



Alright...it's kind of working but I think the clear:both is effin it up in IE. Please take a look and tell me what I need to change. Thanks guys, you really have been a huge help so far.

http://www.hcprint.com/test

works perfect in chrome but not IE and I haven't tried FF yet.

P.S.
and please don't rip it apart - I haven't even began to go through and make the code better or even add functionality to the site...this is kind of just a mock up.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2