responsive header image
I have a header
.siteheader {
height : 155px;
width : 100%;
max-width: 1200px;
margin:0 auto;
background-repeat : no-Repeat;
background-image : url("../images/header1.png
background-position : 0px 0px;
background-size: 100% auto !important;
/*border-bottom:1px solid #999;*/
}
as you can see I have the image resize according to browser size
I REALLY want this border-bottom but have commented it out because as the image height decreases then I have empty blank space within the header because the header itself is not resizing - so removing the border looks like the empty space belongs to the content area below the header.
question is how can I resize the header as the browser window changes size
I can then probably use background-size 100% 100%
I've tried
.siteheader {
max-height : 155px;
height : auto;
min-height : ???;
what would i put for min-height?
or actually what should I do here with this situation?
thanks
.siteheader {
height : 155px;
width : 100%;
max-width: 1200px;
margin:0 auto;
background-repeat : no-Repeat;
background-image : url("../images/header1.png
background-position : 0px 0px;
background-size: 100% auto !important;
/*border-bottom:1px solid #999;*/
}
as you can see I have the image resize according to browser size
I REALLY want this border-bottom but have commented it out because as the image height decreases then I have empty blank space within the header because the header itself is not resizing - so removing the border looks like the empty space belongs to the content area below the header.
question is how can I resize the header as the browser window changes size
I can then probably use background-size 100% 100%
I've tried
.siteheader {
max-height : 155px;
height : auto;
min-height : ???;
what would i put for min-height?
or actually what should I do here with this situation?
thanks
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Either you distort your header image or use cover which will chop bits off occasionally or you don't use the border.
If you set background-size: cover; you should solve the problem without distorting the image but it will potentially chop the top / sides off as you resize.
If you use 100% / 100% the image will distort to meet the changing size.
You could use media queries to alter the height of the header - proportionally the height is going to gain prominence as the screen size gets smaller - so pick the common screen sizes that are catered for in responsive design and set the height accordingly to keep your image proportions right OR to display a different image that will fit the space better.
If you set background-size: cover; you should solve the problem without distorting the image but it will potentially chop the top / sides off as you resize.
If you use 100% / 100% the image will distort to meet the changing size.
You could use media queries to alter the height of the header - proportionally the height is going to gain prominence as the screen size gets smaller - so pick the common screen sizes that are catered for in responsive design and set the height accordingly to keep your image proportions right OR to display a different image that will fit the space better.
I solved it by using both cover and a media query to swap out one of the images
I originally didn't want to use cover because I had some text that was being cropped
I broke the header image into 2 images and used your suggestions
Thanks
.siteheader {
height:155px;
min-height:77px;
width : 100%;
max-width: 1200px;
margin:0 auto;
border-bottom:1px solid #999;
background-image : url("../images/header2AF.p
background-position : 60% 70%, 0px 0px;
background-repeat : no-Repeat;
background-size: initial, cover;
}
@media only screen and (max-width: 768px) {
.siteheader {
background-image : url("../images/header2AF-s
background-position : 60% 70%, 0px 0px;
background-repeat : no-Repeat;
background-size: initial, cover;
}
}
I originally didn't want to use cover because I had some text that was being cropped
I broke the header image into 2 images and used your suggestions
Thanks
.siteheader {
height:155px;
min-height:77px;
width : 100%;
max-width: 1200px;
margin:0 auto;
border-bottom:1px solid #999;
background-image : url("../images/header2AF.p
background-position : 60% 70%, 0px 0px;
background-repeat : no-Repeat;
background-size: initial, cover;
}
@media only screen and (max-width: 768px) {
.siteheader {
background-image : url("../images/header2AF-s
background-position : 60% 70%, 0px 0px;
background-repeat : no-Repeat;
background-size: initial, cover;
}
}
Premium Content
You need an Expert Office subscription to comment.Start Free Trial