• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 214
  • Last Modified:

Background image in CSS

It seems like I always run into a problem with the background image to a div.  What is the correct way of doing this without having problems?  I seem to run into problems at times when I don't use background-image for a while and then when I try to use it the image does not show up.  Please let me know how I can have a background image to a div and that it is 100% of the width of the screen and 100% of the height of the screen.  Thanks!
0
VBBRett
Asked:
VBBRett
  • 3
  • 3
  • 2
2 Solutions
 
Dave BaldwinFixer of ProblemsCommented:
Uh... what size screen?  You can have screen sizes from 800x600 to 2400x1024 that I know of, maybe larger.  There is no web design without problems.  This page http://www.w3schools.com/css/css_background.asp shows most of the options for setting background images.  Just replace 'body' with the div 'id' that you are using.
0
 
VBBRettAuthor Commented:
Here is the code that I have:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="plasticsurgeon.aspx.cs" Inherits="plasticsurgeon" %>

<!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 runat="server">
    <title>Cameo Surgery Demo</title>
    <style type="text/css">
    div.background
    {
        width:100%;
        height:100%;
        background: url(../images/cameo.jpg);
       
    }
       
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="background">    
    </div>
    </form>
</body>
</html>

And here is the link to the web page: http://www.dentalgodfather/plasticsurgeon.aspx

The background seems not to work
0
 
Dave BaldwinFixer of ProblemsCommented:
That's because the 'div' has no content and the 'body' and 'html' have no size.  You can't have '100%' of nothing.  Here is a sample page where 100% works.  It still won't stretch a background image to 100%.  It will copy it to fill though.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
#content {
	background: #EEE;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 20px 0 20px;
	margin: auto;
	font: 1.5em arial, verdana, sans-serif;
	width: 960px;
	height: 100%;
} 
-->
</style>
</head>
<body>

<div id="content">the content</div>

</body>
</html>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
VBBRettAuthor Commented:
So even if I put a little text in the dub it will fill the background with the image?
0
 
Dave BaldwinFixer of ProblemsCommented:
In your code, it will fill only behind the content in the 'div'.  In my code below, the background image will be repeated throughout the div because it has been set up to be 100% of the window height.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
#content {
	background: #EEE;
	background-image: url(add-to-cart.png);
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 20px 0 20px;
	margin: auto;
	font: 1.5em arial, verdana, sans-serif;
	width: 960px;
	height: 100%;
} 
-->
</style>
</head>
<body>

<div id="content">the content</div>

</body>
</html>

Open in new window

0
 
DanielleFavreauCommented:
If you want it to apply to the entire page here's the code, you can even test this as it references an image available online.  This particular image is set to repeat but you could set a background color to have it fade into or set the background as fixed and it won't scroll as you add content - instead your content will scroll on top of the background.
<style type="text/css">
body { background: url(http://www.geekpedia.com/gallery/fullsize/apple-pink-blue-wallpaper.jpg) repeat center top; }
</style>

Open in new window

0
 
VBBRettAuthor Commented:
Does this work for all browsers?
0
 
DanielleFavreauCommented:
Yes, it should.  It's code that has been supported for quite some time.  I've tested it in Opera, Firefox, IE, Safari, and Chrome without issues.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now