Place picture to the left of the main body

D

Damo

New Member
Hi,

I am very new to web design so please accept my apologies for what I'm sure is a very straight forward question.

I am trying to design a website for a friend with a specific picture at either side of the main body of the page which is 595 pixels wide. I know that I can use the css "background" property but that would mean that the picture is tiled across the background instead of being placed at either side of the page.

The idea is that the picture would be before the background only if the screen is wide enough.

From searching on the web, I have managed to make the picture appear to the right of the page using the following code:

Code: 
#main {
    width: 900px;
    height: 2000px;
    margin: 0 auto;
    background: blue;
	position:relative;
    text-align: center;
}
body {
    background: red; 
    overflow-x: hidden;
}
#right-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 900px;
	width:595px;
	background-image:url(image.png);
}

and the body

Code: 
<div id="main">
    <div id="right-bg"></div>
    content
</div>

I am currently using colours to help me to determine exactly which area I am working with and do not plan to use these in the final site.

I have tried replicating the "right-bg" code calling it "left-bg" and playing with the "left:" tag, trying to make it work but I cannot (as yet) make it appear.

I have attached a screenshot of how the layout currently looks. If the browser screen is smaller, the image is cropped. I would like to do the same to the left if that is possible.

Layout_zps5e944bc2.jpg


Thank you for your help with what I'm sure is a very straight forward problem.
 
D

Damo

New Member
Hi Chris,

Thanks for your help. I've almost got it, my CSS now reads:

Code: 
body {
	background-image: url(test.png), url(test.png);
	background-position: top right, left top;
	background-repeat:no-repeat;
	background-attachment:fixed;
}

The picture now appears on each side of the body however it is tied to the edge of the screen and not the body. The result is that on a narrow screen the picture is actually hidden by the body and on a wide screen it is pinned to the edge of the browser and away from the body.
 
chrishirst

chrishirst

Well-Known Member
Staff member
The picture now appears on each side of the body however it is tied to the edge of the screen and not the body.
Click to expand...
So, let's see the rest of the style rules AND the HTML to see what is conflicting.
 
D

Damo

New Member
Thanks Chris,

The full code is:

Code: 
<!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">

#main {
    width: 900px;
    height: 2000px;
    margin: 0 auto;
    background: blue;
	position:relative;
    text-align: center;
}

body {
	background-image: url(test.png), url(test.png);
	background-position: top right, left top;
	background-repeat:no-repeat;
	background-attachment:fixed;
}
</style>

</head>

<body>

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

</body>
</html>

Once I resolve the problem I will create a separate CSS stylesheet but I was advised to keep it all in the same page whilst I am testing it. I hope that this is the right way to do this.
 
chrishirst

chrishirst

Well-Known Member
Staff member
A: The positions for the second image are the wrong way around.


B: Using background-attachment: fixed; sets the image with respect to the viewport, so it remains in a fixed position as the content scrolls.
 
D

Damo

New Member
Hi Chris,

Thanks for your help but I'm still doing something wrong. My full code is now:

Code: 
<!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">

#main {
    width: 900px;
    height: 2000px;
    margin: 0 auto;
    background: blue;
	position:relative;
    text-align: center;
}

body {
	background-image: url(test.png), url(test.png);
	background-position: top right, top left;
}
</style>

</head>

<body>

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

</body>
</html>

Which is still having the same effect. I did try adding "background-repeat:repeat-x;". that repeated the image on larger screens but they still were not tied to the edge of the body.
 
chrishirst

chrishirst

Well-Known Member
Staff member
It is all working as it should BUT ....




You need to remove the extra "white space" from the image that is holding it off the viewport edges. CSS does not 'know' which part of the image you want visible so it can only use the edges
bg-images.png


Where I've shown in the red lines is part of the image.
 
You must log in or register to reply here.
Top