Flat Style

Header Image - Flat Style

Header Image

by DV1 » Wed Jul 04, 2018 3:30 am

It's been said an image is worth a thousand words. Well, I won't be using a thousand but the sentiment applies.

The image below is 1280 x 220. I tried it on another theme and their coding makes this image responsive for mobile display.

Image

When I tried to implement it on flat-style, the following resulted:

Image

Not only is much of the image not visible, it is also not responsive, i.e., it closes down on the image. And when it gets to phone-size what is left is a small sliver of sky at the top.

So, what I'd like to achieve is a full image in the header (1280x220) that is responsive. Of course, when it gets to phone-size I would swap it in media queries to another image befitting the screen. For example, I could crop one of the volcanic mounds, a Joshua tree, whatever, at 300 x 300, or some such.

Lastly, when it comes to changing header images as time goes on, will the coding yield to the image if it's a different size, or will the size have to be noted in the CSS? I've seen examples of both so I'm wondering what applies with flat-style.

Oh, and if it can span the entire header are that would be nice. Though I figure that's a "wrap" thing.

That's it, and it only took 230 words to describe. :)

Thank You

Daniel
DV1
Registered User
Posts: 282
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada
Contact:

Re: Header Image

by eeji » Wed Jul 04, 2018 5:57 pm

add background-size:contain; to your css
Free styles: phpbbstyles.oo.gd
My board: iansvivarium.com
User avatar
eeji
Jr. Style Validator
Posts: 1083
Joined: Fri Dec 12, 2008 9:08 pm
Location: Manchester, UK
Contact:

Re: Header Image

by DV1 » Wed Jul 04, 2018 10:10 pm

Thank you, eeji.

As you can see, the image fits nicely now.

Image

Here is the code I used:


.headerbar {
color: #FFFFFF;
width: 1280px;
height: 220px;
}

.headerbar {
background-color: #eee;
background: url("./images/mohave.png") no-repeat;
background-size:contain;
width:auto;
}


Now the image is responsive but as seen in the following image where it begins to collapse to mobile sizes then it starts going up leaving the gap of white area.

Image

So, the thing here is how to get the forum to "follow" the image? Of course, I don't want it to follow the image until it is tiny, as I mentioned before I could swap it in media queries for something more appropriate. But if image and forum start separating immediately then the interim sizes don't show well.

Thank You

Daniel
DV1
Registered User
Posts: 282
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada
Contact:

Re: Header Image

by eeji » Tue Jul 24, 2018 8:37 pm

try background-size: cover; instead
Free styles: phpbbstyles.oo.gd
My board: iansvivarium.com
User avatar
eeji
Jr. Style Validator
Posts: 1083
Joined: Fri Dec 12, 2008 9:08 pm
Location: Manchester, UK
Contact: