Jump to content

An Image With Faux Column?

stkr

By stkr
in CSS

Recommended Posts

stkr Newbie

stkr

Posted
Posted

Hello everyone. I'm very new to both CSS and HTML so please bear with me as I try to explain what I am trying to do.This is my website: http://lostvalley-photography.com/At the moment it uses a faux column with a solid-colored background. What I am trying to do is put a banner 'behind' the column on both sides at the top. What I am essentially trying to do is this: http://i61.photobucket.com/albums/h55/ybx/website222.jpg That is just a model that I created in Photoshop.Here is the current code used for the column:

body {	margin: 20px 0;	background: #3b3b3b url(images/column.jpg) repeat-y 50% 0; 	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;	font-size: 13px;	color: #7F7772;

Any help would be appreciated :).

Link to comment
Share on other sites
jlhaslip Devoted Member

jlhaslip

Posted
Posted

Replace the background Image with a new one that includes the overlay by slicing the Demo link you provide, name it to column_banner.jpg, upload it and change the body css as follows:

body {	margin: 20px 0;	background: #3b3b3b url(images/column_banner.jpg) repeat-y 50% 0;	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;	font-size: 13px;	color: #7F7772;

You will end up with the faux columns looking exactly right.

Link to comment
Share on other sites
stkr Newbie

stkr

Posted
  • Author
Posted
Replace the background Image with a new one that includes the overlay by slicing the Demo link you provide, name it to column_banner.jpg, upload it and change the body css as follows:
body {	margin: 20px 0;	background: #3b3b3b url(images/column_banner.jpg) repeat-y 50% 0;	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;	font-size: 13px;	color: #7F7772;

You will end up with the faux columns looking exactly right.

"Replace the background Image with a new one that includes the overlay by slicing the Demo link you provide,"I'm confused. This is the current image that I'm using for the column: column.jpg. What you're saying is to make a much larger banner-like image including the overlay in the background and replace this smaller column?
Link to comment
Share on other sites
rzea Member

rzea

Posted
Posted

Well, the problem with the above solution is that you would loose the shadow along on the sides of the white column, so the solution, although simple, will require a little more work.Here's how (the code may not be 100% perfect but you'd be able to tweak it just a little to make it fit. I'm sure is VERY close though.).1. Wrap the pages in TWO containers: one for the shadows on the side (which will use the same image you already use) and another one for the pages' content. This will leave the body tag ready to use the background image of the flowers you want.HTML:

<body><div id="side-shadows">  <div id="container">   <div id="header">	<div id="logo">	<h1><img src="images/LostValleyPhotographytxt4.png" /></h1>	<h2></h2>	 ...	   </div>  </div></body>

CSS:

body {  margin: 20px 0;  background: #3b3b3b url(images/background-wesbite.jpg) repeat-y 50% 0;  font:13px "Trebuchet MS", Arial, Helvetica, sans-serif; /*I optimized your font property*/  color: #7F7772;}div.side-shadows {  width:820px;  background: url(images/column.jpg) repeat-x;}div.container {  width:788px;  background:#fff;}

Two suggestions:1. Create a very wide image for the background of the website (the flowers) so you can see the same image in very wide resolutions without having to repeat yet, for example, I use a 24' screen at 1920x1200.2. IMMEDIATELY REMOVE the HTML meta refresh from your splash page... I mean, NOW! :):<meta http-equiv="Refresh" content="7; url=http://lostvalley-photography.com/index2.html" /> OUT! OUT OUT!Google and other search engines DO NOT like that at all.I suggest you edit the Flash in your splash page and in the last frame of the animation put this code:

getURL("http://lostvalley-photography.com/index2.html");

Hope this helps.BTW, very nice site, pictures and Gallery system :)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...