Dreamweaver: Height-adjusted background image: Auto will not show content

advertisements

I've read quite a number of questions here today to hopefully answer my question with no avail, so I hope someone here can help me.

I am trying to evolve my website to a responsive web design, and am having issue with the images.

Issue:

I am trying to load the images from my css labeled as background-images, but since there is no content in the containers I am loading them in, setting the height at auto will result in no picture since the container is technically at 0 without any content. I need to set the height at auto because I need the image to scale with the webpage so that it will stay proportional without large empty white spaces.

I understand to have my background image scale, I will have to set my css to this:

background: url(../images/image.jpg);
background-repeat: no-repeat;
height: auto;
width: 100%;

Again, the reason why this does not work for me is because I am looking to use the background image as an actual image without any content over it. Since there is no content, the image will not show. What I want to know is if there is a way around this issue.

The reason why I am choosing to load images through css is because I want to be able to load multiple versions (small to large file size scaled towards specific device size) of a particular image based on the viewers device (desktop, mobile phone, tablet, etc).

Just to cover all grounds, I want to mention that I have used the img tag in the html and have it rescale for different devices through css. However, if it is possible, I would like to still load the image through css as it will allow me to load different file sizes for different device sizes to enhance user experience from mobile devices. If there is another way to do this, please advise. I have spent 26 working hours on this so any help would be appreciated.

EDIT:

I have started a test template to keep the coding simple so everyone can see what I'm working with, and maybe help diagnose why it isn't working.

HTML:

<!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" />

<script type="text/javascript" src="js/jquery.js"></script>

<link href="css/test.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/print.css" rel="stylesheet" type="text/css" media="print">

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-type" content="cache" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="keywords" content="Enter Keywords" />
<meta name="description" content="Description Here" />

<link rel="shortcut icon" href="/s.ico" >

<meta id="view" name="viewport" content="width=device-width, initial-scale=1.0" />

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <link rel="stylesheet" type="text/css" href="includes/stylesheet_ie.css" />
<![endif]-->

</head>

<body>

    <div class="page">

        <div class="page_content">

                <div class="contentmain"></div>

        </div>
    </div>
</body>
</html>
</body>

</html>

My CSS:

/* This stylesheet was designed and developed by Chris Converse, Codify Design Studio */

@charset "UTF-8";

/* Text Formatting */

body {
font-family: Arial;
font-size: 12px;
margin: 0px;
padding: 20px;
color: #555;
background: url(../images/back.jpg)
}

.page { font-size: 1em; background-color: #FFF; }

h1 { font-size: 2em; color: #9e472a; margin: 0px 0px .5em 0px; font-weight: normal; }
h2 { font-size: 1.6em; color: #9e472a; margin: 0px 0px .5em 0px; }
h3 { font-size: 1.25em; color: #9e472a; margin: 0em 0px .25em 0px; }
p { margin: 0px 0px 1em 0px; font-size: 1em; }
li { margin: 0px 0px 10px 0px; }
a img { border: none; }
a { color: #f52d1b; }
a:hover { color: #00a2ed; }

/* Layout */

.page { position: relative; margin: 0px auto 0px auto; max-width: 980px; }

.page .page_content { background-color: #fff; padding: 1px 0px 1px 0px; }

.page .page_content .page_content_container_main { width: 100%; float: left; margin:     0px; padding: 0px;  }

.page .page_content .content {
margin: 15px 20px 20px 20px;
padding: 0px;

}

.page .page_content .contentmain {

background: url(../images/mimg-l.jpg);
background-repeat: no-repeat;
height: auto;
width: 100%;
background-size: 100% 100% contain;

An example of what I am trying to achieve can be found at www.dreamcreationstudios.com/test2.html. This is done through the img tag. I am hoping to be able to create the same effect except load the image through css instead so that I can load cropped versions of the original image in various screen sizes. Thank you.


This can be done by applying a padding-bottom on the div with the background-image but you must know the aspect ratio of the image first.

.page .page_content .contentmain {
    background: url(../images/mimg-l.jpg);
    background-repeat: no-repeat;
    height: 0; //Make the div 0px high
    padding-bottom: 75%; //Adjust this value to match the image dimensions
    background-size: 100% 100% contain;
}