We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

Background image in CSS

VBBRett
VBBRett asked
on
Medium Priority
222 Views
Last Modified: 2012-06-27
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!
Comment
Watch Question

Dave BaldwinFixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014

Commented:
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.

Author

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
Fixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
So even if I put a little text in the dub it will fill the background with the image?
Dave BaldwinFixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014

Commented:
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

Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
Does this work for all browsers?
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.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.