3 Replies - 30306 Views - Last Post: 10 March 2012 - 11:39 AM

#1 AOM_Set  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 151
  • Joined: 18-December 10

How to make a background image fit the screen width?

Posted 10 March 2012 - 10:50 AM

Hi

I'm tyring to create a web site, and have ran into trouble.
I have a background image, added with this code:
body{
	background-image: url('BackGround.jpg');
	background-image: repeat;
}



Now I want a banner (another image) at the top, which should have the same length as the backgound image (No matter what the screen resolution is).
Since I can't use " repeat-x" on this image, I don't know what to do to make at fit all screen sizes.
Here is the code for the other image (The top banner)
<div style="background-image: url('TopBanner.jpg'); width: 1024px; height: 120px;" >



Note that I can make the width lager, say 3000px or so, but this wont solve the problem, as a scroller then appears.
Any help is appreciated.
Thanks
Ps. An image is added, so that you can see the problem

Attached image(s)

  • Attached Image

This post has been edited by Atli: 10 March 2012 - 11:36 AM
Reason for edit:: Title updated. Please use descriptive thread titles.


Is This A Good Question/Topic? 0
  • +

Replies To: How to make a background image fit the screen width?

#2 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 205
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

Re: How to make a background image fit the screen width?

Posted 10 March 2012 - 11:18 AM

width:100%;?
Was This Post Helpful? 1
  • +
  • -

#3 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,991
  • Joined: 08-June 10

Re: How to make a background image fit the screen width?

Posted 10 March 2012 - 11:24 AM

You can try adding an absolutely positioned <img> element, set with a z-index: -1. That should push it all the way to the background, making it appear as a background image.

Something along the lines of:
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta charset="UTF-8"/>
	<style>
		body {
			background: url("images/blue.png") repeat;
		}
		#banner {
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			width: 100%;
			height: 110px;
			z-index: -1;
		}
	</style>
</head>
<body>
	<img id="banner" src="images/red.png" alt="Banner Image"/>
	<h1>Page header</h1>
	<p>Or something....</p>
</body>
</html>


Was This Post Helpful? 1
  • +
  • -

#4 AOM_Set  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 151
  • Joined: 18-December 10

Re: How to make a background image fit the screen width?

Posted 10 March 2012 - 11:39 AM

Damn, it worked.
Thanks guys
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1