9 replies [Last post]
intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 4 years 50 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

I currently use this banner (which is just an image) at my website: http://www.celebritytypes.com/philosophers/

My problem with it is the width. Because the banner is a fixed width, it does not take up the full width on wide screens. I'd like to recreate the banner with flexible width so that the banner always takes up the available horizontal space.

What I'd like to do is to:

1. Have the blue background (based on this file) take up the entire width of the available space (i.e. somehow stretching the background image when the available space is wider than the image itself)
2. Have the text left-aligned (as it is now) on top of the blue background
3. Have the hexagons (based on this other file) right-aligned (as it is now) on top of the blue background

With my amateurish knowledge of CSS I've tried and failed to do it (well, I can get it to work in Firefox, but that code fails to take up all the available horizontal space in Chrome). Instead of asking you to wade through my faulty code, I figure I'll just ask how you would go about rendering the banner?

Looking forward to your help! Smile

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi intjadmin, If you have the

Hi intjadmin,
If you have the image as an <img /> instead of a background you could set it's width to 100%.
<img width:100% /> or
.banner img{width:100%;

intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 4 years 50 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

Hi Tony, thanks for your

Hi Tony, thanks for your reply! How would I go about adding the additional image (the hexagons) on top of the background image that you suggest?

PcolaSteve
PcolaSteve's picture
Offline
newbie
Florida
Last seen: 8 years 20 weeks ago
Florida
Timezone: GMT-5
Joined: 2012-06-03
Posts: 3
Points: 4

I am not sure if this is what

I am not sure if this is what you are looking for, but have you tried setting the left and right margin properties for the page to 'auto'? This might work, and then it might distort the image itself since it would be stretching the image.

intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 4 years 50 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

Thanks for your reply,

Thanks for your reply, PcolaSteve. Your proposed solution involves stretching the image, and I'd like to keep the hexagons the way they are (stretching only the blue background on which they are placed).

Still hoping for a solution! Smile

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

I'm struggling to see this as

I'm struggling to see this as a problem.
just add the hexagons as an image, position it to the right and the background as a background.

Do you really need the background image to be so large.

intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 4 years 50 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

Thanks again Tony for trying

Thanks again Tony for trying to help; I really do appreciate it! I replaced my table with divs and now I can get it to work giving the div the background instead of giving it to the td.

Thanks again!

intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 4 years 50 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

Uh-oh, not quite working after all!

Here is what I'm currently working with. The banner works the way I want it to, except on smallish screens at which point the min-width I'm using on the div with the background becomes a problem:

With the image banner that is currently on the site (see here), the banner gets cut off on screens that are not wide enough to accommodate it, allowing the rest of the content (the table featuring people) to shrink in width until it's small enough to fit onto quite small screens.

With the new flexible-width banner I've made, I've designated a min-width in order to make sure the text in the banner doesn't ever get bumped below the floating hexagons. However, that min-width seemingly prevents the rest of the content from shrinking appropriately in width as described above.

Is there a way of telling the browser to keep shrinking the other content despite the min-width I'm using?

I'm really pulling my hair out over this banner and am hugely grateful for your help!

intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 4 years 50 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

Politely bumping the thread

Politely bumping the thread so as to call attention to post #7. Smile

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Sounds like you have two

Sounds like you have two choices, put the min-width elsewhere or use @media queries to apply different rules at different screen sizes.