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!
Hi intjadmin, If you have the
If you have the image as an
<img /> instead of a background you could set it's width to 100%.
<img width:100% /> or
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?
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.
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!
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.
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.
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!
Politely bumping the thread
Politely bumping the thread so as to call attention to post #7.
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.