/    Sign up×
Community /Pin to ProfileBookmark

Image Sidebar to equal page height

Copy linkTweet thisAlerts:
Jun 25.2013

To start off, I haven’t done a whole lot of coding, so most of my websites are in HTML. I know a little bit of CSS, so I’m open to having this problem solved either way.

My predicament:

I have a multi-page site that uses the same template throughout. There is an image on either side of the center content (body copy, nav bar, banner, etc.). It is a small sidebar containing a fade into the background image. However, when I did the initial layout, it is only 32×1380 px. The body copy causes my pages to be longer than 1380 pixels. How can I code this image to make it stretch to match the overall height of the page?

Thank you.

to post a comment
HTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@rtretheweyJun 26.2013 — Search on "css background-size" and you'll find some information that will help.
Copy linkTweet thisAlerts:
@VictoriaR33authorJul 10.2013 — Thank you, Rick. I have searched for a couple days using your suggestion. However, I still can't get it this to do what I want.

Here's more information if it helps ...

I designed the layout in Illustrator, sliced it, saved it out for HTML & web, and opened the HTML in Dreamweaver to begin my editing. Looking at the code, it appears that my image lives in a table ...

<table width="1016" height="1381" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">

<tr>

<td rowspan="25" align="left" valign="top">

<img src="images/Home_Page2_01.png" width="32" height="1380" alt=""></td>

There are more pieces after that, but this is the png I'm trying to duplicate (or stretch) along the y to equal the varying height of the page. Do you have any solutions or recommendations on where to look for one?

Thanks!
Copy linkTweet thisAlerts:
@rtretheweyJul 10.2013 — The only way Illustrator can export as HTML is to use tables, and while it's possible to wedge such code into an existing page, it's usually a bit complicated and difficult to maintain. You're better off just sticking to Dreamweaver until you learn to create your own HTML code.

I'd need to see the code for the entire page before I could suggest a solution, and I'm not sure I could help even then. It would be simple to use that image as a background image for the entire page, but there are bound to be details to be overcome. You might want to find a Dreamweaver forum where you can ask your question. Good luck!
×

Success!

Help @VictoriaR33 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...