Choose from our various pricing plans. There is a package for everyone!


Solved: header image resizing in fluid layout

View previous topic View next topic Go down

Solved: header image resizing in fluid layout

Post by lavenderrose on Sat May 18, 2013 11:56 pm

Hi, I am new and couldn't see a way to search to see if this had already been answered, so my apologies if it has.

I have a fluid three column layout that I am using an image for the header container background and I am trying to figure out a way to make it resize according to the browser resolution the visitor is using.  I have seen a lot of talk of this being possible, but so far the solutions I have found are not working for me...could someone please tell me how to do this if it is possible ?

below is the code for the header div that I am currently using.

Code:
#header {
 clear:both;
 float:left;
 width:100%;
 height:100%;
 background: url(images/header.jpg) no-repeat ;
 background-position: right bottom;
 background-size: auto;
 min-height: 256px ;
 background-color: #000 ;
}

thanks in advance for any and all help !!
avatar
lavenderrose
Member
Member

Age : 59
Posts : 3
Join date : 2013-05-18
Forum Version : PhpBB2
Reputation : 0

View user profile

Back to top Go down

Re: Solved: header image resizing in fluid layout

Post by Irate on Sun May 19, 2013 9:54 am

Could you show us a screenshot of what you have right now?
avatar
Irate
Member
Member

Age : 21
Posts : 91
Join date : 2013-05-01
Forum Version : PhpBB2
Reputation : 2

View user profile http://duelacademy.net

Back to top Go down

Re: Solved: header image resizing in fluid layout

Post by lavenderrose on Sun May 19, 2013 2:27 pm

here's the link to the page...thanks !!

cleospaintbox.com/tbl/
avatar
lavenderrose
Member
Member

Age : 59
Posts : 3
Join date : 2013-05-18
Forum Version : PhpBB2
Reputation : 0

View user profile

Back to top Go down

Re: Solved: header image resizing in fluid layout

Post by Sir Chivas on Mon May 20, 2013 4:08 pm

This is what I see in an APPLE monitor.
Code:
#header {
clear: both;
float: left;
width: 100%;
height: 100%;
background: url(images/header.jpg) no-repeat;
background-position: right bottom;
background-size: auto;
background-color: #000;
min-height: 260px;
min-width: 1250px;
overflow: hidden;
}

I believe that the resolution can't be fixed since it'll have to be monitor on the PCs' or Laptops' settings. I have tried to find a solution for this as well, but seems that there isn't any..


Must Follow the Rules at all times!
No Support via PM
avatar
Sir Chivas
Premium Member


Age : 25
Posts : 55
Join date : 2012-08-04
Reputation : 0

View user profile

Back to top Go down

Re: Solved: header image resizing in fluid layout

Post by lavenderrose on Mon May 20, 2013 8:25 pm

I found a workable solution by doing this

Code:
html
(div id="header")(img src="images/header.jpg" width="100%" height="100%" /)(/div>)

css
#header {
   clear:both;
   float:left;
   width:100%;
   height:100%;
   background-position: right bottom;
   background-size: auto;
   background-color: #000 ;
        max-height: 260px ;
        min-width: 1250px ;
   overflow: hidden ;
}

on the image, I simply made the text a little smaller and shortened the kerning to make it tighter and moved it all to the left, in all resolutions the text shows, smaller resolutions, just the right side of the image is cut off (800x600)

I think this is going to work out great, if anyone else has a better solution would be happy to hear it, or if anyone else is having this problem, here is a solution that's works, at least for me...thanks for the input !!
avatar
lavenderrose
Member
Member

Age : 59
Posts : 3
Join date : 2013-05-18
Forum Version : PhpBB2
Reputation : 0

View user profile

Back to top Go down

Re: Solved: header image resizing in fluid layout

Post by Th1nK on Sat Jan 04, 2014 7:36 pm

The question(s) in this topic have been answered and the owner has been able to solve the problem. Because of this, the topic has been locked.

If you have other questions, please open a new topic.
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Re: Solved: header image resizing in fluid layout

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum