/    Sign up×
Community /Pin to ProfileBookmark

Image Banner expand at any resolution

Copy linkTweet thisAlerts:
Aug 04.2006

I am using a fixed width top banner for an intranet site. In the beginning of this project, my client said that everyone would be using 1024 x 768 resolution. So I built the site around those dimensions.
Now my client would like the site to expand at any resolution. I have been reading a lot about liquid layouts, but I can’t seem to find anything that focuses on how to enable an image to minimize or maximize depending on resolution preference.

Here is an example of what I would like my top banner to do:
[url]http://www.maxdesign.com.au/presentation/page_layouts/[/url]

Thanks in advance for your help.

Gayle

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@KenJacksonAug 04.2006 — This [b]must[/b] be Douglas Bowman's [URL=http://www.alistapart.com/articles/slidingdoors/]sliding doors technique[/URL]. But on inspection, I can only find the left part of the adjustable background. There has to be a second image to slide over top of it. The first one is in [URL=http://www.maxdesign.com.au/stylesheets/maxdesign-advanced.css]this CSS file[/URL]. [CODE]#bannerimage-article
{
border-top: 1px solid #fff;
margin: 0 3%;
height: 140px;
background: url(/wp-images/bannerimage2.jpg) no-repeat 100% 0;
min-width: 500px;
max-width: 1000px;
}[/CODE]
The second one must be there somewhere, I just don't see it right now.
Copy linkTweet thisAlerts:
@KravvitzAug 04.2006 — One way is to split the image into two or three pieces and then make one of them a repeating background image of the parent element.
Copy linkTweet thisAlerts:
@KenJacksonAug 04.2006 — Oh, hey, I didn't notice that image is 2049 pixels wide. There are no sliding doors, the excess to the left is just cut off. And there are 3% margin. Thanks.
Copy linkTweet thisAlerts:
@gwmyersauthorAug 05.2006 — One way is to split the image into two or three pieces and then make one of them a repeating background image of the parent element.[/QUOTE]
Kravvitz,

I am not sure how to do the CSS part of this. Can you provide an example of this?
Copy linkTweet thisAlerts:
@KravvitzAug 05.2006 — Here's what the code might look like.
#header {
background: #33c url(example_bg.jpg) repeat-x;
height: 60px;
}
#header img {
float: left;
}
#header img.second {
float: right;
}
<div id="header"><img src="example1.jpg" alt="Site Name"><img src="example2.jpg" alt="" class="second"></div>
Copy linkTweet thisAlerts:
@gwmyersauthorAug 06.2006 — Thanks Kravvitz. I will give this a try.
×

Success!

Help @gwmyers 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.14,
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,
)...