Reputation: 11
So I recently decided to go with the Twenty Fifteen theme on my self-hosted Wordpress blog.
In this theme the "header" image is actually the sidebar image when you're viewing on a desktop. When it's viewed on a tablet or smart phone, the image moves to the header and is vertically cropped. (In addition to being scaled based on the horizontal length)
For the sight-impaired, the sidebar image is a photo of me. When it's vertically cropped for the mobile version of the site you just see my chin and neck. So I have two questions.
As I mentioned as part of question 2, I've messed around with CSS, but I'm not really well-versed in it. I'm guessing the answer to this question would point me in the right direction and then I can use my programming experience/tinkerer's mindset to get things looking right. Bonus: whatever help I get with this situation will also be useful in fixing mobile on my sister-in-law's site as well.
Upvotes: 0
Views: 70
Reputation: 58
In your style sheet you can set-up media queries. See this course from W3C : http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Another solution is to use a responsive CSS framework such as Bootstrap (a framework made by the Twitter that is totally license-free and pretty much easy to learn and use) the bes thing is that it also helps you a lot with your positionning : http://getbootstrap.com/getting-started/
Upvotes: 1
Reputation: 11
OK, sorry if I'm doing a Stack Overflow faux pas, but I'm not sure how else to have it make sense that I now know the answer.
Someone from Wordpress replied to somewhere else where I'd posted the question. All I had to do is:
.site-header {
background-position: 50% 30% !important;}
And then it worked. It didn't affect the desktop (I did a control-shift-R reload to make sure it wasn't a cache thing) and it works perfectly for the phone.
Is it the !important that makes it work? Why does this work? Seems infinitely easier than what was suggested, but I don't know why.
Upvotes: 0
Reputation: 1397
Override the .site-header class and play around with the background position and the minimum height. Here's a quick modification that may suite your needs:
.site-header {
background: url(http://www.ericsbinaryworld.com/wp-content/uploads/2015/04/for-blog-header-22-Edit1.jpg) no-repeat 50% 25%;
min-height: 200px;
}
The 25% value specified for the background is its vertical position. Since the background image scales with the size of the container, think of this as the scale origin point. Adjust this number as desired. FYI the 50% value is the equivalent for the horizontal position.
the min-height property is just that -- the minimum height of the container.
As one other commenter pointed out, you'll likely want to combine this with a media query so that it is only in effect for certain screen widths. Google "CSS Media Queries" for more info.
Upvotes: 0